B4J Tutorial [BANano] The Designer

Discussion in 'B4J Tutorials' started by alwaysbusy, Dec 20, 2018.

  1. alwaysbusy

    alwaysbusy Expert 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:
    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)
    $"<div id="${el.Name.ToLowerCase}" class="${el.Classes}"></div>"$)
    End Sub

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

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

    ' extra: the level of h;the text
    Sub H_Build (el As BANanoDesignElement)
    $"<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)
    $"<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)
    $"<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.HTML_NAME = 
    "BANano MiniCSS"
       BANano.ExternalTestConnectionServer = 
    ' 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 StringAs Boolean
    Return True
    End Sub

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

    Sub MyButton_Clicked(event As BANanoEvent)
    Log("Clicked on " & event.ID)   
    "#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: Jan 16, 2019
  2. Roberto P.

    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?

    alwaysbusy likes this.
  3. Cableguy

    Cableguy Expert 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!
    alwaysbusy likes this.
  4. alwaysbusy

    alwaysbusy Expert Licensed User

  5. alwaysbusy

    alwaysbusy Expert Licensed User

    @Cableguy ABMaterial is for the ones who don't want to have anything to do with html, css or javascript. For BANano, knowledge of these languages is required.

    But, one has a choice. And don't forget the Skeleton CSS framework @tchart wrote!
    Cableguy likes this.
  6. Kiffi

    Kiffi Well-Known Member Licensed User

    Santa Claus distributes his gifts four days earlier than planned. ;)

    I can honestly say that BANano is a really great system and I enjoy working with it.

    Kudos, Alain!

    JakeBullet70, Harris and alwaysbusy like this.
  7. Roberto P.

    Roberto P. Well-Known Member Licensed User

  8. alwaysbusy

    alwaysbusy Expert Licensed User

    Thanks for letting me know! Should be corrected to 1.21.

    Development of BANano goes fast, but not THAT fast :)
    Roberto P. likes this.
  9. Erel

    Erel Administrator Staff Member Licensed User

    Great work Alain!!!
    Kiffi and alwaysbusy like this.
  10. Harris

    Harris Well-Known Member 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.
    JakeBullet70, alwaysbusy and Kiffi like this.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice