After a delay of more of a year working on other ABM stuff, I finaly got back on track with B4JS. I will make a series of tutorials explaining how it works. This post would be the main entry point to those tutorials so a good one to bookmark if you want to follow the progress 
.
INTRODUCTION
One way to look at B4JS is as some kind of new platform in B4X, that uses a very similar syntax as B4J. At runtime, the B4J source code is transpiled to pure Javascript (to copymewithjar.js.needs, something ABM users are familiar with). The generated source code can then be used in e.g. an ABMaterial Web App.
A typical B4JS class could look like this:
Looks very familiar, no?
Having the browser doing some stuff using Javascript can have some advantages by relieving some pressure from your server (checking if a form is filled in correctly, or changing the visibility of an ABMcontainer if a user clicks a button). But it also demands a great resposibility from the programmer not to expose to much information to the user. Never, ever write sensitive stuff like SQL, passwords etc in B4JS!
Another advantage is being able to expose some events (like the KeyUp/KeyDown events in an ABMInput field). They are deliberately omitted in ABM, because such events could potentially kill your server. But in Javascript, we could use them e.g. to check if the user could entry numbers, or if fits an email mask.
Having a Timer running on the browser side can also be handy.
Note: B4JS is a work in progress. It will probably take the best part of this year to continue developing it. But as ABM has reached a very stable point, I feel confident I will be able to do so. It will be first available in ABM 4.25 (released in a couple of weeks).
First an overview of what it can do (some things may look unfamiliar because they are typical ABM, but I'll explain it in later posts).
OVERVIEW
Core library
Variable types:
Bit:
String:
List:
Map:
StringBuilder:
DateTime:
Keywords:
Operators:
Control Structures:
Timer:
Smart String Literal:
JSON library
JSONParser:
JSONGenerator:
ABMaterial library (as of 2018/03/10, will be extended in the future of course):
ABMActionButton:
available for the Main Button, set each sub button via ABMButton
ABMLabel:
ABMInput:
ABMContainer:
ABMSwitch:
ABMTabs:
ABMCheckbox:
ABMRadioGroup:
ABMButton:
ABMSlider:
ABMRange:
ABMPage:
ABMRow:
ABMCell:
TUTORIALS
01. Getting started
02. Core functions
03. Inline Javascript
04. Running Javascript on the server side (mini NodeJS?)
05. JSON & Ajax Calls
06. The UI (ABMaterial) connection
07. The UI (ABMaterial) connection (part 2)
.INTRODUCTION
One way to look at B4JS is as some kind of new platform in B4X, that uses a very similar syntax as B4J. At runtime, the B4J source code is transpiled to pure Javascript (to copymewithjar.js.needs, something ABM users are familiar with). The generated source code can then be used in e.g. an ABMaterial Web App.
A typical B4JS class could look like this:
B4X:
Sub Process_Globals
Dim myString As String
Public pubMap As Map
Dim timer As Timer
Dim myGlobalName As String = "GlobalAlain"
End Sub
B4X:
'Initializes the object. You can NOT add parameters.
Public Sub InitializeB4JS()
pubMap.Initialize
Dim myName As String = "Alain"
' smartstrings do not support date, time or xml functions
myString = $"Hello planet "B4X"! This is a test
from ${myName} and ${myGlobalName}"$
Log("myString.Contains('planet'): " & myString.Contains("planet"))
Dim myLocalInt As Int = 15
myLocalInt = myLocalInt * myString.Length
LogMe("15 x the length of " & myString & " = " & myLocalInt)
For i=0 To 50
myLocalInt = myLocalInt + 2
Select Case myLocalInt
Case 20, 40
Log(i)
pubMap.Put("key" & i, i)
Case Else
Log("less than 20")
End Select
Next
timer.Initialize("timer", 1000)
timer.Enabled = True
Dim sb As StringBuilder
sb.Initialize
sb.Append("lijn 1").Append(CRLF).Append("lijn 2")
Log(sb.ToString)
Log(sb.Length)
sb.Insert(2,"X")
Log(sb.ToString)
sb.Remove(2,3)
Log(sb.ToString)
End Sub
B4X:
Private Sub Timer_Tick
timer.Enabled = False
Log("timer ticking")
If timer.Enabled = False Then
timer.Interval = timer.Interval + 1000
Log("timer new interval: " & timer.Interval)
timer.Enabled = True
End If
End SubLooks very familiar, no?
Having the browser doing some stuff using Javascript can have some advantages by relieving some pressure from your server (checking if a form is filled in correctly, or changing the visibility of an ABMcontainer if a user clicks a button). But it also demands a great resposibility from the programmer not to expose to much information to the user. Never, ever write sensitive stuff like SQL, passwords etc in B4JS!
Another advantage is being able to expose some events (like the KeyUp/KeyDown events in an ABMInput field). They are deliberately omitted in ABM, because such events could potentially kill your server. But in Javascript, we could use them e.g. to check if the user could entry numbers, or if fits an email mask.
Having a Timer running on the browser side can also be handy.
Note: B4JS is a work in progress. It will probably take the best part of this year to continue developing it. But as ABM has reached a very stable point, I feel confident I will be able to do so. It will be first available in ABM 4.25 (released in a couple of weeks).
First an overview of what it can do (some things may look unfamiliar because they are typical ABM, but I'll explain it in later posts).
OVERVIEW
Core library
Variable types:
Bit:
String:
List:
Map:
StringBuilder:
DateTime:
Keywords:
Operators:
Control Structures:
Timer:
Smart String Literal:
JSON library
JSONParser:
JSONGenerator:
ABMaterial library (as of 2018/03/10, will be extended in the future of course):
ABMActionButton:
available for the Main Button, set each sub button via ABMButton
ABMLabel:
ABMInput:
ABMContainer:
ABMSwitch:
ABMTabs:
ABMCheckbox:
ABMRadioGroup:
ABMButton:
ABMSlider:
ABMRange:
ABMPage:
ABMRow:
ABMCell:
TUTORIALS
01. Getting started
02. Core functions
03. Inline Javascript
04. Running Javascript on the server side (mini NodeJS?)
05. JSON & Ajax Calls
06. The UI (ABMaterial) connection
07. The UI (ABMaterial) connection (part 2)
Last edited:
