B4J Tutorial [BANano] The Designer


Licensed User
NOTE: This system is depreciated in V2 and replaced by a much better and complete solution. See here:


A feature repeatedly asked for ABM, but unfortunate enough not possible to do is now available in BANano! Yes, it is Christmas :)

Thanks to a new CustomView BANanoDesignElement you can use the Abstract Designer to make your layouts. And then easily load them!

It is a rather simple and elegant system I think:

1. You set BANanoDesignElement elements in the designer (Add View, Custom view).

Only these properties apply:
Name = ID
2. Each has a Build event where you can do your specific html stuff

3. You load a layout with BANano.LoadLayout. At this time, the bjl file is parsed (as B4J custom components do not support a different parent than main yet, I had to write an alogorithm to find the parent myself) and translated to _Build commands (you will see it in the DemoUI library file).

Sub Class_Globals
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize
End Sub

Sub Div_Build (el As BANanoDesignElement)
   el.Target.Append($"<div id="${el.Name.ToLowerCase}" class="${el.Classes}"></div>"$)
End Sub

Sub Row_Build (el As BANanoDesignElement)
   el.target.Append($"<div id="${el.Name.ToLowerCase}" class="${el.Classes}"></div>"$)
End Sub

Sub Column_Build (el As BANanoDesignElement)
   el.target.Append($"<div id="${el.Name.ToLowerCase}" class="${el.Classes}"></div>"$)
End Sub

' extra: the level of h;the text
Sub H_Build (el As BANanoDesignElement)
   el.target.Append($"<h${el.Extra(0)} id="${el.Name.ToLowerCase}" class="${el.Classes}">${el.Extra(1)}</h${el.Extra(0)}>"$)
End Sub

Sub P_Build (el As BANanoDesignElement)
   el.target.Append($"<p id="${el.Name.ToLowerCase}" class="${el.Classes}">${el.Extra(0)}</p}>"$)
End Sub

Sub Button_Build (el As BANanoDesignElement)
   Dim btn() As BANanoElement = el.target.RenderAppend($"<button id="${el.Name.ToLowerCase}" class="${el.Classes}">${el.Extra(0)}</button>"$,"").Children("#" & el.Name.ToLowerCase)
   ' defining events is very simple. Note that it has to be run AFTER adding it to the HTML DOM!
   ' eventName must be lowercase!
   btn(0).HandleEvents("click", el.ModuleEventHandler, el.Name.ToLowerCase & "_clicked")
End Sub

' extra: image source;alt text
Sub Image_Build (el As BANanoDesignElement)
   el.target.Append($"<img id="${el.Name.ToLowerCase}" src="${el.Extra(0)}" alt="${el.Extra(1)}"/>"$)
End Sub
Using this in a real app is now very simple:
Sub Process_Globals
   Private BANano As BANano 'ignore
   Private Builder As BANanoMiniCSSBuilder '<-------- defining our BANano Library
End Sub

Sub AppStart (Form1 As Form, Args() As String)
   ' you can change some output params here
   BANano.Initialize("BANano", "BANanoMiniCSS",12)
   BANano.HTML_NAME = "banano.html"
   BANano.Header.Title="BANano MiniCSS"
   BANano.ExternalTestConnectionServer = "http://gorgeousapps.com"
   ' start the build
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
   Return True
End Sub

Sub BANano_Ready()
   Builder.Initialize '<------- initialize the library
   BANano.LoadLayout("#body", "Layout1", Builder, Me) '<--- load the layout
End Sub

Sub MyButton_Clicked(event As BANanoEvent)
   Log("Clicked on " & event.ID)   
   BANano.LoadLayout("#r3c2", "SubLayout1", Builder, Me) ' <---- load a sub layout
End Sub
Builder is the library (the one who will handle the Build() events)
Me (the one who will handle e.g. the MyButton_Clicked event: so like all other events except Build)

An example project using the MiniCSS javascript library is included in the zip (both the library and a demo project using it) in the DemoUi folder.

Couple of important notes:
1. Both the library and App must be a B4J UI project, not a console project
2. When you now run BuildAsLibrary, the assets in the Files folder will be zipped to Files.zip, next to the .js and .dependsOn files.

I think this is cool! Very happy with it :)

Last edited:

Roberto P.

Well-Known Member
Licensed User
Hi Alain
very compliments. you are the number one!

where we can download the libary for try it?



Licensed User
This will very quickly become a serious contender to ABMaterial... And on top of it all, you just give it away! As soon as possible, I will make another donation to you, as you have earned it!


Licensed User
And just when I thought, a lump of coal was all I was getting (deserved) for x-mas.
What a gift! Thank you.

With this, and the "some knowledge required" - along with great examples from you and others - shall make this possible for us dummies out here!
One more spoke in the powerful wheel of what we love - B4X.