B4J Tutorial [ABMaterial] B4JS - 00 Introduction

alwaysbusy

Expert
Licensed User
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:
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 Sub
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:
Array, Byte, Boolean, Double, Float, Int, Map, List, String
Bit:
And, Not, Or, ParseInt, ShiftLeft, ShiftRight, ToBinaryString, ToHexString, ToOctalString, UnsignedShiftRight, Xor, ParseInt
String:
CharAt, CompareTo, Contains, EndsWith, EqualsIgnoreCase, GetBytes, IndexOf, IndexOf2, LastIndexOf, LastIndexOf2, Length, Replace, StartsWith, Substring, Substring2, ToLowerCase, ToUpperCase, Trim
List:
Initialize, Initialize2, Get, Add, AddAllAt, AddAllAt, Clear, IndexOf, InsertAt, IsInitialized, RemoveAt, Size, Set, Sort, SortCaseInsensitive, SortType
Map:

Initialize, Clear, ContainsKey, Get, GetDefault, GetKeyAt, GetValueAt, IsInitialized, Remove, Size, Values, Keys, Put
StringBuilder:
Initialize, Insert, Append, Remove, Length, ToString, IsIinitialized
DateTime:
Now, DateParse (Limited), DateTime (Limited), Date, Time, DateFormat (Limited), TimeFormat (Limited), Add, GetYear, GetMonth, GetDayOfMonth, GetDayOfYear, GetDayOfWeek, GetHour, GetMinute, GetSecond, GetTimeZoneOffsetAt, TicksPerDay, TicksPerHour, TicksPerMinute, TicksPerSecond, TimeZoneOffset, SetTimeZone
Keywords:

Abs, ACos, ACosD, Array, Asc, ASin, ASinD, ATan, ATan2, ATan2D, ATanD, BytesToString, Catch, cE, CRLF, Ceil, Chr, Continue, Cos, CosD, cPI, Dim, Exit, True/false, Floor, Is, IsNumber, LastException, Log, Logarithm, LogDebug, Max, Min, Not, Null, Power, Return, Rnd, RndSeed, Round, Round2, Sin, SinD, Sqrt, Sub, Tan, TanD
Operators:
=, <>, <, >, <=, >=, And, Or, (, ), + , -, /, Mod
Control Structures:
If, Then, Else, End If, For, For Each, Next, Select, Case, Case Else, End Select, Do While, Do Until, Loop, Try, Catch, End Try
Timer:
Initialize, Enabled, IsInitialized, Interval
EVENTS: Tick
Smart String Literal:
Limited, does not support $Date{}, $Time{}, $DateTime{}, $xml{}

JSON library
JSONParser:
Initialize, NextObject, NextArray
JSONGenerator:
Initialize, Initialize2, ToString, ToPrettyString
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
B4JSID, B4JSUniqueKey, B4JSVisibility
EVENTS: B4JSOnClick, B4JSOnMouseEnter, B4JSOnMouseLeave
ABMLabel:
B4JSID, B4JSUniqueKey, B4JSText, B4JSVisibility
EVENTS: B4JSOnClick, B4JSOnMouseEnter, B4JSOnMouseLeave
ABMInput:
B4JSID, B4JSUniqueKey, B4JSText, B4JSSetFocus, B4JSVisibility
EVENTS: B4JSOnGotFocus, B4JSOnLostFocus, B4JSOnKeyUp, B4JSOnKeyDown

ABMContainer:
B4JSID, B4JSUniqueKey, B4JSVisibility
ABMSwitch:
B4JSID, B4JSUniqueKey, B4JSState, B4JSVisibility
EVENTS: B4JSOnClick
ABMTabs:
B4JSID, B4JSUniqueKey, B4JSGetActive, B4JSSetActive, B4JSVisibility
EVENTS: B4JSOnClick
ABMCheckbox:
B4JSID, B4JSUniqueKey, B4JSState, B4JSVisibility
EVENTS: B4JSOnClick
ABMRadioGroup:
B4JSID, B4JSUniqueKey, B4JSGetActive, B4JSSetActive, B4JSVisibility
EVENTS: B4JSOnClick

ABMButton:
B4JSID, B4JSUniqueKey, B4JSText, B4JSVisibility
EVENTS: B4JSOnClick, B4JSOnMouseEnter, B4JSOnMouseLeave
ABMSlider:
B4JSID, B4JSUniqueKey, B4JSGetValue, B4JSSetValue, B4JSVisibility
EVENTS: B4JSOnChange
ABMRange:
B4JSID, B4JSUniqueKey, B4JSGetStart, B4JSGetStop, B4JSSetStart, B4JSSetStop, B4JSVisibility
EVENTS: B4JSOnChange
ABMPage:
B4JSShowToast, B4JSMsgbox, B4JSMsgbox2, B4JSInputBox, B4JSRunMethod, B4JSRunInlineJavascriptMethod, B4JSCallAjax, B4JSGetComponentIDFromUniqueID, B4JSPrintPage, B4JSShowSideBar, B4JSToggleSideBar, B4JSCloseSideBar
EVENTS: B4JSMsgboxResult, B4JSInputboxResult, B4JSAjaxResult, B4JSAjaxError
ABMRow:
B4JSUniqueKey
EVENTS: B4JSOnClick, B4JSOnMouseEnter, B4JSOnMouseLeave

ABMCell:
B4JSUniqueKey
EVENTS: B4JSOnClick, B4JSOnMouseEnter, B4JSOnMouseLeave
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:

xulihang

Active Member
Licensed User
great job!
The client can use js to do jobs like encrypting a password before sending to server.
 

OliverA

Expert
Licensed User

ShaneG30

Well-Known Member
Licensed User
@alwaysbusy - Since the B4J code is transpiled to pure JavaScript, I'm assuming I could just use the transpiled code in a completely separate HTML5 application?
 

fredo

Well-Known Member
Licensed User
Wow - just wow...

For a new project to be realized on the Firebase platform in PWA architecture, an incorporation in Javascript seemed inevitable. But as a spoiled B4X developer I had some problems getting used to semicolon constraints and the "curly-bracket-hell". Even with the really powerful IDE of VS Code it consumes a lot of time to get into Javascript.

Reading "B4JS" in your mail let me spill my coffee, since all the tensions that had built up in the last weeks seemed to be released with your announcement. I'm gonna go get a rag now...
 

alwaysbusy

Expert
Licensed User
For a new project to be realized on the Firebase platform in PWA architecture
You probably could use some of B4JS conversion 'logic' indeed, but you will still have to write the specific Firebase stuff manually in Javascript. Maybe using the 'inline javascript' feature, but I can't tell as I don't know Firebase.
 
Top