B4J Library [Web][BANano] Website/App/PWA library with Abstract Designer support

Erel · Nov 26, 2018

Very impressive. This is a 100% client solution. Are you actually using the B4J compiler?

Mashiane · Nov 26, 2018

Very impressive indeed! I was just starting to wonder how I will make my ABM apps work offline to work underground for some mining apps I'm working on. So I can just create a wrapper for myself for Material CSS and then use it with this and boom! Done! Perfect and I will have a seamless user experience.

Thanks a million for this! Viva!

alwaysbusy · Nov 26, 2018

Erel said:
Are you actually using the B4J compiler?

Partially. To configure the app and to run the BANano library and Build the app. At that point, the library takes over and transpiles the B4X source code to JavaScript.

Unlike ABM, it uses a more 'classic' way of B4X programming (e.g. one copies the assets to the 'Files' in B4J, and they are moved to the final web structure by the library).

alwaysbusy · Nov 26, 2018

Don't ask questions here, but use [BANano] in your subject if you have questions (or if you made a framework wrap!).

NOTE: You can now support BANano and ABMaterial here too: https://www.patreon.com/alwaysbusy

Or donate with PayPal using this QR Code to show your support:

TAKE A BACKUP IF YOU ARE GOING TO UPGRADE TO THE LATEST VERSION

Version 9.10: should solve the Transpiling on computers set to the Turkish language.

DOWNLOAD: https://gorgeousapps.com/BANano9.10.zip

Booklet BANano Essentials only: https://gorgeousapps.com/BANanoEssentialsV1.09.pdf

BANanoSkeleton Demo & Examples

Latest Stable Version 9.03 with additional libraries (e.g. the latest BANanoSkeleton UI Library) and Booklet:

DOWNLOAD FULL https://gorgeousapps.com/BANano9.03b.zip

Booklet BANano Essentials only: https://gorgeousapps.com/BANanoEssentialsV1.09.pdf

BANanoSkeleton Demo & Examples

Archived Versions:

Version 8.26 EXPERIMENTAL (library only): Adding .bjl layout files in a b4xlib

DOWNLOAD: http://gorgeousapps.com/BANano8.26Experimental.zip

Version 8.19 with additional libraries (e.g. the latest BANanoSkeleton UI Library) and Booklet:

DOWNLOAD FULL https://gorgeousapps.com/BANano8.19.zip

Booklet BANano Essentials only: https://gorgeousapps.com/BANanoEssentialsV1.02.pdf

Version 7 with additional libraries and Booklet:

DOWNLOAD FULL https://gorgeousapps.com/BANano7.37.zip

Booklet BANano Essentials only: https://gorgeousapps.com/BANanoEssentialsV1.01.pdf

Getting Started

A full description on how to install and use BANano can be found in the Booklet: BANano - Essentials.

INTRODUCTION PODCAST TO BANano (A.I. generated from the booklet)

http://sndup.net/hncr6

Don Oso · Nov 26, 2018

Just one word ..... WOW !!

Thanks Alain !

alwaysbusy · Nov 26, 2018

Some tips to make your life easier. Unlike ABM, BANano is case sensitive in a lot of ways (e.g. for html id's, css classes, events, ...)

So if you plan to build a wrapper for a CSS/JS framework (like MiniCSS, Bootstrap, Materialize CSS), take the time to make sure everything is always lowercase. When you call one of your methods use any case you want.

An example for the MiniCSS framework:

B4X:

' TIP: you make it yourself a lot easier if you LowerCase all the IDs!
Sub Process_Globals
   Dim BANano As BANano 'ignore
End Sub

public Sub AddRows(RowIDPrefix As String, Rows As Int, classes As String) As List
   RowIDPrefix = RowIDPrefix.ToLowerCase
   Dim l As List
   l.Initialize
   For i = 1 To Rows
       Dim myRow As GridRow
       myRow.Initialize(RowIDPrefix & i, classes)
       l.Add(myRow)
   Next
   Return l
End Sub

public Sub AddColumns(CellIDPrefix As String, theRow As GridRow, Cells As Int, classes As String)
   CellIDPrefix = CellIDPrefix.ToLowerCase
   For i = 1 To Cells
       Dim myCol As GridColumn
       myCol.Initialize(theRow.ID & CellIDPrefix & i, classes)
       theRow.cols.Add(myCol)
   Next
End Sub

public Sub BuildGrid(TargetID As String, Rows As List)
   TargetID = "#" & TargetID.ToLowerCase
   Dim s As StringBuilder
   s.Initialize
   s.Append($"<div class="container">"$)
   For i = 0 To Rows.Size - 1
       Dim myRow As GridRow = Rows.Get(i)
       s.Append($"<div id="${myRow.ID}" class="${myRow.Classes}">"$)
       For j = 0 To myRow.Cols.Size - 1
           Dim myCol As GridColumn = myRow.Cols.Get(j)
           s.Append($"<div id="${myCol.ID}" class="${myCol.Classes}"></div>"$)
       Next
       s.Append($"</div>"$)
   Next
   s.Append($"</div>"$)
   BANano.GetElement(TargetID).setHTML(s.toString)
End Sub

public Sub Content(TargetID As String, ID As String, Text As String)
   TargetID = "#" & TargetID.ToLowerCase
   ID = ID.ToLowerCase
   BANano.GetElement(TargetID).RenderAppend( $"<p id="${ID}">"$ & Text & "</p>","")
End Sub

public Sub Header(TargetID As String, ID As String, Level As Int, Text As String)
   TargetID =  "#" & TargetID.ToLowerCase
   ID = ID.ToLowerCase
   BANano.GetElement(TargetID).RenderAppend($"<h${Level} id="${ID}">${Text}</h${Level}>"$,"")
End Sub

Public Sub Button(TargetID As String, ID As String, Text As String, ColorVariant As String, EventHandler As Object)
   TargetID = "#" & TargetID.ToLowerCase
   ID = ID.ToLowerCase
   Dim tgt As BANanoElement = BANano.GetElement(TargetID)
   Dim btn() as BANanoElement = tgt.RenderAppend($"<button id="${ID}" class="${ColorVariant}">${Text}</button>"$,"").Children("")
   ' defining events is very simple. Note that it has to be run AFTER adding it to the HTML DOM!
   btn(0).HandleEvents("mousedown, touchstart", EventHandler, ID & "_clicked")
End Sub

public Sub Image(TargetID As String, ID As String, Src As String, AltText As String)
   TargetID = "#" & TargetID.ToLowerCase
   ID = ID.ToLowerCase
   BANano.GetElement(TargetID).RenderAppend($"<img id="${ID}" src="${Src}" alt="${AltText}"/>"$, "")
End Sub

public Sub List(TargetID As String, ID As String, Ordered As Boolean, Items As List, EventHandler As Object)
   TargetID = "#" & TargetID.ToLowerCase
   ID = ID.ToLowerCase
   Dim s As StringBuilder
   s.Initialize
   If Ordered Then
       s.Append($"<ol id="${ID}">"$)
   Else
       s.Append($"<ul id="${ID}">"$)
   End If
   For i = 0 To Items.Size - 1
       Dim item As String = Items.Get(i)
       s.Append($"<li id="${ID}_${(i+1)}" class="${ID}_event">${item}</li>"$)
   Next
   If Ordered Then
       s.Append("</ol>")
   Else
       s.Append("</ul>")
   End If
   BANano.GetElement(TargetID).RenderAppend(s.ToString, "")
   ' defining events is very simple. Note that it has to be run AFTER adding it to the HTML DOM!
   ' we only have to define it on our class (ID & "_event") once because we can retrieve wich one from the event later
   BANano.GetElement($".${ID}_event"$).HandleEvents("mousedown, touchstart", EventHandler, ID & "_clicked")
End Sub

public Sub Code(TargetID As String, ID As String, CodeText As String)
   TargetID = "#" & TargetID.ToLowerCase
   ID = ID.ToLowerCase
   BANano.GetElement(TargetID).RenderAppend( $"<pre id="${ID}">"$ & CodeText & "</pre>","")
End Sub

public Sub BlockQuote(TargetID As String, ID As String, Text As String, cite As String)
   TargetID = "#" & TargetID.ToLowerCase
   ID = ID.ToLowerCase
   BANano.GetElement(TargetID).RenderAppend( $"<blockquote id="${ID}" cite=${cite}>"$ & Text & "</blockquote>","")
End Sub

public Sub Card(TargetID As String, ID As String, Rows As List, Classes As String)
   TargetID = "#" & TargetID.ToLowerCase
   ID = ID.ToLowerCase
   BANano.GetElement(TargetID).RenderAppend($"<div id="${ID}" class="${Classes}"></div>"$, "")
   BuildGrid(ID, Rows)
End Sub

Also a note on BANano.GetElement():

The target parameter can be a html tag (no prefix), a tags id (has prefix #) or a css class (has prefix .). So the result of your call may affect multiple html tags at once!
This can be very handy (e.g. in the List() in the above class where we are using the CSS class) where instead of making an event per list item, you can catch them all at once.

But, if not carefully used, it can give unexpected results!

Alain

Roberto P. · Nov 27, 2018

I bielive that this new framwework will have many possibilities.

I think the following developments:

- integrated with PhoneGap, for created hybrid apps
- Sync support with server
- layout design with B4j designer

I propose to support all Alain
thank

Kiffi · Dec 2, 2018

That looks very promising!

Greetings ... Peter

alwaysbusy · Dec 3, 2018

A new version 1.02 is uploaded thanks to some remarks/tests from @Kiffi:

1. There was a mistake in the example button code (that appeared to work but the event was on the wrong element):

Correct code (also updated in post #7 and the demo):

B4X:

Public Sub Button(TargetID As String, ID As String, Text As String, ColorVariant As String, EventHandler As Object)
   TargetID = "#" & TargetID.ToLowerCase
   ID = ID.ToLowerCase
   Dim tgt As BANanoElement = BANano.GetElement(TargetID)
   Dim btn() as BANanoElement = tgt.RenderAppend($"<button id="${ID}" class="${ColorVariant}">${Text}</button>"$,"").Children("")
   ' defining events is very simple. Note that it has to be run AFTER adding it to the HTML DOM!
   btn(0).HandleEvents("mousedown, touchstart", EventHandler, ID & "_clicked")
End Sub

2. Improved support for Arrays to make the above possible.

3. Fix for methods that have a return value. The last variable type in the method was handled like the return value.
Note: a method that has a return value must be put in a variable first. May be extended in a later update.

Example:

does work:

B4X:

dim myTarget as BANanoElement = GetElement("myid")
mytarget.addClass("myclass")

Sub GetElement(ID As String) As BANanoElement
   ID = ID.ToLowerCase
   Return BANano.GetElement(ID)
End Sub

does NOT work:

B4X:

GetElement("myid").addClass("myclass")

Sub GetElement(ID As String) As BANanoElement
   ID = ID.ToLowerCase
   Return BANano.GetElement(ID)
End Sub

4. Support for inline Javascript within a method:

B4X:

Sub BANano_Ready()
   
    #If JAVASCRIPT
        alert("!");
    #End If  
   
End Sub

5. Added also BANano.CheckInternetConnectionWait and BANano.CallAjaxWait

Example usage:

B4X:

If BANano.CheckInternetConnectionWait Then
       Dim res As String = BANano.CallAjaxWait("https://reqres.in/api/users?page=1","GET","jsonp", "","", "", False)
       Shared.Ajaxresult = res
       MiniCSS.Content("#r4c1", "contajax", res)
Else
       MiniCSS.Content("#r4c1", "contajax", "Cannot make Ajax call because you are not connected to the internet, but here is the last result:<br>" & Shared.Ajaxresult)
End If

6. Several other fixes, mostly typos in the javascript.

Alain

Kiffi · Dec 3, 2018

alwaysbusy said:
A new version 1.02 is uploaded [...]

Very cool! Thanks a lot, Alain!

Greetings ... Peter

Harris · Dec 4, 2018

Why named BANano and not ABNano? Just curious, as I am sure you have your reasons... (typo? - BA(_ ) looks in keeping...)

alwaysbusy said:
Unlike ABMaterial, knowledge of HTML, CSS and to some extend Javascript is needed to build BANano apps.

This is where my trousers fall down - exposing what I don't know (or could hope to retain all the knowledge) of these other requirements.
However, like while learning ABM - it was daunting at first but it quickly became obvious (helped with B4J coding as well). I always rely on [you / and] the community to produce examples that help me learn and utilize.

Browser based would help reduce the need for 3 apps (desktop, Android, iOS) and the toil involved.

One thing many have noticed: your creative / intellectual talents never stop! I partially attribute (blame) Erel for this - since he inspires us all to excel.

alwaysbusy · Dec 4, 2018

Harris said:
Why named BANano and not ABNano

No hidden messages in this one

It is small (compared to ABM) so Nano, and instead of Alain Bailleul I used Bailleul Alain, et voila, BANano it was

As this is more like a pet project compared to the serious beast ABM, it could have a more fluffier name.

Harris said:
Browser based would help reduce the need for 3 apps (desktop, Android, iOS) and the toil involved.

But only up to a point! Once you need OS queries, you're stuck (it is not PhoneGap). You can give your users a lot more using the other 'native' B4X tools.

Harris said:
your creative / intellectual talents never stop!

Some days, it is more of a curse...

alwaysbusy · Dec 4, 2018

Uploaded version 1.03 which should fix https://www.b4x.com/android/forum/threads/banano-iteration-with-for-each-failed.100016/

Download: https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

alwaysbusy · Dec 6, 2018

Uploaded version 1.04

CHANGES:

1. Important: The syntax of CallAjax and CallAjaxWait has changed to allow headers! (user and password params are gone as you have to pass them as header anyway)

2. Fixes in CallAjax/Wait (mainly in the returned Json part)

3. Fix in BANanoJSONGenerator to allow initialize to accept a Map

4. Change in SetStyle: now only allows a string as parameter, so in case of a JSONGenerator, you now have to first ToString() it. There was no clear way to determin if it was a native JSON object or a JSON string.

B4X:

Dim JSONGenerator As BANanoJSONGenerator
Dim style As Map
style.Initialize
style.Put("background", "green")
style.Put("border-radius", "5px")
JSONGenerator.Initialize(style)
   
row2c1.SetStyle(JSONGenerator.ToString)

5. Object is now an allowed Type.

6. Several other bug fixes

Download: https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

alwaysbusy · Dec 13, 2018

Uploaded version 1.08

CHANGES:

1. New BANanoObject (see tutorial: https://www.b4x.com/android/forum/threads/banano-bananoobject-talks-with-javascript.100385)
2. BANanoRegEx which replaces the B4J RegEx
3. Lots of new methods on the BANano base object
4. Class methods can now be chainable

alwaysbusy · Dec 17, 2018

Uploaded version 1.11: download https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

CHANGES:

1. New feature to make BANano libraries (see tutorial: https://www.b4x.com/android/forum/threads/banano-creating-libraries.100412)
2. Fix where comments of inline javascript were not ignored
3. Fix for BANanoObject GetField() and SetField() using a variable instead of a string
4. Warning if you use a reseved word. This can cause trouble when BANano is transpiling your code generating bad javascript.
5. Attempt to have some kind of B4J WaitFor system using promises. (see tutorial: https://www.b4x.com/android/forum/threads/banano-resumeable-sub-sort-of.100500/)
6. Other small bug fixes

alwaysbusy · Dec 20, 2018

Uploaded version 1.21: download https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

CHANGES:

1. Introducing the Abstract Designer
2. bug fixes

alwaysbusy · Jan 7, 2019

Uploaded version 1.27: download https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

CHANGES:
1. Introduction to use inline php. More info: https://www.b4x.com/android/forum/threads/banano-inline-php-server-code.101224
2. BANano.CallDebugger will pause the javascript execution in the browser (only when in B4J debug mode)
3. De BANanoDesignElement in the Abstract Designer has now also a Style property
4. Transpiler Bug fixes

Alain

alwaysbusy · Jan 16, 2019

BANano v2.07: download https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

CHANGES:

1. NEW Abstract Design system using your own Custom Views: tutorial https://www.b4x.com/android/forum/threads/banano-b4j-abstract-designer-v2-part-1.101531/
2. The signature of BuildAsLibrary has changed: it doesn't need parameters anymore and generates the files in the Additional Libraries folder immidiately.
3. Support for the Const keyword
4. You can now use inline CSS with the #if CSS tag. This can be useful if you want to quickly have a small CSS class that you want to use.
Bacause this CSS is saved in the HTML file, it is strongly advised to create a sperate CSS file if this becomes to big.

Example

B4X:

...
#if CSS
.tablehover {
   background-color: #F0F0F0;
}
#End If

#Region Internal Events
public Sub RowMouseEnter(event As BANanoEvent)
   Dim row As BANanoElement
   row.Initialize("#" & event.ID)
   row.AddClass("tablehover")
End Sub

public Sub RowMouseLeave(event As BANanoEvent)
   Dim row As BANanoElement
   row.Initialize("#" & event.ID)
   row.RemoveClass("tablehover")
End Sub
#End Region

5. The layout properties support boolean, int and float. Colors are translated to a string but as rgba(255,2255,255,1.0).

6. I've completed the Skeleton CSS library. Just the basics, but can be extended by whoever feels like it.

7. Support for getters and setters (using the lowercased prefixes set/get)

8. Support for Smart Formatting. Just wrap your text into a BANano.SF()

Supported Smart formatting Tags:

{B}{/B}: Bold
{I}{/I}: Italic
{U}{/U}: Underline
{SUB}{/SUB}: Subscript
{SUP}{/SUP}: Superscript
{BR}: Line break
{WBR}: Word break opportunity
{NBSP}: Non breakable space
{AL}http://...{AT}text{/AL}: Link, opening a new tab
{AS}http://...{AT}text{/AS}: Link, not opening a new tab
{C:#RRGGBB}{/C}: Color
{ST:styles}{/ST}: Add specific styles e.g. {ST:font-size:0.9rem;color:#2B485C}My text in font-size 0.9rem{/ST}
{IC:#RRGGBB}{/IC}: Icons (if the correct .css or font is loaded) e.g. {IC:#FFFFFF}fa fa-refresh{/IC}

Example:

B4X:

mElement.SetHTML(BANano.SF("I'm {C:#FF0000}{U}row " & (i+1) & "{/U}{/C} of a multi layout!"))

9. Bug Fixes in the transpiler

Alwaysbusy

B4J Library [Web][BANano] Website/App/PWA library with Abstract Designer support

Erel

B4X founder

Mashiane

Expert

alwaysbusy

Expert

alwaysbusy

Expert

Don Oso

Active Member

alwaysbusy

Expert

Roberto P.

Well-Known Member

Kiffi

Well-Known Member

alwaysbusy

Expert

Kiffi

Well-Known Member

Harris

Expert

alwaysbusy

Expert

alwaysbusy

Expert

alwaysbusy

Expert

alwaysbusy

Expert

alwaysbusy

Expert

alwaysbusy

Expert

alwaysbusy

Expert

alwaysbusy

Expert