B4J Library [BANanoVuetifyAD] Create VueJS+Vuetify based Websites / WebApps using the Abstract Designer

Mashiane

Expert
Licensed User
Thoughts on moving towards Alpha - Designing Grids

One is able to define a grid attributes via the abstract designer.

Here we want a v-container to have 5 rows with 3 columns. Each column should span 4 spaces each.

On that parent grid we also want another v-container. The child container should be 2 rows with 2 columns each. Each column should be 6 spans on medium and up

Parent Container

1605171322551.png


Child Container

1605171276290.png


Controller Code


B4X:
Sub Initialize
    vuetify = pgIndex.vuetify 
    home.Initialize(Me, name, "/")
    '
    BANano.LoadLayout("#placeholder", "vhomecontainer")
    home.BindVueElement(vhomecontainer)
    
    vhomecontainer.Matrix(3, 2).LoadLayout("vhomer3c2")
    home.BindVueElement(homer3c2)
    homer3c2.Matrix(1, 1).AddClass("text-center green")
    homer3c2.Matrix(1, 2).AddClass("text-center orange")
    '
    homer3c2.Matrix(2, 1).AddClass("text-center blue")
    homer3c2.Matrix(2, 2).AddClass("text-center yellow")
    
    vhomecontainer.Matrix(1, 1).AddClass("text-center success")
    vhomecontainer.Matrix(1, 2).AddClass("text-center warning")
    vhomecontainer.Matrix(1, 3).AddClass("text-center error")
    home.AppendPlaceHolder
    
    vuetify.AddRoute(home)
End Sub

Output

BANanoGrid.jpg
 

Mashiane

Expert
Licensed User
Thoughts on moving towards Alpha - Designing Lists




With the loadlayoutarray, we are able to re-use lists that we create. We have designed our list structure which we can use anywhere with the abstract designer.

1605210486169.png


With this list, one is able to:

1. trap the left action click event.
2. trap the list item click event
3. trap the right action click event.

To demonstrate this, we have created an ugly list and when one clicks the icons on the left and right, events are fired. This also happens when one clicks anywhere on the list item.

1605210568667.png


Reproduction:

We create the items we will load:

B4X:
Sub PageLinks
    Dim pages As List = vuetify.NewList
    pages.Add(CreateMap("icon": "mdi-inbox-arrow-down", "iconright": "mdi-inbox-arrow-down", "iconleft": "mdi-inbox-arrow-down", "title":"Inbox", "subtitle":"Incoming emails","avatar":"./assets/1.jpg"))
    pages.Add(CreateMap("icon": "mdi-send", "iconright": "mdi-send", "iconleft": "mdi-send", "title": "Sent","subtitle":"Sent emails","avatar":"./assets/2.jpg"))
    pages.Add(CreateMap("icon": "mdi-delete", "iconright": "mdi-delete", "iconleft": "mdi-delete", "title": "Trash","subtitle":"Deleted emails","avatar":"./assets/3.jpg"))
    pages.Add(CreateMap("icon": "mdi-alert-octagon", "iconright": "mdi-alert-octagon", "iconleft": "mdi-alert-octagon", "title": "Spam","subtitle":"Spam emails","avatar":"./assets/4.jpg"))
    vuetify.SetData("pages", pages)
End Sub
We have written a helper function to build the list from the template. This we call with:

B4X:
'add a list to the navdrawer
    Dim vlist As VueElement = NewList("vnavigationdrawer", "navlist", Null)
    vlist.Shaped = True
    'add a template to the drawer list
    Dim vlistitem As VueElement = NewListItem("navlist", "navlistitem", "page", "iconleft", "pages", 0, CreateMap("inset":True, "avatarclass":"mr-2", "iconclass":"mr-2"))
    vuetify.BindVueElement(vlistitem)
The helper functions. These load layouts and then change their properties just before serving the page.

B4X:
Sub NewList(parentid As String, refID As String, props As Map) As VueElement
    parentid = parentid.tolowercase
    refID = refID.tolowercase
    'get the parent
    Dim Ret As Long
    Dim AllViews As Map
 
    Ret = BANano.LoadLayoutArray($"#${parentid}"$, "vlist", True)
    ' ret returns a unique number you can use to get all views
    AllViews = BANano.GetAllViewsFromLayoutArray(Me, "vlist", Ret)
    '
    Dim vlist As VueElement = AllViews.Get("vlist")
    '
    If BANano.IsNull(props) = False Then
        For Each k As String In props.Keys
            Dim v As String = props.Get(k)
            vlist.AddAttr(k, v)
        Next
    End If
    vlist.AddAttr("ref", refID)
    vlist.AddAttr("id", refID)
    vlist.Element = BANano.GetElement($"#${refID}"$)
    Return vlist
End Sub
'
Sub NewListItem(parentID As String, refid As String, itemName As String, itemKey As String, datasource As String, numLines As Int, props As Map) As VueElement
    parentID = parentID.tolowercase
    refid = refid.tolowercase
    itemName = itemName.tolowercase
    'get the parent
    Dim Ret As Long
    Dim AllViews As Map
 
    Ret = BANano.LoadLayoutArray($"#${parentID}"$, "vlistitemtemplate", True)
    ' ret returns a unique number you can use to get all views
    AllViews = BANano.GetAllViewsFromLayoutArray(Me, "vlistitemtemplate", Ret)
    '
    Dim vtemplate As VueElement = AllViews.Get("vtemplate")
    Dim vlistitem As VueElement = AllViews.Get("vlistitem")
    '
    Dim vlistitemactionleft As VueElement = AllViews.Get("vlistitemactionleft")
    Dim vlistitemactionlefticon As VueElement = AllViews.Get("vlistitemactionlefticon")
    '
    Dim vlistitemavatar As VueElement = AllViews.Get("vlistitemavatar")
    Dim vlistitemavatarimg As VueElement = AllViews.get("vlistitemavatarimg")
    '
    Dim vlistitemcontent As VueElement = AllViews.Get("vlistitemcontent")
    Dim vlistitemtitle As VueElement = AllViews.get("vlistitemtitle")
    Dim vlistitemsubtitle As VueElement = AllViews.Get("vlistitemsubtitle")
    Dim vlistitemsubtitle1 As VueElement = AllViews.Get("vlistitemsubtitle1")
  
    Dim vlistitemicon As VueElement = AllViews.Get("vlistitemicon")
    Dim vlistitemiconicon As VueElement = AllViews.Get("vlistitemiconicon")
  
    Dim vlistitemactionrighticon As VueElement = AllViews.Get("vlistitemactionrighticon")
    Dim vlistitemactionright As VueElement = AllViews.Get("vlistitemactionright")
      
    Dim vlistitemdivider As VueElement = AllViews.get("vlistitemdivider")
        '
    vtemplate.AddAttr("ref", refid)
    vtemplate.AddAttr("id", refid)
    vtemplate.AddAttr("v-for", $"(${itemName}, idx) in ${datasource}"$)
    vtemplate.AddAttr(":key", itemKey)
  
    vlistitem.AddAttr("ref", $"${refid}item"$)
    vlistitem.AddAttr("id", $"${refid}item"$)
    '
    Dim smethod As String = $"${parentID}_click"$
    If BANano.SubExists(Me, smethod) Then
        Dim clickKey As String = $"${itemName}.${itemKey}"$
        Dim clickSub As String = $"${smethod}(${clickKey})"$
        vlistitem.AddAttr("v-on:click", clickSub)
        'arguments for the event
        Dim e As Object 'ignore
        Dim cb As BANanoObject = BANano.CallBack(Me, smethod, Array(e))
        vlistitem.SetCallBack(smethod, cb)
    End If
    '
    Dim srightmethod As String = $"${parentID}_rightclick"$
    If BANano.SubExists(Me, srightmethod) Then
        Dim clickKey As String = $"${itemName}.${itemKey}"$
        Dim clickSub As String = $"${srightmethod}(${clickKey})"$
        vlistitemactionright.AddAttr("v-on:click.stop", clickSub)
        'arguments for the event
        Dim e As Object 'ignore
        Dim cbr As BANanoObject = BANano.CallBack(Me, srightmethod, Array(e))
        vlistitem.SetCallBack(srightmethod, cbr)
    End If
    '
    Dim sleftmethod As String = $"${parentID}_leftclick"$
    If BANano.SubExists(Me, sleftmethod) Then
        Dim clickKey As String = $"${itemName}.${itemKey}"$
        Dim clickSub As String = $"${sleftmethod}(${clickKey})"$
        vlistitemactionleft.AddAttr("v-on:click.stop", clickSub)
        'arguments for the event
        Dim e As Object 'ignore
        Dim cbl As BANanoObject = BANano.CallBack(Me, sleftmethod, Array(e))
        vlistitem.SetCallBack(sleftmethod, cbl)
    End If
    '
    Select Case numLines
    Case 2
        vlistitem.AddAttr("two-line", True)
    Case 3      
        vlistitem.AddAttr("three-line", True)
    End Select
    '
    vlistitemdivider.AddAttr(":key",$"`divider-${itemKey}`"$)
  
    'default field names
    Dim savatar As String = "avatar"
    Dim sicon As String = "icon"
    Dim ssubtitle As String = "subtitle"
    Dim ssubtitle1 As String = "subtitle1"
    Dim stitle As String = "title"
    Dim siconright As String = "iconright"
    Dim siconleft As String = "iconleft"
    Dim siconleftclass As String = ""
    Dim savatarclass As String = ""
    Dim siconclass As String = ""
    Dim siconcolor As String = "iconcolor"
    Dim siconrightclass As String = ""
  
    'read specified
    If BANano.IsNull(props) Or BANano.IsUndefined(props) Then
    Else  
        If props.ContainsKey("iconleft") Then siconleft = props.Get("iconleft")
        If props.ContainsKey("iconleftclass") Then siconleftclass = props.Get("iconleftclass")
        '
        If props.ContainsKey("avatar") Then    savatar = props.Get("avatar")
        If props.ContainsKey("avatarclass") Then savatarclass = props.Get("avatarclass")
        '
        If props.ContainsKey("icon") Then sicon = props.Get("icon")
        If props.ContainsKey("iconclass") Then siconclass = props.Get("iconclass")
        If props.ContainsKey("iconcolor") Then siconcolor = props.Get("iconcolor")
        '
        If props.ContainsKey("title") Then stitle = props.Get("title")
        If props.ContainsKey("subtitle") Then ssubtitle = props.Get("subtitle")
        If props.ContainsKey("subtitle1") Then ssubtitle1 = props.Get("subtitle1")
        '
        If props.ContainsKey("iconright") Then siconright = props.Get("iconright")
        If props.ContainsKey("iconrightclass") Then siconrightclass = props.Get("iconrightclass")
        '
        If props.ContainsKey("inset") Then vlistitemdivider.AddAttr("inset", True)
    End If
    '    left icon
    vlistitemactionleft.AddAttr("v-if", $"${itemName}.${siconleft}"$)
    vlistitemactionlefticon.AddAttr("v-if", $"${itemName}.${siconleft}"$)
    vlistitemactionlefticon.AddClass(siconleftclass)
    vlistitemactionlefticon.AddAttr("v-text", $"${itemName}.${siconleft}"$)
  
    '    turn visibility based on fields
    vlistitemavatar.AddAttr("v-if", $"${itemName}.${savatar}"$)
    vlistitemavatar.AddClass(savatarclass)
    vlistitemavatarimg.AddAttr(":src", $"${itemName}.${savatar}"$)
    vlistitemavatarimg.AddAttr("v-if", $"${itemName}.${savatar}"$)
'    icon
    Dim vlistitemicon As VueElement = AllViews.Get("vlistitemicon")
    Dim vlistitemiconicon As VueElement = AllViews.Get("vlistitemiconicon")
  
    vlistitemicon.AddAttr("v-if", $"${itemName}.${sicon}"$)
    vlistitemiconicon.AddAttr("v-if", $"${itemName}.${sicon}"$)
    vlistitemiconicon.AddClass(siconclass)
    vlistitemiconicon.AddAttr(":color", $"${itemName}.${siconcolor}"$)
    vlistitemiconicon.AddAttr("v-text", $"${itemName}.${sicon}"$)
'  
    vlistitemtitle.AddAttr("v-if", $"${itemName}.${stitle}"$)
    vlistitemtitle.AddAttr("v-text", $"${itemName}.${stitle}"$)
  
    vlistitemsubtitle.AddAttr("v-if", $"${itemName}.${ssubtitle}"$)
    vlistitemsubtitle.AddAttr("v-text", $"${itemName}.${ssubtitle}"$)
  
    vlistitemsubtitle1.AddAttr("v-if", $"${itemName}.${ssubtitle1}"$)
    vlistitemsubtitle1.AddAttr("v-text", $"${itemName}.${ssubtitle1}"$)
'  
    vlistitemactionrighticon.AddAttr("v-if", $"${itemName}.${siconright}"$)
    vlistitemactionright.AddAttr("v-if", $"${itemName}.${siconright}"$)
    vlistitemactionrighticon.AddAttr("v-text", $"${itemName}.${siconright}"$)
    vlistitemactionrighticon.AddClass(siconrightclass)
    '
    Return vlistitem
End Sub
The id of the list we have created is navlist

The events we have created are:

B4X:
'this Is linkes To the list
Sub navlist_click(item As String)
    vuetify.ShowSnackBarSuccess(item)
End Sub
The left and right click events

B4X:
Sub navlist_RightClick (item As Object)
    vuetify.ShowSnackBarWarning(item)   
End Sub

Sub navlist_LeftClick (item As Object)
    vuetify.ShowSnackBarPrimary(item)
End Sub
Ta!
 
Last edited:

Lello1964

Well-Known Member
Licensed User
Thoughts on moving towards Alpha - Designing Grids

One is able to define a grid attributes via the abstract designer.

Here we want a v-container to have 5 rows with 3 columns. Each column should span 4 spaces each.

On that parent grid we also want another v-container. The child container should be 2 rows with 2 columns each. Each column should be 6 spans on medium and up

Parent Container

View attachment 102856

Child Container

View attachment 102855

Controller Code


B4X:
Sub Initialize
    vuetify = pgIndex.vuetify
    home.Initialize(Me, name, "/")
    '
    BANano.LoadLayout("#placeholder", "vhomecontainer")
    home.BindVueElement(vhomecontainer)
   
    vhomecontainer.Matrix(3, 2).LoadLayout("vhomer3c2")
    home.BindVueElement(homer3c2)
    homer3c2.Matrix(1, 1).AddClass("text-center green")
    homer3c2.Matrix(1, 2).AddClass("text-center orange")
    '
    homer3c2.Matrix(2, 1).AddClass("text-center blue")
    homer3c2.Matrix(2, 2).AddClass("text-center yellow")
   
    vhomecontainer.Matrix(1, 1).AddClass("text-center success")
    vhomecontainer.Matrix(1, 2).AddClass("text-center warning")
    vhomecontainer.Matrix(1, 3).AddClass("text-center error")
    home.AppendPlaceHolder
   
    vuetify.AddRoute(home)
End Sub

Output

View attachment 102857
Where can find this ?
 

Mashiane

Expert
Licensed User
Thoughts on moving towards Alpha - Designing Alerts

We create alerts using the abstract designer. We use Loadlayout to inject them at a particular location of the grid. No coding at all.

BANanoVuetifyAD3 Alert.jpg


B4X:
Sub Initialize
    'get the reference of the app
    vuetify = pgIndex.vuetify
    'initialize the page component
    alert.Initialize(Me, name)
    'path placeholder
    path = alert.path
    'load the alert container we have created via the abstract designer
    BANano.LoadLayout("#placeholder", "valertcontainer")
    'bind any available states from the container to this page
    alert.BindVueElement(valertcontainer)
    '
    valertcontainer.Matrix(1, 1).LoadLayout("valert")
    alert.BindVueElement(valert)    
'    
    valertcontainer.Matrix(1, 2).LoadLayout("valert1")
    alert.BindVueElement(valert1)
    '
    valertcontainer.Matrix(2, 1).LoadLayout("valert2")
    alert.BindVueElement(valert2)
    
    alert.AppendPlaceHolder
    vuetify.AddRoute(alert)
End Sub
 
Last edited:

Mashiane

Expert
Licensed User
Thoughts on moving to Alpha - Explaining the Blank Demo Project in the Demo Folder

On the BANanoVuetify3D Demo examples, you will find an example of a blank project.

You can compare the structure of the layouts we have created using the abstract designer with HTML code from here.


So when you create the layouts, you follow the same outline and then place components inside one another. One needs to remember to change the tag names to meet the ones displayed here:

1605237125611.png


Ta!
 

Lello1964

Well-Known Member
Licensed User
I'm studing Vue and BANanoVue, how do this ?

B4X:
<template>
  <div class="text-center">
    <v-menu transition="scale-transition">
      <template v-slot:activator="{ on, attrs }">
        <v-btn
            dark
            color="primary"
            v-bind="attrs"
            v-on="on"
          >
          Scale Transition
        </v-btn>
      </template>
      <v-list>
        <v-list-item
          v-for="n in 5"
          :key="n"
         >
          <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>
 
Last edited:

Mashiane

Expert
Licensed User
It it with pleasure to move BVAD3 from BETA to production version use

Download now.

Explore the tutorials here..

 

Mashiane

Expert
Licensed User
Update:

Please be advised that the most updated details about this library are being discussed in the tutorials.

 
Top