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
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
In ConnectPage
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.
Now where do you add this click event when creating you control?
This should be inside this call
(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.
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))
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: