B4J Tutorial [BANanoCVC] Creating BANano Libraries in 7 Steps

Ola

Download

A BANano library is a b4xlib that has custom views that one can use to create the websites and or webapps. As BANAno is front end platform independent, one can use any front-end platform they need. We will use the BANanoCVC i.e. BANano Custom View Creator to do this!

For this exercise we will just create a single custom view and a single layout to demonstrate how one can create custom views for their library and then compile this into a library that they can use. To achieve this we will use the BANAno Custom View Creator.

For this example, we will assume that we want to wrap Bootstrap for BANano as our choice of front end to use. For this we will need the Bootstrap resources. These include the css and js files listed on their site.

When you are done with this tutorial, you would have created these alerts without writing any HTML.

So lets the Bootstrap resources listed below...

Step 1

We will create a B4J project and then add these resources. These resources can be added using the exact paths listed above, or one can download the resources and add them via the files tab of their b4j project and then refer them.

In my case as a l wont be online all the time, I have downloaded these resources and added them to my project.

Step 2

So I update my AppStart to reflect these as indicated below.

Sub AppStart (Form1 As Form, Args() As String) 
    ' you can change some output params here
    BANano.Initialize("BANano", LibName, Version)
    BANano.Header.Title = LibTitle
 
    'BANano.Header.AddCSSFile("fontawesome.min.css")
    'BANano.Header.AddCSSFile("roboto.min.css")
    BANano.Header.AddCSSFile("bootstrap.min.css")
    '
    'BANano.Header.AddJavascriptFile("fileSaver.min.js")
    BANano.Header.AddJavascriptFile("jquery-3.5.1.slim.min.js")
    BANano.Header.AddJavascriptFile("popper.min.js")
    BANano.Header.AddJavascriptFile("bootstrap.min.js")
             
    ' start the build
    #if release
        BANano.BuildAsB4Xlib(Version)
    #else
        BANano.Build(File.DirApp)
    #end if
 
    ExitApplication
End Sub

 

[Mashiane]

Step 3 - Creating our Custom View

For this we fire up our BANano Custom View Creator. We will create a BANano Custom View for the alert component of bootstrap. This is how alerts are created.

From above, we notice 3 important things. These are:
1. There is an attribute that cannot be changed i.e role which should always be alert.
2. Each alert should also have a class that cannot be changed called alert.
3. Each alert has some form of type, this can be alert-info, alert-light, etc. We can create a dropdown in our property bag for this.

Let's fire up the BANano Custom View Creator, this will make our job easier.

3.1 We will need a holder for all our components, lets create a project. Our components will start with TB.

3.2 Lets create the component, we will call it Alert and its tag is a div.

3.3. Now its time to add our attributes, styles, classes and events (if any)

Attributes

We noted that the role=alert attribute does not need to be changed for the alert, lets create an attribute that does not have set / get.

Styles

There are no styles listed for this attribute on the code, you can then just define some styles. We will define the margins for example.

Classes

For the classes, there is one class that must not be changed, this is alert, but there are also some classes that we can choose to change the color of the alert. Let's create the fixed class for the alert.

The other classes can be changed to reflect the color of the alert, lets add this class, we will call it Alert Type. To ensure that a designer can select the color, these are added as options and will appear as the "List" in the custom view for this property.

We don't have any events for this, so we dont add any.

We download our custom view and then we will import this to our library we are creating.

 

[Mashiane]

Step 4: Compile the Custom View As Part of our Library

We need to import our custom view to our library. This is done on the menu with Project > Import Existing Modules.

We have called our test library as BANanoBootstrap, to make the library usable, run the project in release mode. This compiles the library.

Step 5: Create your Website / WebApp

Our 1 custom view library is ready for use so that we can create Boostrap Alerts. So we create a new B4J Project to test our library.

In our new project, we find our BANano library and establish a reference to it.

Step 6: Drop the TBAlert to the stage with the abstract designer.

In our project, we activate the internal abstract designer, our TBAlert exists on the list of custom views. Hoora!!

We update the name of the alert (this is the unique identifier of our control when we refer it with .GetElement. We also update the text that will show inbetween the <><>. Finally we choose the color of the alert. This will be added as a class to our alert based on the Alert Types we indicated when we were designing our custom control.

We save the layout and give it a name.

Step 7: Launch your website / webapp

When done with your designs, ensure you load the layouts and create your awesome website / webapp.

BANano.LoadLayout("#body", "alerts")

If your components have events, these should be generated and code written for them just like we do in normal b4x apps.

Congrats, you are well into creating your own front-end BANano libraries!