B4J Tutorial [BANano] BANanoObject talks with Javascript

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!)

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"]

RunMethod("myMethod", Array(Array(0,0), "Alain"))

If only one (non Array parram is passed) you can ignore this.

e.g. this is valid

RunMethod("myMethod", "Alain")

Initialize2: To initialize for a 'New libObjectName' javascript library:

e.g. Javascript:

let datepicker = new When({
    input: document.getElementById('...'),
    singleDate: true
});
datepicker.showHeader = true;

Translated to B4J:

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

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:

MarkerObject.GetField("options").SetField("draggable", Draggable)

The system works also for binding events, e.g:

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:

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

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

dim MyMessageVariable as String = "my message"

#if Javascript
    alert(_mymessagevariable);
#end if

with smartstrings:

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

 

[alwaysbusy]

Version 1.08 can now be downloaded here: https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740