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

Mashiane

Expert
Licensed User
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
 

Attachments

Last edited:

Mashiane

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

B4X:
#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.

B4X:
Private mAlertDismissible As Boolean
We read the property

B4X:
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.

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


ConditionalClasses.png
 

Mashiane

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

1597141683729.png


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.

 
Last edited:
Top