B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

*START OF NOTICE

As of 02 FEB 2021, this project is is no longer maintained as it has given birth to BVAD3.

This project was a joy to create, however like everything that has a start and an end, its time to move on and evolve. BVAD3 is faster, more simpler to implement and takes advantage of the Abstract Designer use.

Subscribe to Telegram Channel

[BANanoVuetifyAD] Vuetify WebSites & WebApps with BANano for Dummies

Ahoy!!!

*END OF NOTICE


UPDATE 24 October 2020: The recommended methodology to create BANanoVuetify WebApp is being discussed here: MealPrep. This covers most of what VueJS + Vuetify is all about in terms of the internals.

Whilst you can use the designer to create your UX, you need to separate your concerns when creating the app just like its done on the MealPrep by using components and routers for the pages.

DO NOT FOLLOW THE APPROACH USED IN CREATING THE BANANOVUEMATERIALDEMO WHEN CREATING YOUR APPS. THAT METHOD IS NO LONGER FEASIBLE.

Download

BANanoVuetifyAD - Prelease Playlist on Youtube
BANanoVueMaterial (Vuetify) Playlist on Youtube

2020-05-20 Update: Important Update

BANanoVueMaterial Designer Usage - Mock.Compile.Publish

BANanoVueMaterialCore (pure vuetify without extensions)

Exploring Components & Router Basics

How to ask questions, request help, report bugs and request enhancements + Telegram Channel

Thanks to everyone who has been playing with this and highlighting issues and requesting features. You are stars!

*** IMPORTANT: Migrating to the new version

Word. Moving from VueMaterial to Vuetify was inevitable and whilst both are Vue Material based frameworks, Vuetify has more strengths. If if was going to be possible, we would not be having a migration guide, however things changed and enhancements happened and some code rewrites took place. When doing the transition from the VueMaterial to Vuetify codebases, we tried to make the code transition to be as smooth as possible, thus our migration guide is as small as possible. We did not want to dictate how to use the lib, so we removed some things that were hard coded and fixed. This was specific to the side drawer. To test the migration, the old examples were converted to new examples (see below) and all of them work.

BANanoVueMaterial is complete open source, so this means you can use it to your hearts content and adjust it and make it your own. If you enhance, send us word, we will merge. Make the code simple and comment it as much as you can. I cannot over-emphasize that Vuetify is LARGE, so check their website on how components are created and used to learn stuff. Do enjoy. TheMash. #IAmLovingThis

BANanoVuetify (recommended for new projects & migration notes attached)

You can track our progress from here. All the components that we got from VueMaterial exists in Vuetify and more!!!

• Copy all the files in the 1. External Libraries folder to your B4J external libraries folder
• If you want to explore the BANanoVuetify source code, open and run the project in 2. Library
• If you want to explore all the components in this version, open and run the project in 3. Demo
• You can also explore other specific examples from the 4. Examples folder

Live Preview



Tutorials (New)

Mock.Compile.Publish

NB: Download and Import the Project Components files for the Expense Tracker here.

1. Expense Tracker with BANanoSQL

Expense Tracker Part 1
Expense Tracker Part 2
Expense Tracker Part 3
Expense Tracker Part 4
Preparations for Part 5
Expense Tracker Part 5.1
Expense Tracker Part 5.2

2. Expense Tracker with SQLite (you need to understand all of 1. Expense Tracker with BANanoSQL first!)

Making your app use SQLite as a backend
Mock.Compile.Publish Expense Tracker with SQLite as BackEnd Full Implementation

3. Expenses Tracker with MSSQL (you need to understand all of 1. & 2. above first!)

Mock.Compile.Publish Expense Tracker with MSSQL as BackEnd

4. Expense Tracker with MySQL (you need to understand all of 1. - 3. above first)

Mock.Compile.Publish Expense Tracker with MySQL as BackEnd

NEW NEW NEW!!!! Handling Events

Developing a grid with the Designer
Developing forms with the Designer
Designing text field controls with the Designer
Designing text area controls with the Designer
Designing password controls with the Designer
Designing images with the Designer
Designing file input with the Designer
Designing buttons with the Designer
Designing checkboxes with the Designer
Designing switches with the Designer
Designing icons with Designer
Designing labels with Designer
Designing sliders with the Designer
Designing select, combo and autocomplete with the Designer
Designing radio boxes with the Designer
Designing date & time pickers with the Designer (NB: functionality works on your app)
Designing a parallax with the Designer
Designing a container with the Designer
Designing the appbar, toolbars and systembar with the Designer - Part 1
Designing the appbar, toolbars and systembar with the Designer - Part 2
Drag n Drop Menu - Part 1
Drag n Drop Menu - Part 2
Drag n Drop Carousel
Drag n Drop Dialog
Drag n Drop Rating
Drag n Drop SpeedDial
DataTable multi selects
SetFocus(?)
Invisible File Selector
DataTable GetItemKeys
Drag n Drop Chips
Drag n Drop Badges
Drag n Drop Avatars
Exporting Component Schemas (Multi Development Mode)
Importing Component Schemas (Multi Development Mode)
Drag n Drop Lists
Drag n Drop Tabs
Drag n Drop Stepper
Drag n Drop ExpansionPanels (Accordion)
Drag n Drop Page
Setting Project Properties
Reading Text files (without upload to server)
Reading Excel files (without upload to server)

Reporting (New)

Excel Client Side Reporting with OXML

Example Projects

Hello World
Navigation (1 or more pages using v-show directive)
Login Screen
User Registration Screen
Expenses.Show - MySQL+PHP+ChartKick CRUD
Form Utilities - BANanoSQL CRUD
Calculations - using watch directives

IMPORTANT: Asking Questions about BANanoVueMaterial

1. Please do not ask questions on this thread as this is about updates and new developments about BANanoVueMaterial.
2. When asking a question, please use the B4J Forum and prefix your question with [BANanoVueMaterial] Your Question
3. As the author of this lib, I would recommend that in the content of your question you also address it to myself with @Mashiane (this will also help me find and attend to your questions faster as it will show in my personal notifications)

Related Content

BANanoVue - a now updated CORE of BANanoVueMaterial
BANanoWired - a mockup framework build on BANanoVue (WIP)
BANanoPDFDesign - a creation based on BANanoVueMaterial for PDF reporting (WIP)
BANanoVMDesign - this intends to support BANanoVueMaterial design philosophy. (WIP)

Have fun and enjoy!

PS: BANanoVueMaterial uses an updated version of the BANanoPostProcessor library done by Kiffi.

 

[Mashiane]

BANanoVueMaterial 3 (aka BananoVuetify) is officially released for production use.

Download the complete open source project here, https://github.com/Mashiane/BANanoVuetify

Enjoy

Ta!

 

[thinktank]

good work master, keep it up...

 

[Mashiane]

Developing BANanoVuetify Apps: The Grid

NB: You can run the demo app directly from Github

One of the things one will come across when developing their webapps or websites is the creation of the grid to place the various controls one will see and use.
The Vuetify grid follows the Bootstrap grid system (flex mode) with 12 column spans. With this we can add a variety of sizes as per our wants and needs.

One of the things BANanoVuetify prouds itself of are two things:

1. Without knowing your grid definition, when adding components in a container, you can specify where you want them to sit in the grid matrix, the code will figure it out. This however requires that no sequence is skipped. For example, you can define a component as sitting at R1C1, the next component should be in R2.

2. You can also use in the build grid definition that will give you the source code you can use to design your grid. In the designer we have added functionality to create any type of grid you wish and you can see the b4x code and also the html representation of the code.

Whilst there are more other properties you can define for your rows and columns as defined in the VMRow and VMCol classes respestively, most of these attributes and classes can be set directly in the VMContainer class.

The Container (VMContainer) class exists for most components that are likely to have more content and you can also create your own and then add it to your control with .AddComponent.

To access the designer, on the Demo app, click Designer on the nav drawer. For now this has the grid designer that after you have designed your grid, you can then

1. Export to B4x code - this code you use in your BANanoVuetify project
2. Export to HTML - this code you can use externally directly on a VueJS project outside B4x.

NB: Watch in HD

 

[joulongleu]

good work master, keep it up...

me too

 

[Mashiane]

Other quick wins coming with version 3.01

Whilst still working on finalizing the designer (which will feature drag and drop form input controls and code generation, I also needed some fancy counter). Here comes the arc and circle counters.

Arc Counters

Dim arc As VMArcCounter = vm.createarccounter("arc1", Me)
    arc.setsize("10rem").SetStart("-40").SetEnd("40").SetText("123")
    cont.AddComponent(1,1,arc.tostring)
    '
    Dim arc2 As VMArcCounter = vm.CreateArcCounter("arc2", Me)
    arc2.SetSize("10rem").SetDashSpacing("0.6").SetStrokeWidth("60")
    arc2.SetActiveWidth("60").SetDashCount("45").SetActiveCount("17")
    arc2.SetStart("300").SetEnd("60").SetText("Label").SetTextX("right")
    arc2.SetTextY("bottom")
    cont.AddComponent(1,2,arc2.tostring)
    '
    Dim arc3 As VMArcCounter = vm.CreateArcCounter("arc3", Me)
    arc3.SetSize("10rem").SetStrokeWidth("2").SetActiveWidth("6")
    arc3.SetDashSpacing("0").SetStart("140").SetEnd("-140")
    arc3.SetStroke("black").SetActiveStroke("red")
    arc3.SetText("5").SetTextX("center").SetTextY("bottom")
    cont.AddComponent(1,3,arc3.tostring)

One can add a counter to make this dynamic and update on ticks

Circle Counters

Dim arc4 As VMCircleCounter = vm.CreateCircleCounter("arc4", Me)
    arc4.SetSize("10rem").SetText("123")
    cont.AddComponent(2,1,arc4.tostring)
    '
    Dim arc5 As VMCircleCounter = vm.CreateCircleCounter("arc5", Me)
    arc5.SetSize("10rem").SetDashSpacing("0").SetStrokeWidth("2").SetActiveWidth("6")
    arc5.SetActiveCount("50").SetText("label")
    cont.AddComponent(2,2,arc5.tostring)
    '
    Dim arc6 As VMCircleCounter = vm.CreateCircleCounter("arc6", Me)
    arc6.SetSize("10rem").SetReverse("true").SetRotate("90").SetStrokeWidth("60")
    arc6.SetActiveWidth("60").SetDashSpacing("0.6").SetStroke("black").SetActiveStroke("red")
    cont.AddComponent(2,3,arc6.tostring)

 

[Mashiane]

Developing BANanoVuetify Apps: Form Input Controls

The process of developing apps with the designer should be simple. You drag and drop the elements that you want from the toolbox to the stage. These are placed in the stage so that you can manipulate them. At the moment, a few elements have been added and a property bag is forthcoming. This is just to introduce to you how things will unfold.

Just like in the previous example, one will be able to download the source code and even the html for the elements they have placed. This code one can then use it to create their pages.

NB: When one drags elements to the stage, one don't need to use any of the "Grid" panel elements as the grid will be automatically generated based on elements they put on the stage.

The process of generating a preview of the designed UX means a complete recompilation of the HTML templates per each of the elements. For this, a page refresh is necessary. This is just a designer anyway as it just helps one to achieve some objectives. This refresh ensures that the "state" of the elements is taken care of as the page is recompiled to show your designer UX.

NB: Watch in HD

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating Text Fields Control Properties to meet your design

As of version 3, BANanoVueMaterial is now based on Vuetify, we call it BANanoVuetify.

When you are designing components with the designer, you drag and drop the element that you need to the stage area. The component you added will be allocated a unique id and saved under 'My Components'.

NB: Watch in HD



You can select the component by selecting it from the 'My Components' section (left part of screen). This will activate the property bag for that element. Let's look at the video to see how we did our TextFields.

The TextFields affected by this are : Text, Email, Password, TextArea and Tel.

Once done, you can extract both the source code and HTML by using the menus. You can also add additional attributes and classes after the code is generated should you need to.

Soon, we will build an app directly from code generated by the designer! Watch this space.

Try out the text field components now by getting your copy of BANanoVuetify 3.

 

[Mashiane]

Moving towards an easier to maintain library: Version 3.02

NB: The AutoComplete, ComboBox and Select components are almost 90% identical in terms of attributes, classes etc.

To ensure that we are able to maintain the code easier, instead of having 3 different class objects, we have one, VMSelect, instead of VMAutoComplete and VMCombobox.

To create an autocomplete

dim auto As VMSelect = CreateAutoComplete("sel", module)

To create a combobox

Dim combo as VMSelect = CreateComboBox("cbo", module)

NB: The TextArea and TextField are almost 90% identical in terms of attributes, classes,etc also, these have been merged, we have VMTextField

To create a textarea

Dim txta as VMTextFIeld = CreateTextArea("txta", module)/Code]

To make a textfield a password input

[code]Dim txtp as VMTextField = CreateTextField("txtp", module).SetPassword(true, true)

The last variable passed indicates that one needs to show the toggle icons, to turn them off, set the last variable to false.

NB: Also the TimePicker and DatePicker are almost identical, so these have been merged. The new control name is VMDateTimePicker.

To create the time picker

Dim tp as VMDateTimePicker = CreateTimePicker("tp", module)

To create the date picker

Dim dp as VMDateTimePicker = CreateDatePicker("dp", module)

NB: Also the FileInput and TextField are almost identical, so these have been merged. The merged to control is the textfield

To create the file input

Dim fi as VMTextField = CreateFileInput("tp", module)

'
NB: Also the Switch and CheckBox are almost identical, so these have been merged. The merged to control is the CheckBox

To create the switch

Dim fi as VMCheckBox = CreateSwitch("tp", module)

Ta!

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating Text Area Control for your design.

Download

This demo shows how we handle the text area control in the stage. We show here how we drag and drop it in the stage and then size it and then change some properties to meet our needs. We also show how we size the column size it will sit in, at first with 4 and then with 6 spans.

Just like the example above about the text fields, we configure and set the attributes of the component and then save it.

As you have seen above, we create regular text area, solo, filled and outlined. You can still apply most of the attributes we used in the text field.

Clicking <> for code in the toolbar or html will export your source code.

NB: Watch in HD

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating Password Controls for your design.

Download

This demo shows how we handle the password text field in the stage. There are 2 types of passwords, one that can show the toggle eye and one where you can hide the eye. We show here how we drag and drop it in the stage and then size it and then change some properties to meet our needs.

Just like the example above about the text fields, text areas etc, we configure and set the attributes of the component and then save it.

As you have seen above, we create regular text area, solo, filled and outlined. You can still apply most of the attributes we used in the text field.

Clicking <> for code in the toolbar or html will export your source code.

NB: Watch in HD

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating Image Controls for your design.

Download

This demo shows how we handle the images in the stage. We create a profile display picture with a round radius and borders and in another one we create an image that we can use for display. We show here how we drag and drop it in the stage and then size it and then change some properties to meet our needs.

Just like the example above about the text fields, text areas etc, we configure and set the attributes of the component and then save it.

Clicking <> for code in the toolbar or html will export your source code.

NB: Watch in HD

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating File Input for your design.

Download

The file input control is used to upload files to your server. In the designer you can place it along the matrix you need. In this demo we see how we can design and configure the file input according to what we need and the place it on our stage.

Clicking <> for code in the toolbar or html will export your source code.

NB: Watch in HD

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating Buttons for your design.

Download

The buttons are clickable controls that one can press and events can fire. To create buttons with the designer, one drags and drops them. One then updates the attributes to make the button meet their design requirements. This is how its done.

NB: Watch in HD

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating Checkboxes for your design.

Download

This video showcases how to drag and drop checkbox elements to your design. Once done, one is able to view the generated HTML and B4X code.

NB: Watch in HD

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating Switches for your design.

Download

This video showcases how to drag and drop switch elements to your design. Once done, one is able to view the generated HTML and B4X code.

NB: Watch in HD

 

[Mashiane]

Added functionality to enable one to design to their device of choice. One is able to toggle between the three devices (top right).

NB: Decrease your web-browser to 80% at least.

Also, whilst elements are cut on the right hand section of the device, its not a true reflection.

iPad

iPhone

You are also able to view the B4X code for your stage creation by clicking the <> B4X tab.

And also a nicely formatted HTML of your code is available.

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating Icons for your design.

Download

Today we look at how one can drag and drop icons for their designs. We configure the colors and the sizes. We see the generated source code and the html source code.
The cool device previews enable us to see how our designs look in macs, itab and iphone.

NB: Watch in HD

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating Labels for your design.

Download

In this demo we take a look at how we can design our labels for our web page. Also here one can navigate and view the generated B4X code and HTML code.

NB: Watch in HD

 

[Mashiane]

BANanoVuetify 3 Designer - Dragging n Dropping, Updating Sliders for your design.

Download

In this demo we take a look at how we can design our sliders for our web page. Also here one can navigate and view the generated B4X code and HTML code.

NB: Watch in HD

 

[Mashiane]

BANanoVuetify 3.03, BANanoVuetify

Update: Expenses.Show Example now includes functionality to filter the expenses.


Blogged here