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
Core 4.27 Maintenance Avaialable.

Vuetify updated to 2.3.10

Download now.

The demo code was updated to also fix a bug with selects. The selected items are retrieved from a v-model of the table.

DataTable.gif


Please note: You CANNOT use edit dialogs and this type of selection.

If you want to use edit dialogs for inline editing of the data, you need to ensure that the .SetItemKey(?) is not used on your code. Selects like this above need the item-key provided. The item-key indicates the primary key to use for each row, this is the column name to use as a primary key.

This is a Vuetify limitation.

Datatable - Inline Editing

DatatableInline.gif


By just adding these two lines on the table definition.

B4X:
dtUsers.AddEditDialog("firstname",False)
    dtUsers.AddEditDialog("lastname",False)

Ta!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to Version 4.28 - Part 1

By default a BANanoVueMaterial app comes with a drawer, a navbar, a footer and a bottom nav and these are hidden with .Hide.
If you want to show them you should execute .Show.

But what if you don't want any of these on your app?

Solution: Conditional Addition.

To ensure that these items DONT exist in your app, you will now be able to NOT add them by setting these to false.

B4X:
    vm.UsesDrawer = True
    vm.UsesNavBar = True
    vm.UsesFooter = True
    vm.UsesBottomNav = True

This should be done after initialization of your app and before vm.UX
Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to Version 4.28 - Part 2

This details some snackbar variants. See top left, top right, center, bottom left and bottom right.

SnackBarVariants.jpg


Top Left

B4X:
snack1 = vm.CreateSnackBar("snack2", Me)
    snack1.SetLabel("Shaped SnackBar")
    snack1.SetTimeout("-1")
    snack1.Hide
    snack1.SetAbsolute(True)
    snack1.SetTopLeft(True)
    snack1.SetShaped(True)
    vm.AddSnackBar(snack1)

Top Right

B4X:
snack3 = vm.CreateSnackBar("snack3", Me)
    snack3.SetLabel("Pill SnackBar")
    snack3.SetTimeout("-1")
    snack3.Hide
    snack3.SetColor(vm.COLOR_BLUEGREY)
    snack3.SetAbsolute(True)
    snack3.SetTopRight(True)
    snack3.SetRounded("pill")
    vm.AddSnackBar(snack3)

Centered

B4X:
snack4  = vm.CreateSnackBar("snack4", Me)
    snack4.SetLabel("Centered SnackBar")
    snack4.SetTimeout("-1")
    snack4.Hide
    snack4.SetColorIntensity(vm.COLOR_DEEPPURPLE, vm.INTENSITY_ACCENT4)
    snack4.SetAbsolute(True)
    snack4.SetCentered(True)
    snack4.SetElevation("24")
    vm.AddSnackBar(snack4)

Bottom Left

B4X:
snack5 = vm.CreateSnackBar("snack5", Me)
    snack5.SetLabel("Bottom Left")
    snack5.SetTimeout("-1")
    snack5.Hide
    snack5.SetColor(vm.COLOR_PRIMARY)
    snack5.SetAbsolute(True)
    snack5.SetBottomLeft(True)
    snack5.SetText1(True)
    vm.AddSnackBar(snack5)

Bottom Right

B4X:
snack6  = vm.CreateSnackBar("snack6", Me)
    snack6.SetLabel("Outlined")
    snack6.SetTimeout("-1")
    snack6.Hide
    snack6.SetColor(vm.COLOR_SUCCESS)
    snack6.SetAbsolute(True)
    snack6.SetBottomRight(True)
    snack6.SetOutlined(True)
    vm.AddSnackBar(snack6)

Showing and Hiding snackbars

These are defined as global variables and the visibility is set using the value property. We have defined a v-model for that!

B4X:
Sub ShowSnacks
    snack1.Show
    snack3.Show
    snack4.Show
    snack5.Show
    snack6.Show
End Sub

Sub HideSnacks
    snack1.hide
    snack3.hide
    snack4.hide
    snack5.hide
    snack6.hide
End Sub

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to Version 4.28 - Part 3

We have done some updates for the VTimeLine and VTimeLineItems. The developer has full control with containers inside cards to add whatever components they need.

TimeLines.jpg


Uses Card

B4X:
Dim tl3 As VMTimelineItem
    tl3.Initialize(vue, "tl3", Me)
    tl3.SetColor(vm.COLOR_ORANGE)
    tl3.SetFilldot(True)
    tl3.SetLeft(True)
    tl3.UsesCard = True
    tl3.CardTitle.SetColorIntensity(vm.COLOR_purple, vm.INTENSITY_lighten2)
    tl3.CardTitle.AddIcon1("icx1", "mdi-magnify", CreateMap("dark":True,"size":42,"color":"white"), Null, Array("mr-4"))
    tl3.CardTitle.AddElement("ich1", "h2", "Uses Card", Null, Null, Array("display-1 white--text font-weight-light"))
    'add 1 row with 1 column
    tl3.CardContainer.AddRows(1).AddColumns12
    Dim lblX As VMLabel = vm.CreateLabel("")
    lblX.SetParagraph.SetText(BANanoShared.LoremIpsum(1))
    tl3.CardContainer.AddComponent(1,1,lblX.ToString)
    tltimeline1.AddTimeLineItem(tl3)

Uses Card1

B4X:
Dim tl4 As VMTimelineItem
    tl4.Initialize(vue, "tl4", Me)
    tl4.SetColor(vm.COLOR_PURPLE)
    tl4.SetFilldot(True)
    tl4.SetRight(True)
    tl4.SetSmall(True)
    tl4.UsesCard = True
    tl4.CardTitle.SetColorIntensity(vm.COLOR_AMBER, vm.INTENSITY_lighten1)
    tl4.CardTitle.AddClass("justify-end")
    tl4.CardTitle.AddElement("ich2", "h2", "Uses Card 1", Null, Null, Array("display-1 mr-4 white--text font-weight-light"))
    tl4.CardTitle.AddIcon1("icx2", "mdi-home-outline", CreateMap("dark":True,"size":42,"color":"white"), Null, Null)
    'add 1 row with 1 column
    tl4.CardContainer.AddRows(1).AddColumns12
    Dim lblX As VMLabel = vm.CreateLabel("")
    lblX.SetParagraph.SetText(BANanoShared.LoremIpsum(1))
    tl4.CardContainer.AddComponent(1,1,lblX.ToString)
    tltimeline1.AddTimeLineItem(tl4)

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to Version 4.28 - Part 4

This section talks about creating dynamic components using the v-for directive.

DynamicTimeLines.jpg


1. Create a JSON array of the items we want to loop. These should be saved to the app state.

B4X:
Dim tlines As List = vue.NewList
    tlines.Add(CreateMap("color": "red lighten-2", "icon": "mdi-star","title":"AD ASTRA","year":"2019"))
    tlines.add(CreateMap("color": "purple darken-1", "icon": "mdi-book-variant","title":"WEST WORLD","year":"1973"))
    tlines.add(CreateMap("color": "green lighten-1", "icon": "mdi-airballoon","title":"ANNIHILATION","year":"2018"))
    tlines.add(CreateMap("color": "indigo", "icon": "mdi-buffer","title":"CONTACT","year":"1997"))
    'save the items to the state
    vue.Setdata("tlines", tlines)

The state name is "tlines"

2. Create the structure of the timeline, it will have a card.

B4X:
'create the timeline
    Dim txtline As VMTimeline
    txtline.Initialize(vue, "txline", Me)
    'align on topp
    txtline.SetAlignTop(True)
    'create a single timeline item that uses a v-for loop
    Dim titem As VMTimelineItem
    titem.Initialize(vue, "", Me)
    'for each item in tlines state
    titem.Setvfor("(item, i)", "tlines")
    'the key is the index
    titem.SetKey("i")
    'get the color of each item
    titem.Bind(":color", "item.color")
    'get the icon for each item
    titem.Bind(":icon", "item.icon")
    'fill the dot
    titem.SetFillDot(True)
    'each timeline item uses a card
    titem.UsesCard = True
    'the complete color of the card
    titem.Card.Bind(":color", "item.color")
    'make it dark
    titem.Card.SetDark(True)
    'define the title
    titem.CardTitle.AddClass("title")
    'use the title per each of the items
    titem.CardTitle.SetText("{{ item.title }}")
    'the background color of the card text should be white
    titem.CardText.SetColor(vm.COLOR_WHITE)
    ' the color of the text should be prmary
    titem.CardText.SetTextColor(vm.COLOR_PRIMARY)
    'indicate the year of release
    titem.CardText.SetText($"<p>The movie was released in {{ item.year }})</p>"$)
    'use some lorem ipsum
    titem.CardText.SetText($"<p>${BANanoShared.LoremIpsum(1)}</p>"$)
    'add a button
    Dim btn As VMButton = vm.CreateButton("btnx", Me)
    btn.Bind(":color", "item.color")
    btn.Bind(":key", "item.title")
    btn.Bind(":id", "item.title")
    btn.AddClass("mx-0")
    btn.SetOutlined(True)
    btn.SetLabel("Watch")
    titem.CardText.SetText(btn.ToString)
       
    'add the item to the timeline
    txtline.AddTimeLineItem(titem)
    '
    txtline.AddToContainer(cont,3,1)

A timeline will be created, each timeline item will be created by each item from the saved statelist. We then add this to the container.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to Version 4.28 - Part 5

Trapping Events if dynamic created buttons


We can also trap the click events of the watch buttons.

Remember, we defined each button to have an id of "btnx"

B4X:
Dim btn As VMButton = vm.CreateButton("btnx", Me)

This creates a button with an id of "btnx" and also registeres an event for the button with @click="btnx"

But we want to link the id to each timelineitem title, so we will use a binding.

So we execute

B4X:
btn.Bind(":id", "item.title")

TrapTimeLineEvents.gif


So this changes the id for each button however still linking it to the @click=btnx event

Here is the callback...

B4X:
Sub btnx_click(e As BANanoEvent)
    'get the id of the selected button
    Dim btnID As String = vm.GetIDFromEvent(e)
    'show the button id
    vm.ShowSnackBarSuccess(btnID)
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to Version 4.28 - Part 6

Realtime Logging i.e. creating components at runtime using v-for


The process of realtime / dynamic components involves using v-for loops to generate elements. In this example, this is available under Examples in the demo, we demonstrate how one can have a real time log taking place every 5 seconds. What this does is to create an alert that sits inside a timeline component.

When the app starts, we have 1 log recorded, and then every 5 seconds we push updates to a list of logs and then it refreshes the timeline component of our page and in essence creating dynamic components at runtime


1. We have a list of colors and icons

B4X:
Private ICONS As Map
    Private COLORS As List

2. We initialize some stuff that we will later use. These are colors and icons.

B4X:
'define states
    vm.SetData("interval", Null)
    COLORS = vue.CreateB4xList(Array("info", "warning", "error", "success"))
    ICONS = CreateMap("info": "mdi-information", "warning": "mdi-alert", "error": "mdi-alert-circle", "success": "mdi-check-circle")
    vue.SetMethod(Me, "start")
    vue.SetMethod(Me, "stop")
    '
    Dim mashlogs As List = vue.NewList
    Dim logx As Map = CreateMap("id":1, "color":"info")
    Dim sicon As String = ICONS.get("info")
    logx.Put("icon", sicon)
    mashlogs.Add(logx)
    vue.SetData("mashlogs", mashlogs)
    vue.SetData("nonce", 2)

This is 4 colors and 4 icons to use. We add a single log for the app. There is a start and a stop methods that we register. When the button to start is clicked, we create a new log and then add it to a list that we have saved in a state.

Start

This fires the addevent method after each 5 seconds, we save the interval returned to a state.

B4X:
'start the logs
Sub start
    'add an event every 3 seconds
    Dim interval As Object = BANanoShared.SetInterval(Me, "addevent", 5000, Null)
    'save interval to state
    vue.setdata("interval", interval)
End Sub

Stop

When stop is clicked, we clear the interval and update the interval state

B4X:
stops the logs
Sub stop
    'get the current interval
    Dim interval As Object = vue.getdata("interval")
    'clear interval
    BANanoShared.clearinterval(interval)
    'update state
    vue.setdata("interval", Null)
End Sub

Getting a random color: this is executed inside the genAlert method with generates a new alert

From the list of colors we get a random color

B4X:
'get a random color from the colors list
Sub genColor As String
    'get a randol color
    Dim rcolor As String = BANanoShared.RandListValue(COLORS)
    Return rcolor
End Sub

Getting the icon linked to the color

When the color is obtained, we get the linked icon with

B4X:
'get an icon linked to the color
Sub genIcon(color As String) As String
    Dim sicon As String = ICONS.get(color)
    Return sicon
End Sub

Creating an alert for the log

Then these 2 are used inside the genAlert

So every 5 seconds, we fire addEvent, wich fires genAlert

B4X:
'build a random alert
Sub genAlert As Map
    'get a random color
    Dim color As String = genColor
    'get an icon based on that color
    Dim icon As String = genIcon(color)
    'create an alert object
    Dim res As Map = CreateMap()
    res.put("color", color)
    res.put("icon", icon)
    Return res
End Sub

and addevent is

B4X:
'add an event
Sub addevent()
    'get a random alert
    Dim alert As Map = genAlert
    Dim color As String = alert.get("color")
    'get the first item in the logs
    Dim firstitem As Map = vue.ListFirstItem("mashlogs")
    'find out if these colors match to last, if so generate another color
    Dim previousColor As String = firstitem.get("color")
    'ensure that colors are unique
    Do While previousColor = color
    '    'generate another color
        color = genColor
    Loop
    'add item at the beginning of the list
    Dim nonce As Int = vue.StateIncrement("nonce")
   
    alert.Put("id", nonce)
    vue.ListUnshift("mashlogs", alert)
    '
    If (nonce > 6) Then
        'array size
        vue.ListPop("mashlogs")
    End If
End Sub

What about the UX?

B4X:
'time logging
    Dim cardLog As VMCard
    cardLog.Initialize(vue,"rtlog", Me)
    cardLog.AddClass("mx-auto").SetMaxWidth("600")
    cardLog.Title.SetColor(vm.COLOR_BLUEGREY)
    cardLog.Title.SetTextColor(vm.COLOR_WHITE)
    cardLog.Title.AddElement("", "span", "Logs", Null, Null, Array("title"))
    cardLog.Title.AddSpacer
    Dim btnReadLog As VMButton
    btnReadLog.Initialize(vue, "btnReadLog", Me)
    btnReadLog.SetLabel("Realtime Logging")
    btnReadLog.SetDark(True)
    btnReadLog.SetDepressed(True)
    btnReadLog.Bind(":outlined", "interval == null")
    btnReadLog.Bind(":color", "interval == null ? 'white' : 'primary'")
    cardLog.Title.AddButton(btnReadLog)
    '
    cardLog.Text.AddClass("py-0")
    '
    'create a timeline
    Dim tx As VMTimeline
    tx.Initialize(vue, "tx", Me).SetDense(True)
    '
    'create slide transition
    Dim stran As VMSlideXReverseTransition
    stran.Initialize(vue, "stran", Me).SetGroup(True).SetHideOnLeave(True)
    'add time line item to transition
    Dim txi As VMTimelineItem
    txi.Initialize(vue, "", Me)
    txi.SetVFor("item", "mashlogs")
    txi.Bind(":key", "item.id")
    txi.Bind(":color", "item.color")
    txi.SetSmall(True)
    txi.SetFillDot(True)
    'add alert to item
    Dim alx As VMAlert
    alx.Initialize(vue, "", Me)
    alx.RemoveVModel
    alx.Bind(":color", "item.color")
    alx.Bind(":icon", "item.icon")
    alx.Bind(":value", "true")
    alx.SetTextColor(vm.COLOR_WHITE)
    alx.AddContent($"<h1>{{ item.id }}</h1>"$)
    alx.AddContent($"<p>${BANanoShared.LoremIpsum(1)}</p>"$)
    txi.SetText(alx.tostring)
   
    'add item to transition
    stran.SetText(txi.ToString)
    'add transition to timeline
    tx.SetText(stran.tostring)
   
    'add timeline to text
    cardLog.Text.SetText(tx.tostring)
    'add card to container
    cardLog.AddToContainer(cont,1,1)

We have created a card. Added a title and a button to its CardTitle. We then add a timeline in its text area. Inside the timeline we have a transition component (for animation) where we add the timeline item inside. Because the items / logs to be displayed are sourced from a list, we need to bind each log to a list item. We use bind to do that.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to Version 4.28 - Part 7

Combobox/AutoComplete/Select Variants


Now you are able to add any type of item to the combo/autocomplete/select. With the use of list items, we are adding colored icons, avatars, title and sub titles.

ComboBoxVariants.gif


B4X:
'select with list items
    Dim selList As VMSelect = vm.CreateSelect("selList", Me)
    selList.setvmodel("mylistx")
    selList.SetLabel("List Items")
    selList.AddListItem("myfiles", "", "mdi-folder", "red", "My Files", "", "")
    selList.AddListItem("account", "", "mdi-account-multiple", "blue", "Shared with Me", "","")
    selList.AddListItem("starred", "", "mdi-star", "yellow", "Starred", "", "")
    selList.AddListItem("person1", "./assets/1.png", "", "", "Person 1", "", "")
    selList.AddListItem("person2", "./assets/2.png", "", "", "Person 2", "", "")
    selList.AddListItem("person3", "./assets/1.png", "", "", "Jane Smith", "Logged In", "")
    selList.AddListItem("sa", "", "",  "", "Sandra Adams", "Chief Executive Officer", "[email protected]")
    selList.AddListItem("person4", "./assets/2.png", "", "", "Anele Mbanga", "", "")
    selList.SetOnChange(Me, "sellist_change")
    selList.AddToContainer(cont, 14,  1)

Adding items at runtime

1. Create the autocomplete/combo/select and add at least 1 item. Add this to the container you want it to be.

B4X:
Dim selList1 As VMSelect = vm.CreateSelect("selList1", Me)
    selList1.setvmodel("mylistx")
    selList1.SetLabel("Add at runtime")
    'add at least 1 item
    selList1.AddItem("dummy", "dummy")
    selList1.AddToContainer(cont, 15,  1)

2. During runtime, clear the combo and then add the items and update it. You are adding key value pairs

B4X:
selList1.Clear
    selList1.AddItem("markhams", "Khanyiso")
    selList1.AddItem("siba", "Usibabale")
    selList1.AddItem("orio", "Olothando")
    selList1.AddItem("ernesto", "Esona")
    selList1.AddItem("gift", "Sisipho")
    selList1.Update

1598745908799.png


Ta!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to Version 4.28 - Part 8

Calendar Functionality


Here one is able to add categories and events

BVMCalendar.gif


1. First we need to add the categories. These should have colors.

B4X:
'add some events
    cal.ClearEvents
    cal.ClearCategories
    cal.AddCategory("b4a", vm.COLOR_ORANGE)
    cal.AddCategory("b4i", vm.COLOR_PINK)
    cal.AddCategory("b4j", vm.COLOR_CYAN)

2. Then we add events linked to the categories. The category names are CaseSensiTive.

B4X:
Dim sNow As String = BANanoShared.DateNow & "T10:00"
    Dim sNow1 As String = BANanoShared.DateNow & "T12:00"
    Dim sNow2 As String = BANanoShared.DateNow & "T13:05"
    '
    cal.AddEvent("1", "b4a", "Develop B4A App", sNow, sNow, False)
    cal.AddEvent("2", "b4i", "Develop B4i App", sNow1, sNow1, False)
    cal.AddEvent("3", "b4j", "Develop B4J App", sNow2, sNow2, True)
    cal.Update

These events can be cleared and added at runtime also.

Ta!

PS: How the calendar control is build and events fired is detailed in the modCalendar module.

We can then click an event and get its details. One can then build a model according to their likes to CRUD the details.

BVMCalendarEventClick.gif


Event Click

B4X:
'an event is clicked
Sub cal_clickevent(obj As Map)
    Dim sevent As String = BANano.tojson(obj)
    vm.ShowSnackBar(sevent)
End Sub
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates to Version 4.28 - Part 9

TreeView Updates


To show checkboxes to a treeview one needs to call

B4X:
tv.SetSelectable(True)

This fires the oninput event

B4X:
'selected
Sub tv1_oninput(items As List)
    Dim sCode As String = BANano.tojson(items)
    vm.showsnackbar("Selected: " & sCode)
End Sub

What if I want to detect item click event without checkboxes?

To do that, fire..

B4X:
tv2.SetActivatable(True)

Example code

B4X:
Dim tv2 As VMTreeView = vm.CreateTreeView("tv2", Me)
    tv2.SetActivatable(True)
    tv2.AddItem("", "1", "Applications", "", Null, False)
    tv2.AddItem("1", "2", "Calendar", "", Null, False)
    tv2.AddItem("1", "3", "Chrome", "", Null, False)
    tv2.AddItem("1", "4", "Webstorm", "", Null, False)
    tv2.AddItem("", "5", "Documents", "", Null, False)
    tv2.AddItem("5", "6", "vuetify", "", Null, False)
    tv2.AddItem("6", "7", "src", "", Null, False)
    tv2.AddItem("7", "8", "index.html", "", "html", False)
    tv2.AddItem("7", "9", "bootstrap.ts", "", "ts", False)
    tv2.AddItem("7", "15", "logo.png", "", "png", False)
    tv2.AddItem("7", "16", ".gitignore.txt", "", "txt", False)
    tv2.AddItem("7", "17", "babel.config.js", "", "js", False)
    tv2.AddItem("7", "18", "package.json", "", "json", False)
    tv2.AddItem("5", "10", "material2 : ", "", Null, False)
    tv2.AddItem("10", "11", "src : ", "", Null, False)
    tv2.AddItem("11", "12", "v-btn.ts", "", "ts", False)
    tv2.AddItem("11", "13", "v-card.ts", "", "ts", False)
    tv2.AddItem("11", "14", "v-window.ts", "", "ts", False)
    tv2.AddToContainer(cont, 6, 1)

BVMTreeView.gif


This fires this event

B4X:
'active
Sub tv2_updateactive(items As List)
    Dim sCode As String = BANano.tojson(items)
    vm.showsnackbar("Active: " & sCode)
End Sub

Both events return the id of the selected items / checked items in an array!

TA!

PS: To add items at runtime for a treeview

1. Run .Clear
2. Run .AddItem
3. Run .Update
 

Mashiane

Expert
Licensed User
Longtime User
Creating multiple pages using Components & Routers i.e the best way to create multiple paged apps

On 4. Examples\24. TwoPages

NB: This will increase the speed of your app tremendously!!!

What to note those is that the state bindings for the components inside the component SHOULD BE done inside the component.

We previously explored how components and routers work in this thread.
We have just explored how to create generic components by learning and seeing from the API and then creating such components

In this example, we consolidate both knowledge to create an app with 2 pages using components and routers. This is the best approach to create a webapp with mutliple pages.

By the way, the issue of routes and pages is now really new with BANanoVueMaterial, as it was used when developing the online store here.

BVMTwoPages.gif


In this example we create 2 code modules. In each we create a VMContainer and in each container we add a H1.

NB: We link the v-show directivate for the container and its rows and columns as by default each element created with BANanoVueMaterial is assigned a v-show directive to control visibility. This is not needed if you create elements using the VMElement with .NewElement method.

The home page

B4X:
'build the page
Sub Initialize
    vm = pgIndex.vm
    vue = pgIndex.vue
    
    'initialize the component,  the name of the component is 'home'
    home.Initialize(vue, "home", "/", Me)
    
    'create a container
    Dim homecont As VMContainer
    homecont.Initialize(vue, "homecont", Me)
    homecont.AddRows(1).AddColumns12
    'IMPORTANT: bind v-show directive of the container to component
    home.ShowElement(homecont.ID)
    home.ShowElement("homecontr1")
    home.ShowElement("homecontr1c1")
    'build the HTLML content of the page
    Dim homeh1 As VMLabel = vm.CreateH1("").SetText("This is the home page...")
    homeh1.AddToContainer(homecont, 1, 1)
    
    'there should be 1 root element
    home.AddContainer(homecont)
    
    'add the component as a router/page
    vm.AddRoute(home)
End Sub

The about page

B4X:
'build the page
Sub Initialize
    vm = pgIndex.vm
    vue = pgIndex.vue
    'initialize the component, the name of the component is 'about'
    about.Initialize(vue, "about", "/about", Me)
    
    'create a container
    Dim aboutcont As VMContainer
    aboutcont.Initialize(vue, "aboutcont", Me).Show
    aboutcont.AddRows(1).AddColumns12
    'IMPORTANT: bind v-show directive of the container to component
    about.ShowElement(aboutcont.ID)
    about.ShowElement("aboutcontr1")
    about.ShowElement("aboutcontr1c1")
    'build the HTLML content of the page
    Dim abouth1 As VMLabel = vm.CreateH1("").SetText("This is the about page...")
    abouth1.AddToContainer(aboutcont, 1, 1)
    
    'there should be 1 root element
    about.AddContainer(aboutcont)
    
    'add the component as a router/page
    vm.AddRoute(about)
End Sub

Ta
 

Mashiane

Expert
Licensed User
Longtime User
We are building a Chat app using BANanoVueMaterial + (FireBase) BANanoFireStoreDB

 
Top