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 ;).

    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:
    Code:
    Sub Process_Globals
       
    Dim myString As String
       
    Public pubMap As Map

       
    Dim timer As Timer
       
    Dim myGlobalName As String = "GlobalAlain"
    End Sub
    Code:
    '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 2040
                   
    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
    Code:
    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:
    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: Mar 22, 2018
    XbNnX_507, fredo, cimperia and 17 others like this.
  2. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

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

    alwaysbusy Well-Known Member Licensed User

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

    alwaysbusy Well-Known Member Licensed User

    Added ABMTabs
     
    joulongleu and Mashiane like 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.
     
    joulongleu and alwaysbusy like 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.
     
    joulongleu likes this.
  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".
     
    joulongleu, magi6162 and alwaysbusy like this.
  8. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    Woops read that previous post wrong. You are absolutely right!
     
    joulongleu likes this.
  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?
     
    joulongleu likes this.
  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.
     
    joulongleu and ShaneG30 like 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.
     
    fredo likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice