B4J Tutorial [BANano] Creating BANano Custom Views with the BANano Custom View Creator WebApp

Ola

Download

Why the BANano Custom View Creator?

The beauty of BANano is that it enables one to use any front-end framework they want. This means that you can pick any framework like Bootstrap, VueJS, Pure, Bulma, Skeleton etc to use.

Luckily, the Skeleton framework comes built in and I have done some interesting wraps too along VueJS. VueJS on the other hand meant that set BANano terms and conditions were broken to make it work. With that said, a proud moment with a lot of pleasure is realising this project.

The BANano Custom View Creator is built using the BANanoVueDesigner i.e. VueJS+Vuetify on top of BANano. I opted for that approach because the designer generates most of the source code needed for CRUD. For the backend MySQL is being used. So the less code that was written to make this work was the advantage.

If you don't want to use the built in BANanoSkeleton library, and for example need to use Bootstrap for your BANano Website / WebApp, you need to create custom views built following BANano's outline that will use Bootstrap. At least building the Bootstrap library will be done once. Hopefully when someone does that, they can make it available here in the forum.

To regress a little, when building BANAnoVueMaterial, I realized that I needed some extensions that I will use that will extend the core functionality of what I need. Each time I have to add an extension I have to follow the same methodology in ensuring that the extension works with BANAno. This means the same repetitive tasks. So I created some functions in my designer to make this work. Fortunately most vue libraries come up with everything that is needed i.e some JSON files that have all the attributes per component and this I imported to create the custom views that the BANanoVuetifyAD (BETA) is using. This was tested with an Online Store and a News App. That went well.

The BANano Custom View Creator is framework independent. Its purpose is to enable anyone to built custom views for any framework they need. Thing is, frameworks work differently and one needs to at least study the framework first and understand its workings before one starts creating the custom views.

Let's journey ahead.

To demonstrate this, we have gone to the basics, we will take a basic anchor tag as explained in W3Schools and then define its attributes using this tool and then peek at the generated source code that will be acceptable for our BANano Library. So we speak pure HTML5 here as a start. We will here with this 4 part series demonstrate how one can attempt to create a custom view that they can use in their library.

Here is the complete playlist for this tutorial

BANano Custom View Creator on YouTube - Part 1 (Attributes)

BANano Custom View Creator on YouTube - Part 2 (Styles)

BANano Custom View Creator on YouTube - Part 3 (Classes)

BANano Custom View Creator on YouTube - Part 4 (Events)

Part 1: Creating Attributes

Let's watch a video a little so we can get our heads around this concept.





Running the WebApp Locally.

1. Create a MySQL database called bananocvc
2. In the 0. MySQL Backend folder, you will find a SQL file. Import this with phpMyAdmin.
3. In the /assets folder find config.php and then update your connection settings to MySQL
4. Run the app from your web server.

Enjoy.

PS: Many moons ago this was MashSkeletor

 

[Mashiane]

Part 2 : Creating Styles

Previously, we looked at how attributes were added to the custom view, now we look at how we add styles to the custom view.

Let's take a look.

 

[Mashiane]

Part 3 - Creating Classes

We have created attributes and styles for our custom component.

Lets now create classes that will be used by our custom component.

 

[Mashiane]

Part 4 - Creating Events

This step is the final step in creating the custom views. Here we look at events. This could be a click event, a change event, a mouseover event etc.

We then get the complete source code for the custom view in the B4X section of our tab.

 

[Mashiane]

Creating BANano Libraries in 7 Steps

 

[Mashiane]

At times we want to create conditional classes. This means we want to add a class when a condition is true / false.

The basic designer would be like this...

#DesignerProperty: Key: AlertDismissible, DisplayName: AlertDismissible, FieldType: Boolean, DefaultValue:  , Description:

Below we want to add the class alert-dismissible when its true.

We define a variable to save the specified value by the person designing.

Private mAlertDismissible As Boolean

We read the property

mAlertDismissible = Props.Get("AlertDismissible")

Then if the condition is true, the class should be added. For this we added a class to our custom view.

AddClassOnCondition("alert-dismissible", mAlertDismissible, True)

 

[Mashiane]

So we have started creating custom views for the BANanoZUI library, here is our first start.

 

[Mashiane]

Creating BANano Custom Views for VueJS based projects

If you are lucky, your vuejs based library will come with a webtypes, tags and attributes JSON files.

The BANanoCVC has been updated such that if these files exist, these can be imported in this sequence

1. Webtypes, 2. Tags and 3. Attributes.

Once done importing these, you can then update the generated components, their attributes, classes etc and then with a click of a button generate the complete custom view files for your VueJS based project. For example, for Vuetify, we have about 159 different components. This is rather a big list for the custom view menu and this might mean one will have to tweak the items to show on the menu by hiding others.

The video below, details the process of how one can wrap a VueJS based javascript library for BANano. The generated class files can then be added to an existing library project.

 

[Mashiane]

Version 1.6 Now available

Download here

 

[Mashiane]

1st post updated: Update: 29 September 2020

 

[Mashiane]

Version 1.7 was just pushed.

Ta!

 

[Mashiane]

The tool has been updated to Version 1.80

 

[aeric]

I just accidentally found this tool. This is very useful.

 

[Mashiane]

Thanks, this has helped a great deal. With new ways of doing things with vuejs this deserves a rewrite. Soon anyway. I'm still using a slightly updated version when building bvad3 components.

 

[VigilanteDesign]

Very useful, I am using it with XAMPP a.k.a. Apache and MySQL only.. the other plugins aint activated..

BUT i cannot create projects in the website.
I tried different ports and such, i set the config accordingly.. what could be the reason?
the .sql file is nicely added in phpmyadmin, at least looks like..
The website shows properly..
I click the plus icon and the form shows up,
i then set the needed values and click "save" .. and NOTHING happens..
no error onscreen, no log errors, just the project does not seem to be created