B4J Tutorial [BANano] Exploring BANanoEvents

Discussion in 'B4J Tutorials' started by Mashiane, Jan 31, 2019.

Tags:
  1. Mashiane

    Mashiane Expert Licensed User

    Hi there

    This is just my method (without abstract designer views) of adding and binding events to elements.

    1. Elements are added to the page
    2. After the page content is updated, events are added to a map that keeps record of events, events can be click, change etc.
    3. Events are bound to the elements whether through a global sub that will handle all events or individual subs per element.

    Case 1: events handled by own subs using HandleEvents.
    When binding events to individual subs, the binding method should be

    Code:
    'BindEvents("",Me)
    BANanoEvents.gif
     

    Attached Files:

    Last edited: Jan 31, 2019
    amaxco and joulongleu like this.
  2. Mashiane

    Mashiane Expert Licensed User

    Case 2: Binding events to a global sub.

    The binding method should be:

    Code:
    BindEvents("globalEvent",Me)
    BANanoEvents1.gif

    First in our process_globals of our code module, we define a few things...

    Code:
    Type EventObject(ElementName As String, EventType As String, CallBackMethod As String)
        
    'the map will hold all events for elements
        Public Events As Map
    And then add some subs to AddEvents and then BindEvents

    Code:
    ''add an event to the collection
    Sub AddEvent(ElementID As String, EventType As String,CallBackMethod As String)
        ElementID = ElementID.ToLowerCase
        ElementID = ElementID.Trim
        
    Dim evnt As EventObject
        evnt.Initialize
        evnt.ElementName = ElementID
        evnt.EventType = EventType
        evnt.CallBackMethod = CallBackMethod
        Events.Put(ElementID,evnt)
        
    Dim em As List
        em.Initialize
        em.Add(
    "icon")
        em.Add(
    "img")
        em.Add(
    "badge")
        em.Add(
    "title")
        em.Add(
    "span")
        
    Dim lTot As Int = em.Size - 1
        
    Dim lCnt As Int
        
    For lCnt = 0 To lTot
            
    Dim strsuffix As String = em.Get(lCnt)
            
    Dim strkey As String = $"${ElementID}-${strsuffix}"$
            
    Dim evnt As EventObject
            evnt.Initialize
            evnt.ElementName = strkey
            evnt.EventType = EventType
            evnt.CallBackMethod = CallBackMethod
            Events.Put(strkey,evnt)
        
    Next
    End Sub
    As per above code, if you add an elementid of 'btnok', 4 event handlers will be added for btnok, btnok-icon, btnok-img etc.

    Then we bind events

    Code:
    'banano bind the events to elements
    Sub BindEvents(elMethod As String, EventHandler As Object)
        
    Dim mTot As Int = Events.Size - 1
        
    Dim mCnt As Int
        
    For mCnt = 0 To mTot
            
    Dim elID As String = Events.GetKeyAt(mCnt)
            
    Dim elEvent As EventObject = Events.Get(elID)
            
    Dim btnEvent As String = elEvent.CallBackMethod
            
    Dim evType As String = elEvent.EventType
            
    Dim elKey As String = $"#${elID}"$
            
    'these call a universal method
            If elMethod <> "" Then
                btnEvent = elMethod.tolowercase
            
    End If
            
    If EventHandler <> Null Then
                
    Dim eExist As Boolean = BANAno.Exists(elKey)
                
    If eExist = True Then
                    
    Dim elm As BANanoElement = BANAno.GetElement(elKey)
    'elm.off(evType)
                    elm.HandleEvents(evType, EventHandler, btnEvent)
                
    End If
            
    End If
        
    Next
    End Sub
    This loops through the events map and then add all necessary events for the page..

    Then to demo lets add some page content and add and bind the events..

    Code:
    Sub Init()
        BANAno.GetElement(
    "#body").Empty
        BANAno.GetElement(
    "#body").Append($"<button id="btnok">Button Itself</button><br>"$)
        BANAno.GetElement(
    "#body").Append($"<button id="btnok-icon">Assumed Icon</button><br>"$)
        BANAno.GetElement(
    "#body").Append($"<button id="btnok-span">Assumed Span</button><br>"$)
        BANAno.GetElement(
    "#body").Append($"<button id="btnok-img">Assumed Img</button><br>"$)
        BANAno.GetElement(
    "#body").Append($"<a id="btnhave">Anchor</a><br>"$)
        
    'add events for each element
        ' clear events
        ' Events.Initialize
        AddEvent("btnok","click","btnok_click")
        AddEvent(
    "btnhave","click","btnhave_click")
        
    'bind the events to each element
        BindEvents("globalEvent",Me)
        
    'BindEvents("",Me)
    End Sub
    With this example a global sub 'globalEvent' is used to handle all events, inside that one can parse the event ids and process whetever is needed per element clicked.

    Code:
    Sub btnok_click(event As BANanoEvent)
        
    Log(event.ID)
    End Sub


    Sub btnhave_click(event As BANanoEvent)
        
    Log(event.ID)
    End Sub

    Sub globalEvent(event As BANanoEvent)
        
    Log(" ** global event handler ***")
        
    Log(event.ID)
    End Sub
    Ta!
     

    Attached Files:

    amaxco, joulongleu and B4JExplorer 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