B4J Tutorial [BANanoVueMaterial] Handling Events

Mashiane · Apr 3, 2020

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

B4X:

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

2. Define the event handler

B4X:

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

Mashiane · Apr 3, 2020

Radio Group

For the radio group we detect the change event.

1. Initialize the radio group and .SetOnChange

B4X:

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

B4X:

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

Mashiane · Apr 4, 2020

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

B4X:

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

B4X:

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

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

B4X:

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

2. Link the callback events

B4X:

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

Mashiane · Apr 4, 2020

CheckBoxes

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

1. Initialize the checkbox and assign event

B4X:

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

B4X:

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

Ta!

Mashiane · Apr 4, 2020

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

B4X:

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

B4X:

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

Mashiane · Apr 4, 2020

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!

B4X:

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

B4X:

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

B4X:

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

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

B4X:

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

B4X:

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

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

B4X:

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

B4X:

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

Mashiane · Apr 4, 2020

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.

B4X:

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

B4X:

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

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

B4X:

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.

B4X:

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 · Apr 25, 2020

Mashiane · May 1, 2020

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

B4J Tutorial [BANanoVueMaterial] Handling Events

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

ivanomonti

Expert

Mashiane

Expert

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

Similar Threads

B4J Tutorial [BANanoVueMaterial] Handling Events

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency