B4J Tutorial [BANano] The Designer

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

https://www.b4x.com/android/forum/threads/banano-b4j-abstract-designer-v2-part-1.101531/

------------------------------------------------------------------------------------
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!

BANano1.21.png


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
EventName
Classes
Extra

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

B4X:
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:
B4X:
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"
 
   BANano.Header.AddCSSFile("mini-nord.min.css")
       
   ' start the build
   BANano.Build(File.DirApp)
 
   ExitApplication
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

' HERE STARTS YOUR APP
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.GetElement("#r3c2").Empty
   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 :)

Alain
 
Last edited:

Roberto P.

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

where we can download the libary for try it?

thank
 

Cableguy

Expert
Licensed User
Longtime User
Wow!....
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!
 

Harris

Expert
Licensed User
Longtime 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.
 
Top