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.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BVM 3: File Input Component : Current developments that make sense

BVM FileInput.gif

The code to upload the contents selected from the file input are now built within the library. All files uploaded will be saved to the assets folder of your app.

1. Define the FileInput Component

B4X:
Dim uploadprofile As VMFileInput = vm.NewFile(Me,"fiuploadpic", "upload", "Upload Profile Image", "", False, "", "", 0)

This is passed the module handling the events, the unique id of the element, the vmodel (temporal in this case), label etc.

2. Then you define a _change event, this fires after the files are uploaded. It will return a list of files belonging to this object.

B4X:
Type FileObject(FileName As String, FileDate As String, FileSize As Long, FileType As String)

The _change event is linked to the unique id of the component. In this case we read the uploaded file and then update the profile picture.

B4X:
Sub fiuploadpic_change(fileList As List)
    If fileList = Null Then Return
    'get the file object
    Dim fo As FileObject = fileList.Get(0)
    vm.setdata("dp", $"./assets/${fo.FileName}"$)
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
BVM 3 Image: The image is used to display pictures. You can change an image by updating its v-model as per example above,

BVM3Image.png


B4X:
Dim profilepic As VMImage = vm.NewImage(Me,"displaypic", "dp", "./assets/sponge.png", "SpongeBob", "80px", "80px")
    profilepic.SetBorder("1px", vm.COLOR_BLUE, vm.BORDER_RIDGE)
    profilepic.SetBorderRadius("50%")

The v-model for this image that will update the src attr of the image is "dp". Changing that changes the picture displayed. See here.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BVM 3 Text Fields: These are used for text inputs

BVMTextFields.png


B4X:
Dim txtfirstname As VMTextField = vm.NewText(Me,"txtfirstname", "firstname", "First Name", "First Name", True, "", 0, "", "The first name is required!", 0)
    Dim txtlastname As VMTextField = vm.NewText(Me,"txtlastname", "lastname", "Last Name", "Last Name", True, "", 0, "", "The last name is required!", 0)
    '

To get the contents of the textfields we would execute

B4X:
Dim fname as string = vm.GetData("firstname")
dim lname as string = vm.GetData("lastname")

As we are using the grid methodology, we have defined a single method called .GetData to get all details of all input components inside a container.
 

Mashiane

Expert
Licensed User
Longtime User
BVM 3 Radio Group: This allows one to make a selection from options.

BVM RadioGroup.gif


B4X:
Dim radGender As VMRadioGroup = vm.NewRadioGroup(Me,"rggender", "gender", "Gender", "Male", CreateMap("Male":"Male","Female":"Female"), True, True, 0)

Here we want 2 options, to select a gender, Male / Female. The default selection is "Male"
 

Mashiane

Expert
Licensed User
Longtime User
BVM 3 Passwords

BVM Password.png


Passwords enable one to specify hidden content for their password. In this instance we have turned off the toggle eye.

B4X:
Dim txtPassword As VMTextField = vm.NewPassword(Me,"txtpassword", "password", "Password","",True,False,"",15,"", "The password is required!",0)
    Dim txtconfirmPassword As VMTextField = vm.NewPassword(Me,"txtconfirmpassword", "confirmpassword", "Confirm Password","",True,False,"",15,"", "The password is required!",0)

By just changing one of the variables passed, one can have the toggle buttons visible.

BVM Password1.png


B4X:
Dim txtPassword As VMTextField = vm.NewPassword(Me,"txtpassword", "password", "Password","",True,True,"",15,"", "The password is required!",0)
    Dim txtconfirmPassword As VMTextField = vm.NewPassword(Me,"txtconfirmpassword", "confirmpassword", "Confirm Password","",True,True,"",15,"", "The password is required!",0)
 

Mashiane

Expert
Licensed User
Longtime User
BVM 3 Getting Data from the screen.

BVM Data.png


The data that is returned from your screen is based on the specified v-models per component that you added. This is returned as a map (key value pair)

B4X:
Sub btnicony_click(e As BANanoEvent)
    Dim rec As Map = cont.getdata
    vm.ShowAlert("inform","Data", BANano.tojson(rec), "Data")
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
BVM 3 Slider

BVM Slider.png


B4X:
Dim slider As VMSlider = vm.NewSlider(Me, "slider", "slider", "Slider", 0, 100, 0).SetDevicePositions(2, 2, 12, 6, 6, 6)
    cont.AddControl1(slider.Slider, slider.ToString)

This slider starts from 0 to 100, will sit in row 2 column 2, spanning 6 spaces on medium, large, xlarge devices.
 

Mashiane

Expert
Licensed User
Longtime User
BVM 3 AutoComplete

The autocomplete can be sources from a list or key value pairs.

BVM Select.png

We first define the source.

B4X:
Dim lst As List
    lst.Initialize
    lst.Add(CreateMap("name": "Florida", "abbr": "FL", "id": "1"))
    lst.Add(CreateMap("name": "Georgia", "abbr": "GA", "id": "2"))
    lst.Add(CreateMap("name": "Nebraska", "abbr": "NE", "id": "3"))
    lst.Add(CreateMap("name": "California", "abbr": "CA", "id": "4"))
    lst.Add(CreateMap("name": "New York", "abbr": "NY", "id": "5"))
    vm.SetData("states2", lst)

We add our auto-complete

B4X:
Dim ac1 As VMAutoComplete = vm.NewAutoCompleteDataSource(Me, "acx1", "acx1", "States", "States", "states2", "id", "name", False, True, "This is it!", "", 0).SetDevicePositions(3, 2, 12, 6, 6, 6)
    cont.AddControl1(ac1.AutoComplete, ac1.ToString)

The data source in this case will be like records coming from a db select command.

The second option is to define the autocomplete from a normal list

BVM AutoComplete.png


Here we define a list for our options.

B4X:
Dim genderlist1 As List = Array("Male", "Female")

Then we define our AutoComplete

B4X:
Dim ac2 As VMAutoComplete = vm.NewAutoComplete(Me, "acx2", "acx2", "Gender", "Gender", genderlist1, False, "This is it!", "", 0).SetDevicePositions(3, 2, 12, 6, 6, 6)
    cont.AddControl1(ac2.AutoComplete, ac2.ToString)

This approach also applies to Combo and Select components.
 

Mashiane

Expert
Licensed User
Longtime User
BVM 3 Labels

One can define any label and size they want according to the available standards. In this example, we define a H1.

H1.png


B4X:
Dim lbl As VMLabel = vm.NewLabel("labelz", "labelz", vm.SIZE_H1, "This is H1").SetDevicePositions(6, 2, 12, 6, 6, 6)
    cont.AddControl1(lbl.Label, lbl.ToString)
 

Mashiane

Expert
Licensed User
Longtime User
BVM 3 Selects

For this select we base it on a map and another one on the previous states list.

Let's define a gender list.

B4X:
Dim genderlist As Map = CreateMap("f":"Female", "m":"Male")

Let's use this map to define a select dropdown.

B4X:
Dim mysel1 As VMSelect = vm.NewSelectOptions(Me, "myselect1", "myselect1", "Select Gender", True, False, "Gender", genderlist, "id", "text", False, "My thingo", "", 0).SetDevicePositions(8, 2, 12, 6, 6, 6)
    cont.AddControl1(mysel1.Combo, mysel1.ToString)

BVM Dropdown.png


The second option is from a datasource.

We define the ds:

B4X:
Dim lst As List
    lst.Initialize
    lst.Add(CreateMap("name": "Florida", "abbr": "FL", "id": "1"))
    lst.Add(CreateMap("name": "Georgia", "abbr": "GA", "id": "2"))
    lst.Add(CreateMap("name": "Nebraska", "abbr": "NE", "id": "3"))
    lst.Add(CreateMap("name": "California", "abbr": "CA", "id": "4"))
    lst.Add(CreateMap("name": "New York", "abbr": "NY", "id": "5"))
    vm.SetData("states2", lst)

We then add a multiple input select.

BVM MultiSelect.png


B4X:
'datasource
    Dim mysel As VMSelect = vm.NewSelectDataSource(Me, "myselect", "myselect", "Select States", True, True, "States", "states2", "id", "name", False, "My thingo", "", 0).SetDevicePositions(8, 1, 12, 6, 6, 6)
    cont.AddControl1(mysel.Combo, mysel.ToString)
    'map
 

Mashiane

Expert
Licensed User
Longtime User
BVM 3 Buttons

1. Let's define a button that will take the whole block

BMV ButtonBlock.png


B4X:
Dim btn As VMButton = vm.NewButton(Me, "buttonx", "TheMash Block", True, True, False, True).SetDevicePositions(7, 2, 12, 6, 6, 6)
    cont.AddControl1(btn.Button, btn.ToString)

2. Lets add an icon button

BVM IconButton.png


B4X:
Dim icon As VMIcon = vm.NewIcon(Me, "icon", "mdi-chevron-right", vm.ICON_LARGE, vm.COLOR_AMBER).SetDevicePositions(7, 1, 12, 6, 6, 6)
    icon.SetDark(True)
    cont.AddControl1(icon.Icon, icon.ToString)

3. Let's add a FAB button

BVM Fab.png


B4X:
Dim btnxy As VMButton = vm.NewFabButton(Me, "btnicony", "mdi-pencil", vm.COLOR_DEEPORANGE, "Fab Button").SetDevicePositions(9, 2, 12, 6, 6, 6)
    btnxy.SetLarge(True)
    cont.AddControl1(btnxy.Button, btnxy.ToString)

4. Let's add the speed dial

BVM SpeedDial.png


B4X:
Dim sp1 As VMSpeedDial = vm.CreateSpeedDial("sp1", Me, "mdi-account-circle", "mdi-close")
    sp1.Button.SetColorIntensity(vm.COLOR_BLUE, vm.INTENSITY_DARKEN2)
    sp1.AddItem("edit", "mdi-pencil", "green")
    sp1.AddItem("addit", "mdi-plus", "indigo")
    sp1.AddItem("deleteit", "mdi-delete", "red")
    vm.AddSpeedDial(sp1)

All events for buttons take the specified id and then a click method.

B4X:
Sub edit_click(e As BANanoEvent)
    vm.ShowSnackBar("Edit!")
End Sub
 
Top