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
We have just added a login / register template which is created using base classes. This give one the complete flexibility they need without conforming to already built in functionality. You code it as you like!

Download

BVMTemplate3.gif
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Version 4.34 - Part 1

1600377589698.png


VChipGroup - this for grouping a list of chips and assign a v-model. Think of it as a vertical combo. It can also be multiple selections etc.

B4X:
'chip groups
    Dim cg As VMChipGroup = vm.CreateChipGroup("cg", Me).SetColumn(True).SetActiveClass(vm.COLOR_PRIMARY_TEXT)
    cg.AddItems(Array("Work", "Home Improvement", "Vacation", "Food", "Drawers"))
    cg.AddItems(Array("Shopping", "Art", "Tech", "Creative Writing"))
    cg.AddToContainer(cont, 3, 1)

In this example, we create a card and use the chip group for "type" selection.

1600387179260.png


Here is the card code

B4X:
Dim product1 As VMCard = vm.CreateCard("product1", Me).AddClass("mx-auto").SetMaxWidth("auto")
    '** title add own heading
    product1.Title.AddElement("", "h2", "Toothbrush", Null, Null, Array("display-1"))
    product1.Title.AddSpacer
    product1.Title.AddElement("", "span", "$4.99", Null, Null, Array("title"))
    '** text
    product1.Text.SetText("Our company takes pride in making handmade brushes.")
    product1.Text.SetText("Our toothbrushes are available in 4 different bristel types, from extra soft To hard.")
    '** text after
    product1.SetTextAfterDivider("mx-4")
    '
    Dim vcardtext As VMCardText = vm.CreateCardText("", Me)
    'add a span
    vcardtext.AddElement("", "span", "Select Type", Null, Null, Array("subheading"))
    '
    Dim cg1 As VMChipGroup = vm.CreateChipGroup("", Me)
    cg1.SetVModel("selection").SetData("selection", 2).SetActiveClass("deep-purple--text text--accent-4").SetMandatory(True)
    cg1.AddItems(Array("Extra Soft", "Soft", "Medium", "Hard"))
    'add chip group to text
    vcardtext.SetText(cg1.ToString)
    product1.SetTextAfter(vcardtext.tostring)
    '
    Dim btnAdd2Cart As VMButton = vm.CreateButton("", Me)
    btnAdd2Cart.SetBlock(True)
    btnAdd2Cart.SetTextColor(vm.COLOR_WHITE)
    btnAdd2Cart.SetColorIntensity(vm.COLOR_DEEPPURPLE, vm.INTENSITY_ACCENT4)
    btnAdd2Cart.SetLabel("Add to Cart")
    '
    product1.Actions.AddButton(btnAdd2Cart)


In this example we choose sizes..

1600391034283.png


B4X:
Dim shirtBlouse As VMCard = vm.CreateCard("shirtBlouse", Me).AddClass("mx-auto").SetMaxWidth("400")
    shirtBlouse.Title.AddElement("", "h2", "Shirt Blouse", Null, Null, Array("display-1"))
    shirtBlouse.Title.AddSpacer
    shirtBlouse.Title.AddElement("", "span", "$44.50", Null, Null, Array("title"))
    shirtBlouse.Text.SetText("Our blouses are available in 8 colors. You can custom order a built-in arch support For any of the models.")
    shirtBlouse.SetTextAfterDivider("mx-4")
    '
    Dim cardText1 As VMCardText = vm.CreateCardText("", Me)
    cardText1.AddElement("", "span", "Select Size", Null, Null, Array("subheading"))
    '
    Dim cg2 As VMChipGroup = vm.CreateChipGroup("cg2", Me).SetVmodel("cg2selection").SetData("cg2selection", "08").SetMandatory(True)
    cg2.SetActiveClass("deep-purple--text text--accent-4")
    cg2.AddItems(Array("04", "06", "08", "10", "12", "14"))
    '
    cardText1.SetText(cg2.ToString)
    shirtBlouse.SetTextAfter(cardText1.ToString)
    '
    Dim btnAdd2Cart1 As VMButton = vm.CreateButton("", Me)
    btnAdd2Cart1.SetBlock(True)
    btnAdd2Cart1.SetTextColor(vm.COLOR_WHITE)
    btnAdd2Cart1.SetColorIntensity(vm.COLOR_DEEPPURPLE, vm.INTENSITY_ACCENT4)
    btnAdd2Cart1.SetLabel("Add to Cart")
    '
    shirtBlouse.Actions.AddButton(btnAdd2Cart1)
    shirtBlouse.AddToContainer(xcont, 1, 2)

Filter Chip Groups

This example uses the base classes to create the card, toolbar, card text and chip groups.

BVMChipFilter.gif


Here is the code...

B4X:
'3rd card
    Dim card3 As VMElement = vm.VCard("card3").AddClass("mx-auto").SetMaxWidth("400")
    '
    Dim tbl1 As VMElement = vm.VToolBar("card2tbl1")
    tbl1.SetAttr(CreateMap("flat":True, "color":"deep-purple accent-4", "dark":True))
    '
    Dim btn1 As VMElement = vm.VBtn("").SetAttrSingle("icon", True).SetTextColor(vm.COLOR_WHITE)
    Dim icn As VMElement = vm.VIcon("").SetText("mdi-close")
    btn1.AddElement(icn)
    tbl1.AddElement(btn1)
    '
    Dim tt As VMElement = vm.VToolbarTitle("").SetText("Filter Results").SetTextColor(vm.COLOR_white)
    tbl1.AddElement(tt)
    card3.AddElement(tbl1)
    '
    Dim c3t1 As VMElement = vm.VCardText("")
    Dim c3t2 As VMElement = vm.VCardText("")
    '
    Dim h2 As VMElement = vm.H2("").AddClass("title mb-2").SetText("Choose amenities")
    c3t1.AddElement(h2)
    '
    Dim cg4 As VMElement = vm.VChipGroup("").SetVModel("amenities").SetAttrSingle("column", True).SetAttrSingle("multiple", True)
    Dim amenities As List = vm.NewList1(Array As Int(1, 4))
    cg4.SetData("amenities", amenities)
    cg4.AddElement1("v-chip", "", "Elevator", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg4.AddElement1("v-chip", "", "Washer", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg4.AddElement1("v-chip", "", "Fireplace", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg4.AddElement1("v-chip", "", "Wheelchair", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg4.AddElement1("v-chip", "", "Dogs ok", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg4.AddElement1("v-chip", "", "Cats ok", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    c3t1.AddElement(cg4)
    
    card3.AddElement(c3t1)
    '
    Dim h2a As VMElement = vm.H2("").AddClass("title mb-2").SetText("Choose neighborhoods")
    c3t2.AddElement(h2a)
    
    Dim cg5 As VMElement = vm.VChipGroup("").SetVModel("neighborhoods").SetAttrSingle("column", True).SetAttrSingle("multiple", True)
    Dim neighborhoods As List = vm.NewList1(Array As Int(1))
    cg5.SetData("neighborhoods", neighborhoods)
    cg5.AddElement1("v-chip", "", "Snowy Rock Place", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg5.AddElement1("v-chip", "", "Honeylane Circle", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg5.AddElement1("v-chip", "", "Donna Drive", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg5.AddElement1("v-chip", "", "Elaine Street", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg5.AddElement1("v-chip", "", "Court Street", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg5.AddElement1("v-chip", "", "Kennedy Park", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    c3t2.AddElement(cg5)
        
    card3.AddElement(c3t2)
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates - Version 4.34 - Part 2

Borders & Radius

1600433002776.png


Here we are just applying classes to divs to set their radius and borders.

B4X:
Dim d1 As VMElement = vm.Div("").SetRounded.AddClass("pa-6 text-center grey lighten-2").SetText("Rounded")
    d1.AddToContainer(cont,1,1)
    '
    Dim d2 As VMElement = vm.Div("").SetRounded_SM.AddClass("pa-6 text-center grey lighten-2").SetText("Rounded_SM")
    d2.AddToContainer(cont,1,2)
    '
    Dim d3 As VMElement = vm.Div("").SetRounded_LG.AddClass("pa-6 text-center grey lighten-2").SetText("Rounded_LG")
    d3.AddToContainer(cont,1,3)
    '
    Dim d4 As VMElement = vm.Div("").SetRounded_XL.AddClass("pa-6 text-center grey lighten-2").SetText("Rounded_XL")
    d4.AddToContainer(cont,1,4)
    '
    Dim d5 As VMElement = vm.Div("").SetRounded_Pill.AddClass("pa-6 text-center grey lighten-2").SetText("Pill")
    d5.AddToContainer(cont,1,5)
    '
    Dim d6 As VMElement = vm.Div("").SetRounded_Circle.AddClass("pa-6 text-center grey lighten-2").SetText("Circle")
    d6.AddToContainer(cont,1,6)

1600433591751.png


B4X:
vm.Div("").SetRounded_Top("xl").AddClass("pa-6 text-center grey lighten-2").SetText("Rounded Top").AddToContainer(cont,2,1)
    vm.Div("").SetRounded_Right("xl").AddClass("pa-6 text-center grey lighten-2").SetText("Rounded Right").AddToContainer(cont,2,2)
    vm.Div("").SetRounded_Bottom("xl").AddClass("pa-6 text-center grey lighten-2").SetText("Rounded Bottom").AddToContainer(cont,2,3)
    vm.Div("").SetRounded_Left("xl").AddClass("pa-6 text-center grey lighten-2").SetText("Rounded Left").AddToContainer(cont,2,4)

1600433856072.png


B4X:
vm.Div("").SetRounded_TopLeft("xl").AddClass("pa-6 text-center grey lighten-2").SetText("Top Left").AddToContainer(cont,3,1)
    vm.Div("").SetRounded_TopRight("xl").AddClass("pa-6 text-center grey lighten-2").SetText("Top Right").AddToContainer(cont,3,2)
    vm.Div("").SetRounded_BottomRight("xl").AddClass("pa-6 text-center grey lighten-2").SetText("Bottom Right").AddToContainer(cont,3,3)
    vm.Div("").SetRounded_BottomLeft("xl").AddClass("pa-6 text-center grey lighten-2").SetText("Bottom Left").AddToContainer(cont,3,4)
 
Last edited:

joulongleu

Active Member
Licensed User
Longtime User
Upcoming Updates: Version 4.34 - Part 1

View attachment 100209

VChipGroup - this for grouping a list of chips and assign a v-model. Think of it as a vertical combo. It can also be multiple selections etc.

B4X:
'chip groups
    Dim cg As VMChipGroup = vm.CreateChipGroup("cg", Me).SetColumn(True).SetActiveClass(vm.COLOR_PRIMARY_TEXT)
    cg.AddItems(Array("Work", "Home Improvement", "Vacation", "Food", "Drawers"))
    cg.AddItems(Array("Shopping", "Art", "Tech", "Creative Writing"))
    cg.AddToContainer(cont, 3, 1)

In this example, we create a card and use the chip group for "type" selection.

View attachment 100211

Here is the card code

B4X:
Dim product1 As VMCard = vm.CreateCard("product1", Me).AddClass("mx-auto").SetMaxWidth("auto")
    '** title add own heading
    product1.Title.AddElement("", "h2", "Toothbrush", Null, Null, Array("display-1"))
    product1.Title.AddSpacer
    product1.Title.AddElement("", "span", "$4.99", Null, Null, Array("title"))
    '** text
    product1.Text.SetText("Our company takes pride in making handmade brushes.")
    product1.Text.SetText("Our toothbrushes are available in 4 different bristel types, from extra soft To hard.")
    '** text after
    product1.SetTextAfterDivider("mx-4")
    '
    Dim vcardtext As VMCardText = vm.CreateCardText("", Me)
    'add a span
    vcardtext.AddElement("", "span", "Select Type", Null, Null, Array("subheading"))
    '
    Dim cg1 As VMChipGroup = vm.CreateChipGroup("", Me)
    cg1.SetVModel("selection").SetData("selection", 2).SetActiveClass("deep-purple--text text--accent-4").SetMandatory(True)
    cg1.AddItems(Array("Extra Soft", "Soft", "Medium", "Hard"))
    'add chip group to text
    vcardtext.SetText(cg1.ToString)
    product1.SetTextAfter(vcardtext.tostring)
    '
    Dim btnAdd2Cart As VMButton = vm.CreateButton("", Me)
    btnAdd2Cart.SetBlock(True)
    btnAdd2Cart.SetTextColor(vm.COLOR_WHITE)
    btnAdd2Cart.SetColorIntensity(vm.COLOR_DEEPPURPLE, vm.INTENSITY_ACCENT4)
    btnAdd2Cart.SetLabel("Add to Cart")
    '
    product1.Actions.AddButton(btnAdd2Cart)


In this example we choose sizes..

View attachment 100212

B4X:
Dim shirtBlouse As VMCard = vm.CreateCard("shirtBlouse", Me).AddClass("mx-auto").SetMaxWidth("400")
    shirtBlouse.Title.AddElement("", "h2", "Shirt Blouse", Null, Null, Array("display-1"))
    shirtBlouse.Title.AddSpacer
    shirtBlouse.Title.AddElement("", "span", "$44.50", Null, Null, Array("title"))
    shirtBlouse.Text.SetText("Our blouses are available in 8 colors. You can custom order a built-in arch support For any of the models.")
    shirtBlouse.SetTextAfterDivider("mx-4")
    '
    Dim cardText1 As VMCardText = vm.CreateCardText("", Me)
    cardText1.AddElement("", "span", "Select Size", Null, Null, Array("subheading"))
    '
    Dim cg2 As VMChipGroup = vm.CreateChipGroup("cg2", Me).SetVmodel("cg2selection").SetData("cg2selection", "08").SetMandatory(True)
    cg2.SetActiveClass("deep-purple--text text--accent-4")
    cg2.AddItems(Array("04", "06", "08", "10", "12", "14"))
    '
    cardText1.SetText(cg2.ToString)
    shirtBlouse.SetTextAfter(cardText1.ToString)
    '
    Dim btnAdd2Cart1 As VMButton = vm.CreateButton("", Me)
    btnAdd2Cart1.SetBlock(True)
    btnAdd2Cart1.SetTextColor(vm.COLOR_WHITE)
    btnAdd2Cart1.SetColorIntensity(vm.COLOR_DEEPPURPLE, vm.INTENSITY_ACCENT4)
    btnAdd2Cart1.SetLabel("Add to Cart")
    '
    shirtBlouse.Actions.AddButton(btnAdd2Cart1)
    shirtBlouse.AddToContainer(xcont, 1, 2)

Filter Chip Groups

This example uses the base classes to create the card, toolbar, card text and chip groups.

View attachment 100214

Here is the code...

B4X:
'3rd card
    Dim card3 As VMElement = vm.VCard("card3").AddClass("mx-auto").SetMaxWidth("400")
    '
    Dim tbl1 As VMElement = vm.VToolBar("card2tbl1")
    tbl1.SetAttr(CreateMap("flat":True, "color":"deep-purple accent-4", "dark":True))
    '
    Dim btn1 As VMElement = vm.VBtn("").SetAttrSingle("icon", True).SetTextColor(vm.COLOR_WHITE)
    Dim icn As VMElement = vm.VIcon("").SetText("mdi-close")
    btn1.AddElement(icn)
    tbl1.AddElement(btn1)
    '
    Dim tt As VMElement = vm.VToolbarTitle("").SetText("Filter Results").SetTextColor(vm.COLOR_white)
    tbl1.AddElement(tt)
    card3.AddElement(tbl1)
    '
    Dim c3t1 As VMElement = vm.VCardText("")
    Dim c3t2 As VMElement = vm.VCardText("")
    '
    Dim h2 As VMElement = vm.H2("").AddClass("title mb-2").SetText("Choose amenities")
    c3t1.AddElement(h2)
    '
    Dim cg4 As VMElement = vm.VChipGroup("").SetVModel("amenities").SetAttrSingle("column", True).SetAttrSingle("multiple", True)
    Dim amenities As List = vm.NewList1(Array As Int(1, 4))
    cg4.SetData("amenities", amenities)
    cg4.AddElement1("v-chip", "", "Elevator", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg4.AddElement1("v-chip", "", "Washer", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg4.AddElement1("v-chip", "", "Fireplace", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg4.AddElement1("v-chip", "", "Wheelchair", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg4.AddElement1("v-chip", "", "Dogs ok", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg4.AddElement1("v-chip", "", "Cats ok", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    c3t1.AddElement(cg4)
   
    card3.AddElement(c3t1)
    '
    Dim h2a As VMElement = vm.H2("").AddClass("title mb-2").SetText("Choose neighborhoods")
    c3t2.AddElement(h2a)
   
    Dim cg5 As VMElement = vm.VChipGroup("").SetVModel("neighborhoods").SetAttrSingle("column", True).SetAttrSingle("multiple", True)
    Dim neighborhoods As List = vm.NewList1(Array As Int(1))
    cg5.SetData("neighborhoods", neighborhoods)
    cg5.AddElement1("v-chip", "", "Snowy Rock Place", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg5.AddElement1("v-chip", "", "Honeylane Circle", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg5.AddElement1("v-chip", "", "Donna Drive", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg5.AddElement1("v-chip", "", "Elaine Street", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg5.AddElement1("v-chip", "", "Court Street", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    cg5.AddElement1("v-chip", "", "Kennedy Park", CreateMap("filter":True, "outlined":True), Null, Null, Null)
    c3t2.AddElement(cg5)
       
    card3.AddElement(c3t2)
😄 Hi:Mashiane:How to get click event value 😄
 

Mashiane

Expert
Licensed User
Longtime User
How to get click event value
I have checked the docs, this has a change event which receives the value. So when you initialize it, it will create a fictitious _change event. For example, if you use the name / id of cg5 the change event will be cg5_change(value as object)

For the fictitious event to be bound to the VChipGroup, one needs to add the callback function to their module.

I will update the documentation to reflect this.

Ta!

PS: Also, the VChipGroup can be bound to a vmodel, so when you execute .SetVModel("cg5selected") to it when defining it, you can get the selected value by calling .GetData("cg5selected")

See the snackbar output below when a chip item is clicked / changed

BVMChipGroupClick.gif
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to 4.34 - ShowWarnings - Part 3

1600508406030.png


Most event bindable components now have fictitious events created. These are only bound when a callback is created in the parent code module. As ShowWarnings by default is true, any unbound components will be reported in the browser console log. You can turn this off by executing .ShowWarnings = False after you initialize BANanoVM.

B4X:
vm.Initialize(Me, Main.appname)
    vm.ShowWarnings = False
    vue.ShowWarnings = False

This has been added to help debugging your app.

Ta!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to 4.34 - Part 4

Item Groups -
provides the ability to create a group of selectable items out of any component.

This is the base class for carousel and tabs

BVMItemGroups.gif

Here we create an item group of cards with a div. To show different divs when toggling, we use .SetActiveToggle. When the card is clicked, we activate toggle and depending on whether active = true / false, we show and hide the div inside the card.

B4X:
Dim ig As VMItemGroup = vm.CreateItemGroup("ig", Me)
    ig.Container.AddRows(1).AddColumns(3, 12, 4, 4, 4)
    '
    Dim item As VMItem = vm.CreateItem("", Me).SetActiveToggle
    '
    Dim card As VMCard = vm.CreateCard("itemcard", Me)
    card.SetAttrSingle(":color", "active ? 'primary' : ''")
    card.AddClass("d-flex align-center")
    card.SetDark(True)
    card.SetHeight(200)
    card.SetAttrSingle("@click", "toggle")
    '
    Dim syt As VMScrollYTransition
    syt.Initialize(vue, "", Me)
    syt.AddElement("", "div", "Active", CreateMap("v-if" :"active"), Null, Array("display-3 flex-grow-1 text-center"))
    card.SetTextAfter(syt.tostring)
    
    'add the card to the item
    item.AddComponent(card.tostring)
    '
    Dim eachItem As String = item.tostring
    ig.Container.AddComponent(1,1, eachItem)
    ig.Container.AddComponent(1,2, eachItem)
    ig.Container.AddComponent(1,3, eachItem)    
    '
    ig.AddToContainer(cont, 1, 1)
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to 4.34 - Part 5

SlideGroups
- this is like a pagination but you can put any element in it. In this example we have activated multiple.

BVMSlideGroup.gif


We create a sheet component to house our slide group. Inside the slidegroup we have slide items. We then add a button to each of the slideitems. We have created 25 slide items with buttons.

B4X:
Dim sheet As VMSheet = vm.CreateSheet("", Me).AddClass("mx-auto").SetMaxWidth("700")
    Dim sg As VMSlideGroup = vm.CreateSlideGroup("slidegroup", Me).SetMultiple(True).SetShowArrows(True)
    Dim si As VMSlideItem = vm.CreateSlideItem("", Me).SetVFor("n", "25").SetAttrSingle(":key", "n").SetActiveToggle
    '
    Dim btn  As VMElement = vm.VBtn("").AddClass("mx-2").SetAttrSingle(":input-value", "active")
    btn.SetActiveClass("purple white--text").SetAttrSIngle("depressed", True).SetAttrSingle("rounded", True)
    btn.SetAttrSingle("@click", "toggle").SetText("{{ n }}")
    '
    si.AddComponent(btn.ToString)
    sg.AddComponent(si.ToString)
    sheet.AddComponent(sg.tostring)
    sheet.AddToContainer(cont, 1, 1)


SlideGroup - Cards

In this example we add a card in each slide item. Cards can house containers. We add a row and column in each of the cards and add a transition to show an icon

BVMSlideGroup1.gif


B4X:
Dim sheet1 As VMSheet = vm.CreateSheet("", Me).SetElevation(8).AddClass("mx-auto").SetMaxWidth("800")
    Dim sg1 As VMSlideGroup = vm.CreateSlideGroup("slidegroup1", Me).SetCenterActive(True).SetShowArrows(True).SetVModel("modelx").SetData("modelx", Null)
    sg1.AddClass("pa-4")
    Dim si1 As VMSlideItem = vm.CreateSlideItem("", Me).SetVFor("n", "15").SetAttrSingle(":key", "n").SetActiveToggle
    '
    Dim vcard As VMCard = vm.CreateCard("", Me)
    vcard.SetAttrSingle(":color", "active ? 'primary' : 'grey lighten-1'")
    vcard.AddClass("ma-4").SetHeight(200).SetWidth(100).SetAttrSingle("@click", "toggle")
    vcard.Container.AddRows(1).AddColumns12
    vcard.Container.SetClassRC(1,0,"fill-height")
    vcard.Container.SetAlignRC(1,0, "center")
    vcard.Container.SetJustifyRC(1,0, "center")
    '
    Dim st As VMScaleTransition
    st.Initialize(vue, "", Me)
    st.AddElement("", "v-icon", "mdi-close-circle-outline", CreateMap("v-if":"active","color":"white","size":48), Null, Null)
    vcard.Container.AddComponent(1,1, st.ToString)
    
    si1.AddComponent(vcard.ToString)
    sg1.AddComponent(si1.ToString)
    sheet1.AddComponent(sg1.tostring)
    sheet1.AddToContainer(cont, 3, 1)
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to 4.34 - Part 6

Button / Menu after text field

One can now add a button / menu after a text field. This can be used for any other functionality that could be linked to the text.

BVMButtonAfterText.gif


B4X:
Dim mytxt As VMTextField = vm.CreateTextField("t1", Me).SetLabel("Regular").SetHint("Enter a name").SetPersistentHint(True)
Dim btnAfter As VMButton = vm.CreateButton("t1after", Me).SetFab(True).SetSmall(True).SetColor(vm.COLOR_ORANGE)
mytxt.AddButtonAfter(btnAfter)

Another example

BVMButtonAfterText1.gif


B4X:
Dim btnAfter As VMButton = vm.CreateButton("t1after", Me).SetColor(vm.COLOR_ORANGE).SetIconButton("mdi-thumb-up")

Ta
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to 4.34 - Part 6.1

Button / Menu after text field

For the menu, one defines a menu, the normal way they would, for example

B4X:
'add a menu after
    Dim menuAfter As VMMenu
    menuAfter = vm.CreateMenu("menuAfter", Me)
    menuAfter.SetIconColor("mdi-dots-vertical", vm.color_green)
    menuAfter.AddKeyValue("day", "Day")
    menuAfter.AddKeyValue("week", "Week")
    menuAfter.AddKeyValue("month", "Month")

And then use .AddMenuAfter on the text box definition like this...

B4X:
vm.CreateTextField("t2", Me).SetLabel("Solo").SetPlaceholder("Text fields").SetPrependInnerIcon("place").SetSolo(True).SetClearable(True).SetCounter(25).AddMenuAfter(menuAfter).AddToContainer(cont, 4, 1)

BVMMenuAfter.gif


These changes apply also to Combobox/Select/AutoComplete.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to 4.34 - Part 7

Creating of profile cards

1601403046295.png


The code code..

B4X:
'profile card
    Dim profileCard As VMElement = vm.VCard("profilecard")
    profileCard.setvisible(True)
    Dim cardTitle As VMElement = vm.VCardTitle("").AddStyle("top", "-40px !important")
    'avatar
    Dim avatar As VMElement = vm.VAvatar("")
    avatar.AddAttributes(CreateMap("size":"128"))
    avatar.AddStyles(CreateMap("top": "-64px", "margin-bottom": "-32px", "border-radius": "50% !important", "position": "relative"))
    avatar.AddClass("text-center mx-auto elevation-6")
    Dim img As VMElement = vm.VImg("").AddAttr("src", "./assets/sponge.png")
    avatar.AddElement(img)
    '
    cardTitle.AddElement(avatar)
    '
    profileCard.AddElement(cardTitle)
    
    Dim cardText As VMElement = vm.VCardText("profiletext").AddClass("text-center")
    Dim h6 As VMElement = vm.H6("").AddClass("mb-1 grey--text").SetText("CEO / CO-FOUNDER")
    cardText.AddElement(h6)
    Dim h4 As VMElement = vm.H4("").AddClass("font-weight-light mb-3 black--text").SetText("Anele Mbanga (Mashy)")
    cardText.AddElement(h4)
    Dim p As VMElement = vm.P("").AddClass("font-weight-light grey--text")
    p.SetText("Don't be scared of the truth because we need to restart the human foundation in truth and I love you like Kanye loves Kanye, I love Rick Owens’ bed design but the back is...")
    cardText.AddElement(p)
    Dim btn As VMElement = vm.VBtn("").AddAttr("color", "success").AddAttr("rounded", True).AddClass("mr-0").SetText("Follow")
    cardText.AddElement(btn)
    profileCard.AddElement(cardText)

Spark line cards (this uses a v-sheet component which has a sparkline inside.

1601403333278.png


The code example is like...

B4X:
'create a card with a top sheet
    Dim cardsheet As VMCard = vm.createcard("cardsheet", Me)
    cardsheet.addclass("mt-4 mx-auto")
    cardsheet.setmaxwidth("400")
    cardsheet.SetVisible(True)
    cardsheet.TopSheet.SetColor(vm.COLOR_CYAN)
    cardsheet.topsheet.setelevation(12)
    '
    Dim sl As VMSparkLine = vm.CreateSparkLine("sl", Me)
    sl.setcolor(vm.color_white)
    sl.setlinewidth("2")
    sl.setpadding("16")
    sl.addxy("12am", 200)
    sl.addxy("3am", 675)
    sl.addxy("6am", 410)
    sl.addxy("9am", 390)
    sl.addxy("12pm", 310)
    sl.addxy("3pm", 460)
    sl.addxy("6pm", 250)
    sl.addxy("9pm", 240)
    
    'add sparkline to stop sheet
    cardsheet.topsheet.AddComponent(sl.tostring)
    'add text to card
    cardsheet.Text.AddElement("", "div", "User Registration",Null,Null,Array("title font-weight-light mb-2"))
    cardsheet.Text.AddElement("", "div", "Last Campaign Performance",Null,Null,Array("subheading font-weight-light grey--text"))
    cardsheet.Text.AddDivider
    cardsheet.Text.AddElement("", "v-icon", "mdi-clock",CreateMap("small":True),Null,Array("mr-2"))
    cardsheet.Text.AddElement("", "span", "last registration 26 minutes ago",CreateMap("small":True),Null,Array("caption grey--text font-weight-light"))
 

Attachments

  • 1601403046295.png
    1601403046295.png
    57.1 KB · Views: 197

Mashiane

Expert
Licensed User
Longtime User
Finally, dynamic component creating at runtime. This means one will be able to create dynamic CMS apps at runtime hustle free.

The way VueJS works in creating components at runtime is via a process called slots. The first important phase for most of the input controls is complete.

This for now is limited to input controls.

Dynamo.jpg


This is currently sitting on a single row that is split into 2 columns. As an example, this is the code

B4X:
Sub BuildR1
    dynaR1.clear
    'disable gutters
    dynaR1.setnoGutters(False)
    'we have 6 spans per row
    dynaR1.setCols("6")
   
    dynaR1.AddSheet("divider1", "CREATING DYNAMIC CONTROLS")
    dynaR1.SetClass("pa-4 my-4")
    dynaR1.SetColor("white--text blue lighten-2")
    dynaR1.SetCol(12)
    '
    dynaR1.AddButton("btnAdd", "Add").SetColor("green").SetDark.SetIconLeft("add")
    dynaR1.AddButton("btnRemove", "Remove").SetColor("red").SetDark.SetIconLeft("remove").SetDrop
   
    dynaR1.AddComboBox("cbo1", "Combo Box").SetCacheItems(True)
    dynaR1.AddAutoComplete("autoc", "Auto Complete").SetCacheItems(True).SetSearchInput(Null)
   
    dynaR1.AddTextField("name", "Base")
    dynaR1.AddPassword("password", "Password").setClearable.setSolo.SetHint("6 to 8 characters").SetAppendIcon("visibility")
    '
    dynaR1.AddTextField("creditcard", "Credit Card").setPrependInnerIcon("credit_card").setMask("####-####-####-####").setHint("####-####-####-####")
    dynaR1.AddFileInput("file", "Images", True, True, "image/*")
    '
    dynaR1.AddNumber("count", "Number").SetToolTip("My number")
    dynaR1.AddColor("color", "My Color").SetColor("#10109e").SetPrependIcon("palette")
    '
    dynaR1.AddDate("date", "Meeting Date").SetLocale("en").SetPrependIcon("event")
    dynaR1.AddTime("time", "Meeting Time").SetPrependIcon("timer")
    '
    dynaR1.AddSelect("countries", "Countries")
    dynaR1.AddSelect("states", "States").SetMultiple
   
    dynaR1.AddTextArea("comment", "Comment", False)
    dynaR1.AddCheckBox("done", "This is done", "yes", "no").SetColor("red")
    '
    dynaR1.AddSlider("slide", "My Slider")
    dynaR1.AddSwitch("onoff", "On / Off")
    '
    dynaR1.AddImage("image1","","").SetBase("https://picsum.photos/512/300?random").SetClass("ma-2")
    dynaR1.AddImage("image2","https://picsum.photos/512/300?random","").SetClass("ma-2")
    dynaR1.AddImage("image3","https://picsum.photos/512/300?random","").SetClass("ma-2").SetAspectRatio("1.15")
    dynaR1.AddImage("image4","https://picsum.photos/512/300?random","").SetCOntains(True).SetWidth("250").SetHeight("250")
   
   
    dynaR1.onChange(Me, "trackr1")
    dynaR1.refresh
End Sub

This is to address this issue here: https://www.b4x.com/android/forum/t...able-from-database-schema-data-solved.121559/

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Version 4.34 Maintenance - Part 1

1. The VMDatePicker now comes buit in with day.js date formatting. By default the date format is YYYY-MM-DD.

These are the acceptable date formats:

1601687906401.png


For this example we have executed.

B4X:
vm = pgIndex.vm
    vue = vm.vue
    vue.DateDisplayFormat = "DD, MMM YYYY"

NB:

The save format is still YYYY-MM-DD whilst the display format in this case is DD, MMM YYYY.

BVMDateFormat.gif


Ta!
 

Attachments

  • 1601684254298.png
    1601684254298.png
    30.4 KB · Views: 190
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Datatable Date Column Formatting - Part 2

1601688012448.png


To apply formatting to data-table dates. These should be saved as YYYY-MM-DD at least.

When adding the column to the data-table, add the column, indicate that its a date column and then specify its formatting.

B4X:
dtImages.AddColumn("datetaken", "Date Taken")
    dtImages.SetColumnType("datetaken", dtImages.COLUMN_DATE)
    dtImages.SetColumnDateFormat("datetaken", "ddd, DD MMM YYYY")

The formatting specs are provided in the previous post!
 

Mashiane

Expert
Licensed User
Longtime User
Datatable Number / Money Formatting - Part 3

numeral.js has been added to ensure that numbers & money can be formatted. Based on the example above, we have updated it to reflect this:

1601692330932.png


We add the columns and the apply the formatting based on the numeral.js formatting parameters. Applying the number also right aligns the contents

B4X:
dtImages.AddColumn("lat", "Latitude")
    dtImages.AddColumn("lng", "Longitude")
    dtImages.SetColumnNumberFormat("lat", "0.00")
    dtImages.SetColumnNumberFormat("lng", "0.00")

Ta
 

Mashiane

Expert
Licensed User
Longtime User
Datatable Number / Money Formatting - Part 4

Adding Columns - we have added shortcuts for adding date / money & number fields.

AddDateColumn - add a date column with formatting (use any dayjs formats)

AddDateTimeColumnDate - add a date time column with formatting

AddNumberColumn - add a number column with formatting - all number columns are right aligned.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Runtime Components - components created at run-time - Part 1

1. Create the global VMFormBase component:

B4X:
Private dynaR1 As VMFormBase

2. Create the component and add it when defining your UX structure. As noted, this does not have any components inside it.

B4X:
'createthe form base
    dynaR1.Initialize(Me, vue, "dynaR1")
   
    'add form base to container
    dynaR1.AddToContainer(cont, 2, 1)

3. Create a method that should be called at RUNTIME to create the controls

B4X:
Sub BuildR1
    dynaR1.clear
    'disable gutters
    dynaR1.SetRowNoGutters(False)
    'we have 6 spans per row
    dynaR1.setCols("6")
.....

Here we are creating a container and we specify that it will have columns 6x2. If we set noGutters - true, it removes some padding and margins.

There are events that are fired by the components, these are click, change, update (all events), input etc.

4. Create the events

For example, the change event

B4X:
Sub dynaR1_change(val As Object)
    Dim ev As EventValue = dynaR1.GetEvent(val)
    Select Case ev.key
    Case "days"
        'click the select control change
        vm.ShowSnackBarSuccess(ev.value)
    Case "agree"
        'checkbox changed
        Dim didAgree As Object = ev.value
        If BANano.isnull(didAgree) Or BANano.IsUndefined(didAgree) Then
            vm.ShowSnackBarError("You need to agree!")
        End If
    Case "autoc", "cbo1"
        'if autocomplete changes, if combobox changes
        Dim svalue As String = BANano.ToJson(ev.value)
        vm.ShowSnackBarWarning(svalue)   
    End Select
End Sub

So when there is a change happening, find the component that fired the change, for example here, we detect changes by "days", "agree", "autoc" and "cbo1" controls.

For example, the click event

B4X:
Sub dynaR1_click(val As Object)
    Dim ev As EventValue = dynaR1.GetEvent(val)
    Select Case ev.key
    Case "btnadd"
        vm.ShowSnackBarSuccess("Add has been clicked!")
    Case "btnremove"
        vm.ShowSnackBarSuccess("Remove has been clicked!")
    Case "icon1"
        vm.ShowSnackBarSuccess("Red printer selected!")
    Case "password1"
        'we have clicked the append button of password1, toggle the password
        If ev.paramstag = "append" Then dynaR1.TogglePassword(ev.objschema)
    End Select
End Sub

When a click happens, lets detect which component fired it and then perform the action. For example, when the btnadd button is clicked, show a snackbar.

DynamicButtonClick.gif


Ok lets see how these buttons were added.

Buttons:

1601772751699.png


B4X:
dynaR1.AddButton("btnAdd", "Add").SetColor("green").SetDark.SetIconLeft("add")
    dynaR1.AddButton("btnRemove", "Remove").SetColor("red").SetDark.SetIconRight("remove")

The keys for the buttons here are btnadd and btnremove (in lowercase), so when these are clicked, on the global click event trapper, that show snackbar event is fired.
 

Mashiane

Expert
Licensed User
Longtime User
Runtime Components - components created at run-time - Part 2

Adding Textfields and Passwords

B4X:
dynaR1.AddTextField("firstname", "First Name")
    dynaR1.AddTextField("position", "Position")
dynaR1.AddTextField("name1", "Name").SetValue("Jumo")
    dynaR1.AddPassword("password1", "Password").SetValue("12345").SetHint("6 to 8 characters")

Here we add textfields and one being a password with some hint. For the password we add icons to show and hide the password. We need to detect the appendIcon click method. We will use the global click method for that.

DynamicTexts.gif


The id of the password text field is password1 so a click event will happen in it, but we will be clicking the append button.

So on the global dynaR1_click event, we get the event, then find the key of the clicked component..

B4X:
Case "password1"
        'we have clicked the append button of password1, toggle the password
        If ev.paramstag = "append" Then dynaR1.TogglePassword(ev.objschema)

So when the append icon is clicked, we toggle the eye-off and eye and change the text-field type between "text" and "password"
 
Top