B4J Tutorial [ABMaterial] B4JS - 00 Introduction

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:

Sub Process_Globals
   Dim myString As String
   Public pubMap As Map

   Dim timer As Timer
   Dim myGlobalName As String = "GlobalAlain"
End Sub

'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

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)

 

[alwaysbusy]

Added ABMActionButton, ABMSlider and ABMRange to the B4JS compatible components.

 

[alwaysbusy]

Added B4JSPrintPage, B4JSShowSideBar, B4JSToggleSideBar, B4JSCloseSideBar to the ABMPage B4JS component.

 

[alwaysbusy]

Added ABMTabs

 

[Tadeu Botelho]

Very good!
This project will be promising!
I'm looking at the material ABMaterial and found the project very ingenious.
Congratulations and thank you for sharing this tool with us.

 

[xulihang]

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

 

[OliverA]

The client can use js to do jobs like encrypting a password before sending to server.

Huh? You may want to check out (https://crackstation.net/hashing-security.htm). Go to the section "In a Web Application, always hash on the server".

 

[alwaysbusy]

Woops read that previous post wrong. You are absolutely right!

 

[LWGShane]

@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?

 

[alwaysbusy]

@ShaneG30 Yes, except if you are using typical ABM commands of course. If you stick to the core commands, they should work.

 

[fredo]

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]

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.

 

[Don Oso]

its possible integrate ABMaterial B4JS with banano? why? because the lack of debuging capabilities in banano turns slow and for resolve some deep bugs you must know javascript or the framework used...

Cheers and thanks for your commiment with us.