B4J Tutorial [ABMaterial]: Raising Events from Custom Components

Mashiane

Expert
Licensed User
Hi there

With the ability to create custom components for your ABMaterial WebApp, one is also able to raise and capture events when creating and running their webapp.

I have found it easier though to raise events at document level, but you can also create a component specific event with the component click/onchange etc event.

As an example, this code below, will add a click event to my component. The magic behind all of this is the b4j_raiseEvent method

B4X:
'add a click event to any element on the page
Sub AddClickEvent(compID As String,compText As String) As String
    Dim sb As StringBuilder
    sb.Initialize
    sb.Append($"$(function() {"$)
    sb.Append($"$('#${compID}').click(function(){"$)
    'sb.Append("event.stopPropagation();")
    sb.Append($"b4j_raiseEvent('${compID}_click', {'value':'${compText}'});"$)
    sb.Append("});")
    sb.Append("});")
    Return sb.ToString
End Sub
compID is the name of my component and compText is what I want to be returned when this click event is executed. So when your component is clicked in this case, the javascript call above will be executed, b4j_raiseEvent will ensure that your ABMaterial WebApp is able to execute the call.

How does the ABMaterial WebApp know?

What you need to do first is tell your app that we are expecting a call. For starters you create your control in your page and give it a name.

In Class_Globals

B4X:
Private ms1 as MashButtonGroup
In ConnectPage

B4X:
ms1.Initialize(page, "mybutton", myTheme)
Now, remember, you have given your component a name, and its not ms1, it is "mybutton", as an HTML element has been created on the page. So to tell ABMaterial that we are expecting an event, you need to add a method to the page.

B4X:
Sub mybutton_click(value As Map)
  dim valueX as string = value.getdefault("value","")
  if valueX = "doThis" then
    doThis
  else if valueX = "doThat" then
    doThat
  end if
End Sub
Now where do you add this click event when creating you control?

This should be inside this call

B4X:
Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
Dim myEvent As String = AddClickEvent(internalID,"Mashy")
page.ws.Eval(myEvent, Array As String(internalID))
(this runs during Page.Refresh in ConnectPage

Do you like this tutorial?

PS: In the Refresh method above, when the click event happens in your WebApp via your custom component, nothing will happen? Why? The value that is passed to valueX from your component is "Mashy" and not "doThis" or "doThat", so be careful.
 
Last edited:
Top