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

Mashiane · Aug 21, 2020

Important Announcement on Core 4.27

Documentation Complete: UI Components

It is with pleasure to have finished the demo inline documentation for the UI components.

Test it out now!

Mashiane · Aug 23, 2020

We have launched a Telegram Channel, go on, subscribe now here

Mashiane · Aug 25, 2020

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.

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

By just adding these two lines on the table definition.

B4X:

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

Ta!

Mashiane · Aug 26, 2020

Core 4.27 Maintenance available. This deals with dynamic tables.

This is discussed on this thread, https://www.b4x.com/android/forum/t...-from-database-schema-data.121559/post-760243

Ta!

Mashiane · Aug 28, 2020

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 · Aug 28, 2020

Upcoming Updates to Version 4.28 - Part 2

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

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 · Aug 28, 2020

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.

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 · Aug 28, 2020

Upcoming Updates to Version 4.28 - Part 4

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

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.

Mashiane · Aug 28, 2020

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")

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 · Aug 29, 2020

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 · Aug 30, 2020

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.

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

Ta!

Mashiane · Aug 30, 2020

Upcoming Updates to Version 4.28 - Part 8

Calendar Functionality

Here one is able to add categories and events

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.

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

Mashiane · Aug 31, 2020

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)

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 · Aug 31, 2020

Version 4.28 Now available

Please note that both the demo, external libraries, library folders have been updated.

Mashiane · Sep 1, 2020

Version 4.29 available. This fixes a bug with the designer when converting schemas to Data-tables.

Download here now

Mashiane · Sep 3, 2020

BANanoVueMaterial - Learn By Coding What You See

Code without designers snippets from Vuetify Website.

Mashiane · Sep 3, 2020

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.

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 · Sep 7, 2020

Version 4.32 is now available for download

GitHub - Mashiane/BANanoVuetify: Write Vuetify Apps in B4X, get your javascript, css and html in return

Write Vuetify Apps in B4X, get your javascript, css and html in return - Mashiane/BANanoVuetify

github.com

Mashiane · Sep 8, 2020

We are building a Chat app using BANanoVueMaterial + (FireBase) BANanoFireStoreDB

[BANanoFireStoreDB] Creating a Chat application

Ola Download We are attempting to create a chat application using BANanoFireStoreDB and BANanoVueMaterial. What you will need: 1. BANanoFireStoreDB 2. BANanoVueMaterial What will you learn? 1. Using BANanoPromise 2. Using Firebase FireStore (CRUD & Filtering records) 3. Using Firebase...

www.b4x.com

Mashiane · Sep 10, 2020

Finally!

The recommended way to implement rules for Vuetify in BANano. Phew, this has been a thorny issue for me.

Great stuff!; https://www.b4x.com/android/forum/t...reating-a-chat-application.122048/post-763243

Library updated to Version 4.33 - just little maintenance

Ta!

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads