Create Amazing Vuetify WebApps using BANanoVuetifyAD3 — Part 1

A year or so ago I started using the Vuetify CDN. I was awed at its power and how one can just use HTML element attributes or properties to create powerful WebApps.

I have been using B4x Tools for a couple of years now and it was logical for me to create a wrap of Vuetify using BANano. BANano is a B4x javascript transpiler created by an awesome dude called Alain. B4x has a nice drag and drop interface that could just prove useful for my purpose. The road ahead was not easy. I didn’t know anything about VueJS and I had to learn quickly. I was curious and determined to have something working.

A running Vuetify WebApp

By the way what is B4X?

Sometime ago I wrote an article here about B4x. With the tool, one is able to use their already existing experience to easily create cross platform apps. Anyway, one could say I am continuing on that thread however with a focus on Vuetify WebApps here. Please read that article first for some useful background to what we are attempting to achieve here.

Did you say banana?

Nope. BANano. Ok, here we go, his name is Alain Bailleul, swapping the initials gives you BA. And then Nano, well, that’s nanotechnology. He had earlier created a framework for webapps called ABMaterial, so BANano is the little brother.

Thus, BANanoVuetifyAD3 comes from BANAno + Vuetify. The AD means B4X Abstract Designer and 3 is the latest iteration of the library.

We need a few things to get us started…

If you had read my previous article and played around with what it offered, then you are halfway complete with this, you will just skip some of the steps. Here we go.

1. Download the free development platform B4J. Follow the instructions on the download page to get yourself started. If you already did this from the previous article, there is no need to do it again.
2. You also need the javascript transpiler, named BANano. Get it here.
3. The BANanoVuetifyAD3 libraries are available from this github, please download these also
4. I have created a template that you can install that will get you started in no time, please download it here.
5. Finally, you need a WAMP server with https enabled. I use Laragon for development, as its easier to setup without hustles. You can do this with any webserver anyway. Download this and install it.

I have installed B4J, my WAMP is ready, now what?

1. We are almost there, create 3 folders on your PC. Lets call these c:\b4x\shared, c:\b4x\libraries and c:\b4x\workspace.

2. Copy the contents of the BANanoVuetifyAD3 download to the c:\b4x\libraries folder. These are files with b4xlib extension.

3. Copy the contents of the Libraries folder from your BANano download to the c:\b4x\libraries folder

4. Open Program Files (x86) > Anywhere Software > B4J > Libraries and copy the BVAD3EDS b4xtemplate file there

The importance of B4J Paths Configuration

Here we need to tell B4J, where it will get external libraries and the Java compilers. Please point it there.

1. Open B4J, click Tools, click Configure Paths and then point to the shared and libraries folders you just created. As an example, here is my configuration in Figure 1

Figure 1

Let’s create our first BANanoVuetifyAD3 Project

From now on there is nothing much that you need to do except think about the design of your app. The expectation though is that you have played around with Vuetify and are willing to do so. The BANanoVuetifyAD3 comes bundled with all the resources needed to create and run an app, using Vuetify CDN. Whilst you can link to the resources via CDN, for our purposes, the resources will be hosted locally.

1. Open B4J, click on File > New > BVAD3EDS

This automatically will create a new BANanoVuetifyAD3 project based on a predefined template. The template has some route component pages and b4x code.

Figure 2

You will be required to enter a project name, type in your project name as depicted in Figure 3 and click Ok. You can create the project on the c:\b4x\workspace folder.

Figure 3

At the top of the coding area, you will notice some tabs, these are Code Modules where we right our code in. The Main code module is the start of the application.

Figure 4

Let’s run and compile the project

Before I explain what happens, please locate the run button on the toolbar, click it, or press F5 to run the project.

Figure 5

If all goes well, you should be seeing this on your browser.

Figure 6

Ok, let’s backtrack a little and understand what happened.

When you clicked the run button, this is what happed:

1. The Main module, AppStart sub-routine was called.
2. This initialized the BANano library and then build the webapp by transpiling every code line you wrote to javascript, css and html.
3. During the process of building the WebApp, the BANano_Ready event was called.
4. BANano_Ready called the pgIndex.Initialize sub-routine.
5. The pgIndex.Initialize sub-route initialized the BANAnoVuetifyAD3 library and created the structure of our project, by creating the layout, adding the route page components and their layouts etc. This is depicted with figure 7 below.

Figure 7

Line 20 — this initializes the BANanoVuetifyAD3 library.

Line 22 — this saves a state variable named “apptitle” the value of Main.AppTitle string.

Line 24 — This calls BANAno.LoadLayout and loads a layout called “baselayout”. This is a similar call we made in the previous article to load the “Layout1” .

There are then some calls to BindVueElements, a .SetMounted call and then a Vuetify.Serve. We will explain these in due course. Let’s look at the layout for now.

Figure 8

In the previous article we talked about how one can use the Abstract Designer to create layouts for their applications for their individual pages. We follow the same principle here by using layouts.

We have created a layout that represents the elements we need. This you see in real life in Figure 6 when it runs. When we open the layout file, this is what we will see. You will recall the similarity of the “Custom Type” content in the property bag with Vuetify component names.

Each element we have defined has properties that are linked back to the Vuetify components as per API documentation. So what the LoadLayout call does is to read the structure of this layout and create the needed HTML to build the app.

You can access the layout by clicking the “Files” tab on the bottom right section of the IDE. You click the layout you want to update and it will open.

Figure 9

I see all of this, but where is my HTML, CSS and JavaScript?

In the Main module, there is a section called Process_Globals. This stores the definition of all global variables defined in the app.

Figure 10

Our app name is “bvad3ds”

We have defined the publish folder as C:\laragon\www. This means that when BANano is transpiling the B4x source code to pure javascript, css and html, it will save our compilation there. This compilation happens when the WebApp is build built, on line 92 of the Main code module.

Figure 11

Double clicking the index.html file opens up the transpiled project that you can then deploy on your production web server.

Figure 12

If you explore the source code, you will notice that for the other route component pages, we use a class called VueComponent. After we initialize this we load layouts to it and then call the .AddRoute method for each.

I want to add more components to the layout, for example, text-fields, selects, chips etc.

If you open the layouts or create a new one, you are able to add more Vuetify components. In the Abstract Designer tool, click Add View > Custom View and then select the component you need to add. You can then place it inside its parent component using the drag handles.

Figure 13

Known Issues

A Blank Page — after compilation it might happen that you just see a blank page. Please check your web developer console of what the error is. You might have to download the BVAD3 project and then run it with b4j. That will create the BVAD3 b4xlib file and then run your BVAD3 project.

What’s Next?

In the next article we will look in depth of the method calls and how to build more Vuetify WebApps with BANanoVuetifyAD3. You can join our Telegram channel for a more personal interaction and also follow the Github repo for more details.

There is also an awesome Youtube Channel that talks about BVAD3 in depth. If interested, you can look at a similar project called BANanoAngularJS, where we wrap AngularJS with BANano.

To learn more about B4J, there is some learning material and how this VB like programming language works

Enjoy and have fun!