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!
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:
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).
Using this in a real app is now very simple:
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
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!
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:
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 SubUsing 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 SubMe (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:
