Share My Creation [Web][BANano] Web App library with Abstract Designer support

Download the latest version here:

BANano is a FREE B4J library to create websites/webapps with (offline) Progressive Web App support.

Unlike its big brother ABMaterial, BANano does not rely on any particular framework like Materialize CSS.

Why a second framework? Well, from the start ABMaterial was build with a back server in mind. B4J has great support to setup a very powerful jServer to handle web requests. Which does mean all intelligence is at the server side and you have the full power of B4J to do whatever you want (secure database access, serial communication, cache control etc). With B4JS, some of this intelligence could be transferred to the browser side, but the app still needs internet/intranet access so this is as far as it could go.

BANano is a different animal. It can use a Service Worker to 'install' the web app in the browser, so it can also work when the user is offline. While ABMaterial builds the page from the server side, BANano builds it from the browser side. This means EVERYTHING you write in B4J is transpiled to Javascript, HTML and CSS.

Last edited:


Licensed User
Longtime User
BANano v6.09



A BANano Custom View can now have a special Property: the AutoID Key.
If the Custom View has a property AutoID and it is set to True, then the BANano Transpiler will use a random string for the ID/Name of the component.

This will make it easier to make layouts in the Abstract Designer without having to worry about having the same name.

In the BANanoSkeleton library for example the following Custom Views have an AutoID:
  • SKRow
  • SKColumn
  • SKContainer
  • SKlabel
  • SKImage
It is important that you open your existing layouts and check if this setting is correct for your layout (as by default, this will be set to True for the above Custom Views)

You can Ignore this behavior by setting the TranspilerOptions.SetIgnoreAutoID(True), but I suggest you do the check described above for your existing layouts and make use of it as it will make it easier in the future if you have new layouts.


1. [NEW] BANano.DeepMerge()
Merges two object into one (e.g. two maps into one)

2. [NEW] Live Updating of Layouts
You can now live (while running) update the layouts in the Abstract Designer and reload them in the browser

3. [NEW] BANano.GetAsset()
returns the object previously loaded with AssetsLoad/AssetsLoadEvent/AssetsLoadWait
needs the exact url path used in the Load methods.

4. [NEW] Prefixing Smart Strings
When you start the Smart Strings ($""$) with one of these prefixes, BANano will do some automatic replaces:

[BANCLEAN]: removes \n and \r
[BANRAW]: replaces \n to \\n, \r to \\r, " to \"

5. [NEW] BANano.CallBackMethod()
Get the BANano name of a method, to be used in e.g. AddEventListener and RemoveEventListener.

6. [NEW] BANano.Await
Makes JavaScript wait until the promise returns a result. It has to be noted that it only makes the async (Wait) function block wait and not the whole program execution.

The method name itself has end with ...Wait (this adds the async prefix in Javascript).

7. [NEW] Typical Javascript Array methods added

8. [NEW] BANano Event has property ReturnValue

9. [NEW] BANanoMediaQuery
A media query fires an event if a certain rule matches.

Example rules:
(max-width: 400px)
(min-width: 401px) and (max-width: 600px)
(min-width: 601px) and (max-width: 800px)
(min-width: 801px)
(orientation: portrait)
(orientation: landscape)

Example Usage:
Private Bigger992px As BANanoMediaQuery
Bigger992px.Initialize("(min-width: 992px)")
Sub Bigger992px_Matched()
    MainSidebar.AlwaysOpen = True
    ' and hide the hamburger button
    MainHamburgerMenu.Element.SetStyle($"{"visibility": "hidden"}"$)
End Sub

10. [NEW] BANanoObject Delete operator
The delete operator deletes a property from an object

11. [NEW] New/changed components in the BANanoSkeleton b4xlib
* SKCanvas/SKCanvasObject/SKCanvasImageData

Very similar object as in ABMaterial. Build-in Drag/Drop of objects

* SKMenu

Menu object (e.g. can be used in a Sidebar as a Hamburger menu)

* SKTextbox

Possibility to add a prefix/suffix label to the component.

* SKColorPicker

12. [NEW] BANano.LoadLayoutAppend/BANanoElement.LoadLayoutAppend/BANanoElement
Appends the layout at the end without emptying the target first.

13. [NEW] RemoveEventListener extra parameter UseCapture
useCapture: A Boolean value that specifies the event phase to remove the event handler from.

true - Removes the event handler from the capturing phase
false - Removes the event handler from the bubbling phase

14. [FIX] Tags are not appended on thead/tbody/tfoot tags
Umbrella limitation. Reason is the javascript createDocumentFragment() method does not support table tags but I have written a workaround for it.

15. [FIX] Sometimes in libraries, and error looking for a BANanoApp.jar occured

16. [FIX] ...Wait methods not generated in libraries

17. [NEW] includes a BANano Skeleton.b4xtemplate
Because B4X now allows templates, BANano has a template using the BANanoSkeleton library.
It has a page, sidebar, topbar and an example modal sheet.

18. [FIX] Description Meta Tag was added twice

19. [NEW] TranspilerOptions.SetFireReadyWhenReadyStateComplete(bool as Boolean)
Raises the Ready state only when the loading state is 'Complete'. Default = True

Set to False to have the old behaviour.

20. [FIX] Several smaller transpiler fixes




Licensed User
Longtime User
BANano v6.57



1. [NEW] BANano.SetTabNotification(number As String)
Adds a notification number to the browsers tab. e.g. '(2) My Website'

2. [NEW] BANano.DeepClone(Obj as Object)
Deep Clones an object (e.g. a map)

3. [NEW] BANano.CreateElement(Tag as String) As BANanoElement
Creates a BANanoElement, not attached to something

4. [NEW] Use you own favicon.ico
If a favicon.ico is found in the /Files folder, it is used instead of the default BANano one.

5. [NEW] Optimisations saved to file
As the log only shows the first x of optimizations, the full list is now saved in OPTIMISATIONS.txt

6. [FIX] Fixes in how the Service worker handles additional Javascript Files
In some rare cases, the Service worker did not included some needed Javascript files.
This part of the engine has been rewritten.

7. [NEW] BANano.BuildAsB4XLibForABM(LibraryVersion As String)
New transpilation to create ABMBANano b4xlib libraries for ABMaterial.

More info:

8. [NEW] BANano.RaiseEventToABM(eventName As String, eventParamNames as List, eventParamValues as List, Description as String)
Method to raise an event to a ABM, maximum two params because B4J only supports this maximum. Use a Map is more are needed.
The Description will be added to the generated .bas file for ABM as comment.

See 7 for usage.

9. [NEW[] BANano.Spread(variable as Object) as Object
Adds the spread operator (three dots) before the variable.
e.g. BANano.Spread(myVar)

becomes: ...myVar

For more info on the Javascript Spread operator:

10. [CHANGE] BANanoGeoLocation.GetCurrentGeoLocation() renamed to BANanoGeoLocation.GetCurrentPosition()

11. [NEW] BANANO.Header.AddJavaScriptFileSW(AssetFileNameOrUrl As String)
Does the same a AddJavascriptFile() but will write in also in the ImportScripts() method in the Service Worker file.

NOTE:such a javascript file can NOT use window or document or any other reference to the DOM as a Service Worker can not access this!

If it is a javascript file used in a BANanoLibrary, it MUST be added in the app explicitly!

These javascript files will NOT be merged!

12. [NEW] BANANO.Header.AddJavascriptES6FileSW(AssetFileNameOrUrl As String)
Does the same a AddJavascriptES6File() but will write in also in the ImportScripts() method in the Service Worker file.

NOTE:such a javascript file can NOT use window or document or any other reference to the DOM as a Service Worker can not access this!

13. [NEW] BANanoSQL.NextInserted(tableName As String, FieldName as String)
Returns the next auto incremented value that will be used

14. [NEW] BANanoEvent.Target() As Object
New property, can contain the Target description on which the event was triggered.

15. [NEW] TranspilerOptions.DoNotDeleteFolderOnCompilation(fullPath as String)
Prevents the Transpiler from deleting this folder. Useful e.g. for assets that are not in the /Files folder.

16. [NEW] BANano. Online() and BANan. OffLine() events
Raises an event when the webApp goes Online of Offline.

Note: Can ONLY be used in Main!

17. [NEW] New components in SKSkeleton

18. [FIX] Several smaller transpiler fixes




Licensed User
Longtime User
BANano v6.59

Do NOT use v6.57 anymore if you are using it to make ABMBANanoLibraries!



1. [FIX] ABMBANano Libraries losing Websocket connection
I had to find this out myself the hard way, but there was a major flaw in the generation of the 'glue' code:
It only worked for ONE instance of the page. So as soon as two or more users accessed the page, the previous ones broke the connection.

You will have to recompile your existing ABMBANanoLibraries with this new version and make the changes in the calling ABM app described below:

Consequences on this fix:

a. Step 3. (Call this method in ConnectPage() to set the WebSocket) has to be removed
b. In each call to an ABMBANano library in ABM, you must pass the WebSocket (ws) in the method as the first parameter.

2. [NEW] TranspilerOptions.Author and .IDECmment
Added to comply with the latest version of B4J




Licensed User
Longtime User
I have released a BETA version of BANano 7 for the adventurous ones among you ;) ( This contains ONLY the library files (no examples or additional BANano libraries).

Do not ask questions about this one here (it is for announcements only), but start a new thread with [BANano] in the subject.

I'm finishing a big PWA myself for a client this week using version 7, so I got limited time to answer questions. But I try to follow-up feedback as much as possible.

This version may likely undergo some changes and may contain bugs, so be VERY careful and using it in production is 100% your own responsibility!



Licensed User
Longtime User


Licensed User
Longtime User
BANano 7.37 is Released!

This is a maintenance update fixing bugs. It also allows adding zip files as assets to BANanoLibraries. It also contains a newer version of the BANanoSkeleton library (7.36).

The Booklet BANano - Essentials has been updated.

New chapters:

1.11.1. Multi-line Designer property names
18. BANanoSkeleton: UI component library
19. Troubleshooting
20. (Advanced) Tips & Tricks




Licensed User
Longtime User