B4J Tutorial [ABMaterial]: Raising Events from Custom Components

Discussion in 'B4J Tutorials' started by Mashiane, Dec 12, 2017.

  1. Mashiane

    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

    Code:
    'add a click event to any element on the page
    Sub AddClickEvent(compID As String,compText As StringAs 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

    Code:
    Private ms1 as MashButtonGroup
    In ConnectPage

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

    Code:
    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

    Code:
    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: Dec 12, 2017
    Don Oso, magi6162 and joulongleu like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice