B4J Code Snippet [BANano]: Sharing the goodness

Ola

Thought I should create my own easy reference list of stuff I've posted here about BANano.

Tutorials
BANano for Dummies by Example
BANanoJSONQuery to the rescue: The case of the survey app.
Client Side Excel Report Generation [BANanoOXML]
Exploring BANanoEvents [BANano]
Sending Contact Us Form contents to an email with inline PHP [BANano]
Understanding CRUD logic with ExecuteCallBack [BANanoSQL]
Sharing the goodness [BANano]


Libraries
An Object Oriented UX library for BANano [BANanoWebix]
Got it! - Easy Hints [BANano]
A treeview you might use [BANano]
ChartJS charts with 1 line of code using UOECharts [BANano]
Implementing Collaboration with TogetherJS [BANano]
Implementing LiveHelp for your WebApp [ABMaterial]
Create your UX with MaterializaCSS using UOEBANano
UOEGrid: An interesting grid that you might like [BANano]
UOEGridTable Conditional Value Display Formatting [BANano]
UOEGridTable IconRenderer [BANano]
UOEGrid Column Renderer - Let's display images etc [BANano]
Creating Connected Grid Tables with UOEGridTable [BANano]
Creating Master Details Grid with UOEGridTable [BANano]


BackEnd
A BANanoSQL helper class for CRUD functionality [BANanoSQLUtils]
An inline PHP class for your MySQLI CRUD functionality [BANanoMySQL]
BANanoSQL CRUD-ing around with BANanoSQLUtils [BANano]
Exploring Using PHP & SQLite for your WebApp [BANano]
MySQL CRUD with PHP - Part 1 [BANano]
MySQL CRUD with PHP - Part 2 [BANano]
MySQL CRUD with PHP - Part 3.1 [A look an inline PHP] [BANano]
PDO CRUD Class for MSSQL [BANanoMSSQL]
SQLiteDB PHP CRUD Class for BANano [BANanoSQLite]

Experiments
A Material Design Lite framework for Website / WebApp Creation [BANanoReactMDL]
Beginning 3D with Three.JS [BANano3D]
Beginning HTML5 games with CreateJS [BANanoCreateJS]
Building WebApps/Websites with VueJS [BANanoVue]
15 Mockup Elements for your Prototypes [BANAnoWired]
Create reactive, state based components & UI [BANanoReef]
Creating a CRUD app with LocalStorage Backend [BANano]
Creating a hotel reservation app with BANanoJQM
Creating the PhotoNinja Website with UOE [Websites]
CRUD with grid & modal using UOENow [BANanoSQL]
Distributing and accessing an existing SQLite Databases - Part 1 [BANano]
A tabbed dialog to Login, Register, Forgot Password & Reset Password [BANano]
Let's please build a Community Project [BANanoReact]
Executing code without using BANano.Eval [BANano]


Questions
Question: [SOLVED] Extending Event Driven BANanoSQL with own CallBacks?
Question: [SOLVED] How to maintain element events?
Question: [SOLVED] How to set BANanoEvent Bubbling Off?
Question: [SOLVED] BANanoMaterial Error Fix
Question: [SOLVED] How can I run a JavaScript Method and wait for it to finish?
Question: [SOLVED] Returning all list items in For Each
Question: [SOLVED] How does one use Header.AddMeta?
Question: [SOLVED] How to turn minify off/on
Question: [SOLVED] Empty string passed to getElementID('')
Question: [SOLVED] How to find element existence
Question: [SOLVED] How to CallSub inside #If JavaScript
Question: [SOLVED] Library Compilation FileNotFound Exception
Question: [SOLVED] Map.Initialize inclusion of map keys
Question: [SOLVED] How to transvese elements by name and return attributes
Question: [SOLVED] How to call different subs for different elements
Question: [SOLVED] RangeError: Maximum Stacktrace exceeded
Question: [SOLVED] How do I refresh a page
Question: [SOLVED] FloatingActionButton iif method not defined
Question: [SOLVED] Enumeration Initialization Assignments
Question: [SOLVED] Else If Transpiling Error
Question: [SOLVED] Map Object Enhancements
Question: [SOLVED] Support for String()
Question: [SOLVED] Using / Converting Own B4J Classes
Question: [SOLVED] Ajax Calls: How to convert B4J Http Calls

To relook at these *unresolved

Question: How to embed & read a json file / rather use BANanoSQL to load it?
Question: How can I upload a file using Php?
Question: CRUD bug using wait
Question: Using MySQL / MSSQL with PHP
Question: How to add dynamic css / injectcss to my app
Question: How to AddJavascriptFile and AddCSSFile on demand

Now for some code snippets...

Removing Attributes

One of the elusive attributes is the 'disabled' attributes for elements. Apparently whether you set this to true/false to enable your element, the status quo stays the same. It seems the only way to toggle this is to remove it to enable your element.

The code snippet here is to remove attributes from elements.

'remove an attribute
Sub removeAttr(elID As String, attrName As String)
    elID = elID.tolowercase
    Dim jQ As BANanoObject
    jQ.Initialize("$")
    jQ.Selector($"#${elID}"$).RunMethod("removeAttr", Array(attrName))
End Sub

#Tested

Update: 30 Jan 2019

A new method to remove attribute has been added as BANano.BANanoElement.RemoveAttr

 

[Mashiane]

BANanoSQL: Query an object / map based list

BANanoQueryJSON was added to BANano which serves a better method of applying these types of queries!

Ta!

 

[Mashiane]

So I used the word "typeOf" as a map key value in my app: DON'T.

 

[Mashiane]

BANanoSQL: Query a JSON array quicky.

'convert json string to list
Dim fldJSON as List = BANano.FromJSON(strJson)
'open the database
db.OpenWait("bvmdesigner", "bvmdesigner")
'execute the query
Dim rslt As List = db.ExecuteWait("select * from ? where colactive = 'Yes'", Array(fldJSON))
 Log(rslt)

 

[Mashiane]

Warp Drive

When I saw this I was just mind blown, realizing the power of css and html. Wow

 

[joulongleu]

Warp Drive

When I saw this I was just mind blown, realizing the power of css and html. Wow

Very good, can join BANanoVueMaterial?

 

[Mashiane]

When BANano needs the ByteConvetor library, download it from here:

ByteConverter library

It's occasionally useful to be able to poke around in things as arrays of bytes so this library lets you do it. It can transform arrays of primitive types to and from arrays of bytes with the "endian-ness" of the conversion specified. If you need endian-ness you will either know about it or...

www.b4x.com

This happens when at times you compile a project.

Ta!

 

[Mashiane]

I wanted to change the App Document Title on Demand i.e. Browser Tab Title.

Watch BANanoJavascriptDemo changing to Anele Mbanga (Mashy) on the browser when the document is clicked.

document = banano.Window.GetField("document")
document.SetField("title", "Anele Mbanga (Mashy)")

Ta!

 

[Mashiane]

1. Fire a click event on a checkbox via code.
2. Toggle the direction of text from LRT (left to right) to RTL (right to left)

NB: We have made the code to look like javascript in this case..

1. Create a form. add an input checkbox. Assign mouseover event. Assign a click event.
2. On the mouseover event, fire a click event.

'create a form
    Dim f As JSElement = document.createElement("FORM")
    'create a checkbox
    Dim i As JSElement = document.createElement("INPUT")
    i.setAttribute("type", "checkbox")
    i.ID = "mycheck"
    i.addEventListener("mouseover", Me, "hoverit", True)
    i.addEventListener("click", Me, "clickit", True)
    f.appendchild(i)
    document.body.appendChild(f)

Sub hoverit(e As BANanoEvent)
    document.getElementById("mycheck").click
End Sub

This is the click event

'fire a click event
Sub click
    Element.RunMethod("click", Null)
End Sub

For the toggle, we are setting the dir attribute of the paragraph from LRT to RTL.

We add the button to run the toggle

Dim btnTD As JSElement = document.createElement("BUTTON")
    btnTD.appendChild(document.createTextNode("Toggle Text Direction"))
    btnTD.addEventListener("click", Me, "toggledir", True)
    document.body.appendChild(btnTD)

When the button is clicked, we check the direction and then change it

Sub toggledir(e As BANanoEvent)
    Dim dir As String = document.getElementById("note").dir
    Select Case dir
    Case document.DIR_LRT, ""
        document.getElementById("note").dir = document.DIR_RTL
    Case document.DIR_RTL
        document.getElementById("note").dir = document.DIR_LRT
    End Select
End Sub

Where the paragraph is:

'add a paragraph
    Dim p As JSElement = document.createElement("P")
    p.ID = "note"
    p.appendChild(document.createTextNode("Hover over the checkbox to simulate a click"))
    document.body.append(p)

 

[Mashiane]

Changing images at runtime.

We have the js equivalent and the banano equivalent.

Sub turnon(e As BANanoEvent)
    'document.getElementById("bulb").src = "./assets/pic_bulbon.gif"
    BANano.GetElement("#bulb").SetAttr("src", "./assets/pic_bulbon.gif")
End Sub

Sub turnoff(e As BANanoEvent)
    'document.getElementById("bulb").src = "./assets/pic_bulboff.gif"
    BANano.GetElement("#bulb").SetAttr("src", "./assets/pic_bulboff.gif")
End Sub

Ta!

 

[Mashiane]

Javascript Arrays

Created a simple class to handle arrays: this extends some B4X list functionalities.

Example 1 - forEach

Dim a1 As JSArray
    a1.Initialize(Array As String("Anele", "Mbanga", "(Mashy)"))
    Log("a1 size: " & a1.size)
    text = "<ul>"
    a1.foreach(Me, "buildlist")
    text = text & "</ul>"
    '
    Log(text)

1. Create an array with some simple items, get the size of the array. For each item in the array, we run the forEach array method passing it a callback.

Sub buildlist(value As Object)
    text = text & "<li>" & value & "</li>"
End Sub

What this does is to receive each value in the array, build but a <li></li> and the output is.

<ul><li>Anele</li><li>Mbanga</li><li>(Mashy)</li></ul>

Example 2: JS - every

Every checks if all values in an array meets a condition, if they all do, a True is returned / False

'every
    Dim ages As JSArray
    ages.Initialize(Array As Int(32, 33, 16, 40))
   
    'check if all items are >= 18
    Dim sout As Boolean = ages.every(Me, "checkadult")
    Log("every: " & sout)

The callback is

Sub checkadult(age As Int) As Boolean
    age = banano.parseint(age)
    Return age >= 18
End Sub

This method will return false because one of the array items is less than 18.

Example 3: filter

Filter returns the items in the array meeting the callback

'return all items >= 18
    Dim xout As JSArray = ages.filter(Me, "checkadult")
    Log("filter: " & xout.items)

output of this is:

filter: 32,33,40

This has removed 18 as it does not meet the condition.

Ta!

NB: Class to be provided - testing

 

[alwaysbusy]

1. Fire a click event on a checkbox via code.
2. Toggle the direction of text from LRT (left to right) to RTL (right to left)

NB: We have made the code to look like javascript in this case..

View attachment 100307

Note that the pure BANano equivalent would be:

Sub BANano_Ready()
    Dim body As BANanoElement
    body.Initialize("#body")
   
    Dim form As BANanoElement
    form.Initialize("<form>") 'make a new form tag
   
    Dim input As BANanoElement
    input.Initialize("<input>") 'make a new input tag
    input.SetAttr("id", "mycheck")
    input.SetAttr("type", "checkbox")
    input.On("mouseover", Me, "hoverit")
    input.On("click", Me, "clickit")
    form.Append(input)
    body.Append(form)
   
    Dim btnTD As BANanoElement
    btnTD.Initialize("<button>") ' make a new button tag
    btnTD.SetText("Toggle Text Direction")
    btnTD.On("click", Me, "Toggledir")
    body.Append(btnTD)
   
    Dim p As BANanoElement
    p.Initialize("<p>") ' make a new p tag
    p.SetAttr("id", "note")
    p.Settext("Hover over the checkbox to simulate a click")
    body.Append(p)
End Sub

Sub HoverIt(e As BANanoEvent) 'ignore
    BANano.GetElement("#mycheck").Trigger("click", Null)
End Sub

Sub Clickit(e As BANanoEvent) 'ignore
    BANano.Alert("click event occcurd!")
End Sub

Sub ToggleDir(e As BANanoEvent) 'ignore
    Dim Note As BANanoElement = BANano.GetElement("#note")
    Dim dir As String = Note.GetAttr("dir")
    Select Case dir
        Case "rtl"
            Note.SetAttr("dir", "")
        Case Else
            Note.SetAttr("dir", "rtl")
    End Select
End Sub

I will change the param in Append/Prepend/After/Before to an Object as this doesn't seem obvious that one can also use another BANanoElement as a parameter.

Alwaysbusy

 

[Mashiane]

Note that the pure BANano equivalent would be:

Thanks, I like the adaptation.

I will make the param in Append/Prepend/After/Before to an Object as this doesn't seem obvious that one can also use another BANanoElement as a parameter.

Sounds perfect.

 

[Mashiane]

Doing a little bit of maths

NB - this has some advanced stuff using the BANanoObject, however the math operations are just B4X you already know stuff.

Some of javascript math statements are rather odd. For example for the b4x Mod, javascript uses %. When learning javascript and want to port some javascript apps to BANAno, you might be faced with understanding what all this means.

B4X has handy math functions, its just the understand of what ++a; or a *= 5; of javascript, means at times when you encounter such.
By the way ++1 means a = a + 1 whilst a *=5 means a = a * 5.

Anyway for this we will use BANanoObject, this will help us open our document, write some stuff to it. We will only create a <br> element, however for this we will use the document.write method to do so. So using document.open, document.write and document.close, we do some math and show it on our page.

NB: Document.Open clears everything on the page including any given page title.

1. get the document object from the window object. The window object is the parent element for all page element. This is the BANanoWindow object.

Dim document As BANanoObject = banano.Window.GetField("document")

2. Because the js in BANAno is loaded async, we need to open the document

document.RunMethod("open", Null)

We will close it later with

document.RunMethod("close", Null)

After we finish writing to it

3. Let's do the Math. First a helper function

For this we need to write some stuff to the document. For this let's define a shortcut

Sub write(value as string)
document.RunMethod("write", array(value))
End Sub

4. The output...

    Dim a As Int = 33
    Dim b As Int = 10
    Dim c As String = "Test"
    Dim linebreak As String = "<br />"
    Dim result As Int = 0
    '
    write("a = ")
    write(a)
    write(linebreak)
    '
    write("b = ")
    write(b)
    write(linebreak)
    '
    write("c = ")
    write(c)
    write(linebreak)
        
    write("a + b = ")
    result = a + b
    write(result)
    write(linebreak)
         
    write("a - b = ")
    result = a - b
    write(result)
    write(linebreak)
         
    write("a / b = ")
    result = a / b
    write(result)
    write(linebreak)
         
    write("a % b (i.e Mod) = ")
    result = a Mod b
    write(result)
    write(linebreak)
         
    write("a + b + c = ")
    result = a + b + c
    write(result)
    write(linebreak)
         
    a = a + 1
    write("++a (i.e a = a + 1) = ")
    result = a
    write(result)
    write(linebreak)
    '
    a = a + 5
    write("a += 5 (i.e a = a + 5) = ")
    result = a
    write(result)
    write(linebreak)
    '
    a = a - 5
    write("a -= 5 (i.e a = a - 5) = ")
    result = a
    write(result)
    write(linebreak)
    '
    a = a * 2
    write("a *= 2 (i.e a = a * 2) = ")
    result = a
    write(result)
    write(linebreak)
    '
    a = a / 2
    write("a /= 2 (i.e a = a / 2) = ")
    result = a
    write(result)
    write(linebreak)
    '
    a = a Mod 2
    write("a %= 2 (i.e a = a Mod 2) = ")
    result = a
    write(result)
    write(linebreak)
         
    b = b - 1
    write("--b (i.e b = b - 1 = ")
    result = b
    write(result)
    write(linebreak)
    
'close the document

Ta!

 

[Mashiane]

Math Comparisons (continuation from previous...)




Output..

Dim a As Int = 10
    Dim b As Int = 20
    Dim linebreak As String = "<br />"
    Dim result As Object
    
    write("a = ")
    write(a)
    write(linebreak)
    '
    write("b = ")
    write(b)
    write(linebreak)
   
    write("(a == b) i.e. (is Equal) = ")
    result = (a = b)
    write(result)
    write(linebreak)
        
    write("(a < b) = ")
    result = (a < b)
    write(result)
    write(linebreak)
        
    write("(a > b) = ")
    result = (a > b)
    write(result)
    write(linebreak)
        
    write("(a != b) i.e is Not = ")
    result = (a <> b)
    write(result)
    write(linebreak)
            
    write("(a >= b) = ")
    result = (a >= b)
    write(result)
    write(linebreak)
        
    write("(a <= b) = ")
    result = (a <= b)
    write(result)
    write(linebreak)

 

[Mashiane]

Logical Operators ... (continuation)

Dim a As Boolean = True
    Dim b As Boolean = False
    Dim linebreak As Boolean = "<br />"
    Dim result As Object
    ' 
    write("(a && b) i.e. and = ")
    result = (a And b)
    write(result)
    write(linebreak)
        
    write("(a || b) i.e OR = ")
    result = (a Or b)
    write(result)
    write(linebreak)
        
    write("!(a && b) i.e. Not(a And b) => ")
    result = (Not(a And b))
    write(result)
    write(linebreak)

output..

 

[Mashiane]

BANano.IIF

we show how its written in JS and also how we do it in BANano...

Dim a As Int = 10
    Dim b As Int = 20
    Dim linebreak As String = "<br />"
    Dim result As Object
    '
    write("a = ")
    write(a)
    write(linebreak)
    '
    write("b = ")
    write(b)
    write(linebreak)
         
    write ("((a > b) ? 100 : 200) = ")
    result = BANano.IIf((a > b),100, 200)
    write(result)
    write(linebreak)
    
    write ("((a < b) ? 100 : 200) = ")
    result = BANano.IIf((a < b), 100, 200)
    write(result)
    write(linebreak)

Output:

 

[Mashiane]

Do While Loop

Dim count As Int = 0
   
    write("Starting Loop ")
        
    Do While (count < 10)
        write($"Current Count : ${count}<br />"$)
        count = count + 1
    Loop
   
    write("Loop stopped!")

Output:

 

[Mashiane]

Select Case / JS Switch.

Dim grade As String = "A"
    
    write("Entering switch block<br />")
    
    Select Case grade
    Case "A"
        write("Good job<br />")
    Case "B"
        write("Pretty good<br />")
    Case "C"
         write("Passed<br />")
    Case "D"
         write("Not so good<br />")
    Case "F"
         write("Failed<br />")
    Case Else
        write("Unknown grade<br />")
    End Select
    write("Exiting switch block")

Output

 

[Mashiane]

If statement

Dim book As String = "maths"
    Dim linebreak As String = "<br />"
     
    write("book = ")
    write(book)
    write(linebreak)
'
    If book = "history" Then
        write("<b>History Book</b>")
    else if book = "maths" Then
        write("<b>Maths Book</b>")
    else if book = "economics" Then
        write("<b>Economics Book</b>")
    Else
        write("<b>Unknown Book</b>")
    End If

Output

 

[Mashiane]

Do Until Loop

write("Starting Do Loop ")
         
    Do Until (count = 10)
        write($"Current Count : ${count}<br />"$)
        count = count + 1
    Loop
    
    write("Loop stopped!")

Output