B4J Tutorial [BANanoVueMaterial] Handling Events

Ola

Download

This thread is to be about handling events in BANanoVueMaterial (aka BANanoVuetify). This is something that has been requested for me to explain some more.

So I will start by addressing the question I was asked. How to detect changes in the stepper control.

Steppers

1. Initialize the stepper and add the .SetOnChange event

Dim stepper As VMStepper = vm.CreateStepper("a", Me).SetOnChange(Me, "stepperChange")

2. Define the event handler

Sub stepperChange(numx As Int)        'ignore
    vm.ShowSnackBar(numx)
End Sub

 

[Mashiane]

Radio Group

For the radio group we detect the change event.

1. Initialize the radio group and .SetOnChange

Dim rg1 As VMRadioGroup = vm.CreateRadioGroup("rg2", Me).SetVModel("rg2").SetHorizontal(True).SetLabel("Other Radios")
    rg1.SetOptions(CreateMap("rad1":"Radio 1","rad2":"Radio 2","rad3":"Radio 3"))
    rg1.SetOnChange(Me, "rg2_change")
    rg1.AddToContainer(cont, 1, 1)

2. Trap the event

Sub rg2_change(e As Object)
    vm.ShowSnackBar(e)
End Sub

 

[Mashiane]

NavBar Buttons

NavBar buttons are added in the navbar. These can be flat buttons or icon buttons.

1. Initialize and add a navbutton icon / button

vm.NavBar.AddIcon("btnHeart", "mdi-heart", "My heart", "")
    vm.NavBar.AddIcon("btnButton", "mdi-magnify", "My button", "")

The button id for these buttons are btnHeart and btnButton. The event links that are automatically created are btnheart_click and btnbutton_click respectively.

2. Trap the event execution by linking the callback

Sub btnHeart_click(e As BANanoEvent)
    vm.ShowSnackBar("My heart...")
End Sub

Sub btnButton_click(e As BANanoEvent)
    vm.ShowSnackBar("Button click...")
End Sub

 

[Mashiane]

Buttons

As per last post, adding buttons is simple, you initialize it and automatically an event is created using the button id with _click

1. Initialize and add the buttons to the container

vm.CreateButton("btnPrimary", Me).SetLabel("Alert").SetPrimary(True).AddToContainer(cont, 1, 2)

2. Link the callback events

Sub btnAccent_click(e As BANanoEvent)
    vm.ShowSnackBAr("clicked accent")
End Sub

 

[Mashiane]

CheckBoxes

Besides other events, you can detect the change in the checkbox values.

1. Initialize the checkbox and assign event

vm.CreateCheckBox("chk1", Me).SetLabel("Check Box 1").SetVModel("chk1").SetOnChange(Me, "chk1_change").AddToContainer(cont, 1, 1)

2. Register a callback to trap the event

Sub chk1_change(value As Object)
    vm.ShowSnackBar($"chk1_change: ${value}"$)
End Sub

Ta!

 

[Mashiane]

Switch

The switch is also some type of checkbox. So the change event signature is the same as the checkbox.

1. Initialize the switch and assign the event

vm.CreateSwitch("sw1", Me).SetLabel("Switch 1").SetVModel("sw1").SetOnChange(Me, "sw1_change").SetColorIntensity(vm.vue.COLOR_INDIGO, vm.vue.INTENSITY_DARKEN4).AddToContainer(cont, 1, 1)

2. Define the callback to trap the event

Sub sw1_change(value As Object)    
    vm.ShowSnackBar($"sw1_change: ${value}"$)    
End Sub

 

[Mashiane]

TextField & TextArea

There are a variety of events that you can trap for the textfield. Here we trap the keydown event and change the title of the navbar!

1. Change - one uses SetOnChange(me, "txt_change")
2. KeyDown - one uses SetOnKeydown(me, "txt_keydown")
3. Prepend (icon) click - one uses SetOnClickPrepend(me, "txtprepend_click")
4. Prepend-Inner (icon) click - one uses SetOnClickPrependInner(me, "txtprependinner_click")
5. Append (icon) click - one uses SetOnClickAppend(me, "txtappend_click")
6. Append-Outer (icon) click - one uses SetOnClickAppendOuter(me, "txtappendouter_click")
7. Focus - one uses SetOnFocus(me, "txt_focus")
8. Blur - one uses SetOnBlur(me, "txt_blur")
9. Click - one used SetOnClick(me, "txt_click")
10. Click Clear - one uses SetOnClickClear(me, "txt_clear")
11. Input - one used SetOnInput(me, "txt_input")
12. MouseDown - one uses SetOnMousedown(me, "txt_mousedown")

1. Initialize the textfield and assign events

We have created a couple of events for this text field and we added some icons..

Dim mytxt As VMTextField = vm.CreateTextField("t1", Me).SetLabel("Regular").SetHint("Enter a name").SetPersistentHint(True)
    mytxt.SetPrependIcon("place")
    mytxt.SetPrependInnerIcon("mdi-account-circle-outline")
    mytxt.SetAppendIcon("mdi-caravan")
    mytxt.SetAppendOuterIcon("mdi-map-marker-radius")
    mytxt.SetSingleLine(True).SetClearable(True).SetMaxLength(25)
    mytxt.SetVModel("t1data")
    '
    'events
    mytxt.SetOnKeydown(Me, "t1_keydown")
    mytxt.SetOnClickAppend(Me, "t1append_click")
    mytxt.SetOnClickAppendOuter(Me, "t1appendouter_click")
    mytxt.SetOnClickPrepend(Me, "t1prepend_click")
    mytxt.SetOnClickPrependInner(Me, "t1prependinner_click")
    mytxt.SetOnClickClear(Me, "t1_clear")
    mytxt.AddToContainer(cont, 1, 1)

2. Assign the call backs...

Sub t1_clear(e As BANanoEvent)
    vm.ShowSnackBar("t1 clear")
End Sub


Sub t1_keydown(e As BANanoEvent)
    vm.NavBar.UpdateTitle($"t1 keydown..."$)
End Sub

Sub t1append_click(e As BANanoEvent)
    vm.ShowSnackBar("append click")
End Sub

Sub t1appendouter_click(e As BANanoEvent)
    vm.ShowSnackBar("append-outer click")
End Sub

Sub t1prepend_click(e As BANanoEvent)
    vm.ShowSnackBar("prepend click")

End Sub

Sub t1prependinner_click(e As BANanoEvent)
    vm.ShowSnackBar("prepend-inner click")
End Sub

 

[Mashiane]

File Input

When we create file inputs, a change event gets automatically created for the component. What we have to do is to trap the call back method that returns the list of files to be processed.

In this example, we set the file input to receive multiple files and on the _change event, we list the files.

We slighty changed the signature for the fileinput to accept an extra parameter to indicate whether we want to upload the file(s) or not. (Third Parameter)

1. Initialize the file input

vm.CreateFileInput("fi1", Me, False).SetMultiple(True).SetLabel("File input").SetVModel("myfiles").SetPlaceholder("Please choose some files").AddToContainer(cont, 1, 1)

2. Trap the change event. The files in this case are listed in our console.log

'file change
Sub fi1_change(fileList As List)
    For Each obj As Object In fileList
        Log(obj)
    Next
End Sub

If you decide to activate the file input functionality, the 3rd parameter should be True to indicate that we want to upload.

In that case the list of items returned will be based on the internal class: FileObject

 

[Mashiane]

AutoComplete, Combo & Selects

For autocompletes, combo and select, the events to trap are the SAME with the TextField as discussed above. Here we trap the change event to detect which element was changed in the select box.

1. Initialize the Select/AutoComplete/Combo and assign the event

vm.CreateSelect("sel4", Me).SetFilled(True).SetOnChange(Me, "sel4_change").SetChips(True).SetAttach(True).SetVModel("value").SetItems("items").SetLabel("Chips").AddToContainer(cont, 4, 1)

2. Trap the change event

Sub sel4_change(value As Object)
    vm.ShowSnackBar(value)
End Sub

 

[Mashiane]

Menu

A navbar can also have a menu. One needs to define the menu by adding buttons to it and trapping the callback events. The definition of buttons is the same as the click event is linked to the id.

1. Initialize the menu. The menu id to note is menu1.

Dim menu As VMMenu = vm.CreateMenu("menu1", Me).SetIcon("mdi-dots-vertical")
    menu.AddItem("inbox", "", "", "Inbox", "","")
    menu.AddItem("drafs", "", "", "Drafts", "","")
    menu.AddItem("sent", "", "", "Sent", "","")
    menu.AddToContainer(cont, 1, 1)

2. Trap the events associated with the menu, the event will be the master menu name, e.g. menu1items_click

Sub menu1items_click(e As BANanoEvent)
    'get the id from the event
    Dim elID As String = vm.GetIDFromEvent(e)
    vm.ShowSnackBar(elID)
End Sub

The items to be returned here are inbox, drafts and sent per item ids added.

 

[Mashiane]

Drawer

The drawer appears on the left of the screen. This is toggleable. When an instance of the app is initialized. A 'drawer' instance is created. The click event linked to this, just like the menu is draweritems_click. This does not change.

1. Initialize the drawer buttons

Sub BuildDrawer
    vm.Drawer.List.SetDense(True)
    vm.Drawer.SetWidth("300")
    vm.Drawer.AddTitleSubTitle("BANanoVuetify", "Version 3.00")
    vm.Drawer.AddDivider
    vm.Drawer.AddItem("designer", "", "Designer")
    vm.Drawer.AddItem("alerts", "", "Alerts")
    vm.Drawer.AddItem("toolbars", "", "Toolbars")
    vm.Drawer.AddItem("grids", "", "Grids")
    vm.Drawer.AddItem("avatars", "", "Avatars")
    vm.Drawer.AddItem("badges", "", "Badges")
    vm.Drawer.AddItem("banners", "", "Banners")

2. Trap the drawer click callback. The returned ID is each items id.

Sub draweritems_click(e As BANanoEvent)
    'get the id from the event
    Dim elID As String = vm.GetIDFromEvent(e)
    vm.pageresume
    Select Case elID
    Case "arccounter"
        vm.NavBar.UpdateTitle(modArcCounter.title)
        vm.ShowPage(modArcCounter.name)
    Case "designer"
        vm.pagepause
        modDesigner.init
    Case "echarts"
        vm.NavBar.UpdateTitle(modECharts.title)
        vm.ShowPage(modECharts.name)

Here each time a drawer item is clicked, we use the v-show directive to show each container we created.

 

[ivanomonti]

wow

 

[Mashiane]

Table Selection Events:

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

www.b4x.com