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!)
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"]
If only one (non Array parram is passed) you can ignore this.
e.g. this is valid
Initialize2: To initialize for a 'New libObjectName' javascript library:
e.g. Javascript:
Translated to B4J:
Selector: Useful for e.g. jQuery selectors
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:
The system works also for binding events, e.g:
Usage:
BANano.Window:
This is a pre-made BANanoObject which allows you to access the deepest browser things like Navigation, Document, innerWidth etc...
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):
with smartstrings:
@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
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!)
B4X:
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"]
B4X:
RunMethod("myMethod", Array(Array(0,0), "Alain"))If only one (non Array parram is passed) you can ignore this.
e.g. this is valid
B4X:
RunMethod("myMethod", "Alain")Initialize2: To initialize for a 'New libObjectName' javascript library:
e.g. Javascript:
B4X:
let datepicker = new When({
input: document.getElementById('...'),
singleDate: true
});
datepicker.showHeader = true;Translated to B4J:
B4X:
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
B4X:
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 SubYou 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:
B4X:
MarkerObject.GetField("options").SetField("draggable", Draggable)The system works also for binding events, e.g:
B4X:
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 SubUsage:
B4X:
myobj.BindEvent("click", Me, "MyClick")
...
Sub MyClick(event As BANanoObject)
Log("My click")
End SubBANano.Window:
This is a pre-made BANanoObject which allows you to access the deepest browser things like Navigation, Document, innerWidth etc...
B4X:
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):
B4X:
dim MyMessageVariable as String = "my message"
#if Javascript
alert(_mymessagevariable);
#end ifwith smartstrings:
B4X:
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: