B4J Tutorial [BANano] BANanoObject talks with Javascript

Discussion in 'B4J Tutorials' started by alwaysbusy, Dec 13, 2018.

  1. alwaysbusy

    alwaysbusy Expert Licensed User

    I took my inspiration from Erels JavaObject to make a similar one for BANano. This is the 'Object' that rules them all... (in version 1.08+)

    What is the difference between a BANanoElement and a BANanoObject?
    A BANanoObject is a native HTML node/Javascript object. It is as low as you can get.
    A BANanoElement is a 'upgraded' version of a HTML BANanoObject: it is an Umbrella JS object.

    The BANanoObject has very few methods, but they are very powerful and allow you to talk with any javascript library (e.g. like jQuery!)

    Code:
    Dim L As BANanoObject
    L.Initialize(
    "L"' <--- this param is very important! Like in case of Leaflet, the keyword to access the lib is "L".  This should match exactly.

    Dim jQ as BANanoObject
    jQ.Initialize(
    "$")
    Now you can use a couple of simple methods on with this object:

    GetField(name): gets a property from the object

    SetField(name,value): sets a property of the object

    RunMethod(methodName, params): run a method of the object:
    NOTE: the outer Array will be removed in the javascript.
    So if you want to pass an array, you have to add an extra array.

    e.g. if you want to pass "[0,0], "Alain", you actually have to pass [[0,0], "Alain"]

    Code:
    RunMethod("myMethod"Array(Array(0,0), "Alain"))
    If only one (non Array parram is passed) you can ignore this.

    e.g. this is valid
    Code:
    RunMethod("myMethod""Alain")
    Initialize2: To initialize for a 'New libObjectName' javascript library:

    e.g. Javascript:
    Code:
    let datepicker = new When({
        input: document.getElementById(
    '...'),
        singleDate: true
    });
    datepicker.showHeader = true;
    Translated to B4J:
    Code:
    Dim datepicker As BANanoObject
    datepicker.Initialize2(
    "When", CreateMap("input": BANano.GetElement("#datepicker").ToObject, "singleDate"True))
    datepicker.RunMethod(
    "showHeader"True)
    Selector: Useful for e.g. jQuery selectors

    Code:
    Dim jQ as BANanoObject
    jQ.Initialize(
    "$")
    JQ.Selector(
    "#btn2").RunMethod("Click"Array(BANano.CallBack(Me, "btn2_clicked"Null))))

    Sub Btn2_Clicked()
         BANano.Msgbox(
    "btn2 clicked through BANanoObject and jQuery!")
    End Sub
    Note here too the BANano.CallBack method. This is used to map a javascript callback function() {} to a B4J function.

    You can go back and forth between a BANAnoElement and a BANAnoObject if needed:

    BANano.ToObject(element)
    BANano.ToElement(object)

    And a shortcut on the BANanoElement (handy to get e.g. the Umbrella nodes[0])
    BANanoElement.ToObject()

    Making a BANanoObject.ToElement would've been nice, but unfortunately can't (unknown how to wrap the u() at transpiling time).

    BANanoObject methods can be chained, e.g. to set obj.options.draggable, you can do:
    Code:
    MarkerObject.GetField("options").SetField("draggable", Draggable)
    The system works also for binding events, e.g:
    Code:
    Sub BindEvent(Event As String, EventHandler As Object, Callback As String)
       
    Event = Event.ToLowerCase
       Callback = Callback.ToLowerCase
     
       BANano.ToElement(MapObject).On(
    Event, EventHander, Callback)
    End Sub

    Sub UnbindEvent(Event As String)
       
    Event = Event.ToLowerCase
     
       BANano.ToElement(MapObject).Off(
    Event)
    End Sub
    Usage:
    Code:
    myobj.BindEvent("click", Me, "MyClick")
    ...
    Sub MyClick(event As BANanoObject)
       
    Log("My click")
    End Sub
    BANano.Window:
    This is a pre-made BANanoObject which allows you to access the deepest browser things like Navigation, Document, innerWidth etc...
    Code:
    Log(BANano.Window.GetField("navigator").GetField("appName"))
    Just as a side note, inline Javascript is now also smarter:

    You are now able to use ${} SmartStrings in javascript. I created a new #if statement in case you want to use this:

    without smartstrings (old way):
    Code:
    dim MyMessageVariable as String = "my message"

    #if Javascript
        alert(_mymessagevariable);
    #end if
    with smartstrings:
    Code:
    dim MyMessageVariable as String = "my message"

    #if JavascriptSmart '<------------------
        alert(${MyMessageVariable});
    #End if
    @Kiffi has been working on the first library using a lot of this, and he will release it shortly. You will immidiately see the benefits of BANanoObject.

    Alain
     
    Last edited: Dec 16, 2018
    Mashiane, joulongleu, mindful and 2 others like this.
  2. alwaysbusy

    alwaysbusy Expert Licensed User

    Last edited: Dec 13, 2018
    joulongleu likes 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