B4J Tutorial [ABMaterial] B4JS - 00 Introduction

Discussion in 'B4J Tutorials' started by alwaysbusy, Mar 5, 2018.

  1. alwaysbusy

    alwaysbusy Well-Known Member 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 ;).


    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()
    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
    "15 x the length of " & myString & " = " & myLocalInt)
    For i=0 To 50
           myLocalInt = myLocalInt + 
    Select Case myLocalInt
    Case 2040
    "key" & i, i)
    Case Else
    Log("less than 20")
    End Select
    timer.Enabled = True
    Dim sb As StringBuilder
    "lijn 1").Append(CRLF).Append("lijn 2")
    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).


    Core library
    Variable types:


    Control Structures:
    Smart String Literal:

    JSON library

    ABMaterial library (as of 2018/03/10, will be extended in the future of course):

    available for the Main Button, set each sub button via ABMButton










    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: Mar 22, 2018 at 10:18 AM
    fredo, cimperia, DonManfred and 16 others like this.
  2. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    Added ABMActionButton, ABMSlider and ABMRange to the B4JS compatible components.
    mindful and ihabsharaf like this.
  3. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    Added B4JSPrintPage, B4JSShowSideBar, B4JSToggleSideBar, B4JSCloseSideBar to the ABMPage B4JS component.
    mindful likes this.
  4. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    Added ABMTabs
    Mashiane likes this.
  5. Tadeu Botelho

    Tadeu Botelho Member Licensed User

    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.
    alwaysbusy likes this.
  6. xulihang

    xulihang Member Licensed User

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

    OliverA Well-Known Member Licensed User

    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".
    magi6162 and alwaysbusy like this.
  8. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

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

    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?
  10. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

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

    fredo Active 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...
  12. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    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.