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

Mashiane · Sep 10, 2020

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

Mashiane · Sep 17, 2020

Upcoming Updates: Version 4.34 - Part 1

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.

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..

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.

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)

Mashiane · Sep 18, 2020

Upcoming Updates - Version 4.34 - Part 2

Borders & Radius

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)

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)

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)

joulongleu · Sep 19, 2020

Mashiane said:

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

joulongleu said:
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

Mashiane · Sep 19, 2020

Upcoming Updates to 4.34 - ShowWarnings - Part 3

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!

Mashiane · Sep 19, 2020

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

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

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.

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

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

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.

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

B4X:

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

Ta

Mashiane · Sep 19, 2020

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)

These changes apply also to Combobox/Select/AutoComplete.

Ta!

Mashiane · Sep 29, 2020

Upcoming Updates to 4.34 - Part 7

Creating of profile cards

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.

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

Mashiane · Sep 29, 2020

Version 4.34 BETA Available for try out.

Mashiane · Oct 1, 2020

Version 4.34 Released.

Ta!

Mashiane · Oct 2, 2020

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.

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 · Oct 3, 2020

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:

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.

Ta!

Mashiane · Oct 3, 2020

Datatable Date Column Formatting - Part 2

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 · Oct 3, 2020

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:

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 · Oct 3, 2020

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 · Oct 4, 2020

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.

Ok lets see how these buttons were added.

Buttons:

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 · Oct 4, 2020

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.

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"

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

Expert

Expert

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Similar Threads