Vuetify Website / WebApp Development using BANanoVuetifyAD3 - An Introduction

Introduction

A year or so ago, I started learning Vuetify. Vuetify is a complete UI framework built on top of Vue.js. Vuetify takes a mobile first approach to design, which means your application just works out of the box—whether it’s on a phone, tablet, or desktop computer.

The current version of Vuetify supports VueJS 2 and the next version which will support VueJS 3 will be available in the first quarter of 2022.

I started my development journey with VB6 and it was then a joy to discover tools like B4X years later, which enabled me to create Android, iOS and Desktop Applications.

Fortunately, I did write an article here about B4J, a RAD tool to develop Desktop Applications. So the journey to develop Vuetify Websites / WebApps will start from that article.

Why on earth would I follow that approach and not use Single File Components and the CLI? Well, I like exploring and inventing new things. Which is what brings us to BANanoVuetifyAD3.

What Are We Going to Create?

When we are done with this tutorial, you would have created a WebApp like this within the next hour or less.

Background

BANanoVuetifyAD3 is a framework to create WebApps and Websites. It is powered by B4X + Vuetify + BANano. B4X is a Rapid Application Development toolset to create Android, iOS and Desktop Applications, whilst Vuetify is the world’s most popular Vue.js framework for building feature rich, blazing fast applications. BANano is the glue that binds B4X and Vuetify so that one is able to create their WebApp / WebSites using Vuetify CDN approach. BANano transpiles your B4X code (VB like syntax) into pure HTML/JavaScript/CSS.

Actually, you don't have to know any JavaScript to start developing BANanoVuetifyAD3 WebApps/Websites.

To create your WebSites / WebApps with BANanoVuetifyAD3, you will need B4X and the BANano library. We will use an abstract designer to create our webapps using drag n drop. To achieve this, the BANanoVuetifyAD3 library comes pre-built with custom elements like VTextField, VCalendar, VSnackBar, etc., to cover most of the Vuetify Components.

You can follow this previous article to install the B4X B4J IDE to your PC or continue below.

P.S.: You can also get a briefing from this video on the installation.

Setting Up Your B4X Development IDE - Once Off

1. In your Windows PC, create a folder on your C drive, named B4J.
2. Create three sub-folders inside this B4J folder named libraries, shared and workspace.
3. Download and install B4J (follow the installation instructions on the page until Step 3).
4. Download and unzip BANano.
5. Copy the contents of the BANano Library folder to your C:\b4j\libraries folder.
6. Copy the contents of the BANanoServer Library folder to your C:\b4j\libraries folder.
7. Download and copy the contents of these folders repo to C:\b4j\workspace folder. Unzip the BANanoVuetifyAD3.zip file.
8. Download and copy the contents of these folders repo to C:\b4j\libraries folder.
9. (Optional) Download and unzip the Kitchen Sink Demo WebApp to your C:\b4j\workspace folder.
10. (Optional) Download and unzip the BANanoServer Kitchen Sink Demo WebApp to your C:\b4j\workspace folder.
11. Open the B4J App and on the B4J IDE, click Tools.
12. Click Configure Paths, browse to the location of javac.exe and ensure it's set, usually its C:\Program Files\Java\jdk1.8.0_281\bin\javac.exe.
13. Click and browse to the location of your additional libraries, this would be C:\b4j\libraries.
14. Click and browse to the location of your shared modules, this would be C:\bj4\shared.
15. Click OK.

When this is done, you are ready to develop your first BANanoVuetifyAD3 WebApp, but then you need to install a webserver to your PC. There are various options to do it.

You can use IIS, or laragon or USB WebServer or XAMP or WAMP, etc. The provided template here is based on publishing to laragon. If you use another development webserver, remember to change the publish path to point to an existing folder on your PC.

Compiling the BANanoVuetifyAD3 Dependency - Once Off

In some instances, the BANanoVuetifyAD3 library does not work well first time out of the box in other computers. To ensure that people have a smooth ride with the library, the complete source code of the library has been made available, and one just needs to run the source code to generate something called a b4xlib (library).

• In the workspace folder, open the BANAnoVuetifyAD3.b4j project by double clicking on it. This will open the b4j IDE.
• Press F5 to run the project to create the b4xlib (library) that will be used to create our apps.

Using the Code

In this next step, we will create a basic Vuetify webapp with a drawer, a navigation bar and a couple of pages. Fortunately, a template has already been built for us to do this. We just need to activate it and start using it.

In the B4J IDE, click on File > New > BVAD3

In the prompt screen, enter the name of your project and click OK.

This will create a folder and then the project files. The IDE will be updated with tabs that will show the code created with our template.

In the Main Module, we have some code, to initialze the app and then create the various pages for our app. For this example, we will use the router-view.

#IgnoreWarnings:12, 15
Sub Process_Globals
    Public BANano As BANano 'ignore
    'this is the folder on your development server.
    Public AppName As String = "mybvad2webapp"
    Public AppTitle As String = "My BVAD3 Web App"
    Private Publish As String = "C:\laragon\www"
    Public Version As String = "1.00"
    Public ServerIP As String
End Sub

In the above code, we define the AppName, the AppTitle, Publish folder and Version of our app. When we execute our code (pressing F5), the generated CSS, HTML and JavaScript will be published to:

c:\laragon\www\mybvad2webapp

The AppTitle will show in the navigation bar of our app. We will run this from our web server.

To publish our generated app, one just needs to upload the contents of the mybvad2webapp to their publicly available webserver.

What Happens When One Presses F5?

First, the code in Main > AppStart is executed. This initializes the BANano Transpiler, which converts the B4X syntax, i.e., VB like syntax to CSS, JavaScript and HTML.

BANano.Initialize("BANano", AppName, DateTime.now)
BANano.HTML_NAME = "index.html"
BANano.Header.Title = AppTitle

BANano.Header.AddFavicon("./assets/favicon.ico", "16x16")
BANano.Header.AddAppleTouchIcon("apple-touch-icon.png", "180x180")
BANano.Header.Author ="Anele Mbanga (Mashy)"

The BANano.Header assignments, relate to the index.html scripts that apply to the headers.

We have also indicated to the transpiler that it needs to consolidate the CSS and JS files.

#if release
        BANano.TranspilerOptions.MergeAllCSSFiles = True
        BANano.TranspilerOptions.MergeAllJavascriptFiles = True
        BANano.TranspilerOptions.EnableLiveCodeSwapping = False
    #end if 

However, if you skim through the code, you will not see any CSS and JS files. This is because these files have been combined into the library that you created before, called BANanoVuetifyAD3. You might have noticed code like this on that source code:

BANano.Header.AddJavascriptFile("alasql.min.js")
    BANano.Header.AddCSSFile("materialdesignicons.min.css")
    BANano.Header.AddCSSFile("roboto.min.css")
    BANano.Header.AddCSSFile("info-box.min.css")
    BANano.Header.AddCSSFile("flowy-vue.css")
    BANano.Header.AddCSSFile("helpers.min.css")
    BANano.Header.AddCSSFile("vue-form-wizard.min.css")
    BANano.Header.AddCSSFile("vjsf.css")

The code above indicates that BANano should find the css and js files indicated and then add them to the <script> tags on the index.html page. By using this inside the BANanoVuetifyAD3.b4xlib, we abstract most of these features, so that you don't worry about them.

After Main > AppStart finishes executing, it calls BANano_Ready. BANano_Ready is like your normal document_ready in JavaScript.

Sub BANano_Ready
    pgIndex.Init
End Sub

This then calls pgIndex.Init. This is where the magic happens. pgIndex is a code module. In b4x, you can have both code modules and class modules. Class modules must be initialized and code modules can be called anyhow.

Sub Init                    'ignoreDeadCode
    'initialize the app
    vuetify.Initialize(Me, Main.AppName)
    'set the app title
    vuetify.SetData("apptitle", Main.AppTitle)
    'load the base layout
    BANano.LoadLayout(vuetify.Here, "baselayout")
    
    'set the list options
    drwlist.SetOptions(drwoptions)
    '
    'tell instance about the router view
    vuetify.BindRouterView(approuterview)
    'tell instace about the progress loader
    vuetify.BindProgressLoaderOn(appbar)
    
    'add other route component pages
    AddPages
        
    'add items to the drawer at runtime
    vuetify.OnCreated("oncreated", Null)
    'render the ux
    vuetify.Serve
End Sub

In the Init call above, we initialize a Vuetify instance, perform a few operations and then call .Serve to run our app. One of the interesting calls this sub routine does is to call BANano.LoadLayout.

You will recall the LoadLayout statement from the previous post about B4J. What we have done in this case is to use our own created components. These are internal to the BANanoVuetifyAD3 library. One is able to access layouts from the Designer menu item

One can select any component from the layout and then be able to view its properties.

To add components, we have on the Designer, clicked Open Internal Designer and on a new layout, clicked Add View > CustomView and then selected the component we needed and it was added to the layout. We then placed the components inside each other and created this base layout.

Just like in the previous article, we also Generated Members for our components, this ensured that they were defined globally for our app as done by Process_Globals.

'Static code module
Sub Process_Globals
    Public vuetify As VuetifyApp                'ignore
    Public BANano As BANano                     'ignore
    
    'PAGES
    Dim pgViewHome As ViewHome
    Dim pgViewOne As ViewOne
    Dim pgViewTwo As ViewTwo
    Dim pgViewLeadlet As ViewLeaflet
    '
    Private appbar As VAppBar                   'ignore
    Private appbartitle As VToolBarTitle        'ignore    
    Private appdrawer As VNavigationDrawer      'ignore
    Private apphamburger As VAppBarNavIcon      'ignore
    Private applogo As VImg                     'ignore
    Private appmain As VMain                    'ignore
    Private approuterview As VRouterView        'ignore
    Private appsnack As VSnackBar               'ignore
    Private appspacer As VSpacer                'ignore
    Private apptransition As VTransition        'ignore
    Private btnLogOff As VFAB                   'ignore
    Private drwlist As VList                    'ignore
    Private drwoptions As VListOptions          'ignore
    Private inspire As VApp                     'ignore
End Sub

Our page has a hamburger button, which is meant to toggle our navigation drawer. This is possible with the click:stop event, that has been registered for the hamburger.

Private Sub apphamburger_ClickStop (e As BANanoEvent)            'ignoreDeadCode
    appdrawer.ToggleOnApp(vuetify)
End Sub

Creating Other Pages

To create the other pages, we used class modules by clicking Project > Add New Module > Class Modules > BVAD3 Page. We then add our code on top of that. Each page is based on the vue component route.

We first need to define it, e.g., in the ViewHome class module.

Public home As VueComponent

Then, we initialize it with:

'initialize the component
    home.Initialize(Me, name)

And then, we add it to the vuetify instance with:

vuetify.AddRoute(home)

After we initialize the page, we need to create the <template>, we do this by using the abstract designer and creating our "view" (baselayout example above). Internally, this also creates event bindings and registers "methods" for the various callbacks. Internally, each VueComponent generates this type of code.

'return the component
Sub Component As Map
    Dim sTemplate As String = Template.ToString
    sTemplate = $"<span>${sTemplate}</span>"$
    sTemplate = sTemplate.Replace("v-template", "template")
    sTemplate = sTemplate.Replace("v-td", "td")
    Dim cb As BANanoObject = BANano.CallBack(Me, "returndata", Null)
    opt.Put("data", cb.Result)
    opt.Put("methods", methods)
    opt.Put("computed", computed)
    opt.Put("watch", watches)
    opt.Put("props", mprops)
    opt.Put("filters", filters)
    opt.Put("template", sTemplate)
    opt.Put("components", components)
    opt.Put("name", mName)
    Return opt
End Sub

where the template HTML is derived from the layouts we create and then the rest is done by the BANanoVuetiftAD3 library for us. Unfortunately, explaining how the whole BANanoVuetifyAD3 library does what it does is beyond the scope of this introduction.

Running the Vuetify WebApp

As everything has been built with the provided template, pressing F5 will run the b4x project. This will fire up the transpiler which will generate the CSS, HTML and JavaScript source code for your app and publish it, to the specified publish folder of your choice. Automatically, your default browser will be opened too.

On success, what you see in Figure 0 will be shown.

Points of Interest

The BANano library was never built for Vuetify like experiments, so ensuring that everything works seamlessly, a lot of trial and error took place. As the name says BANAnoVuetifyAD3, it all indicates the 3^rd iteration, which eventually worked. First, I learned VueJs and then learned Vuetify and I must say not everything has been fully implemented.

The good thing is we have been able to explore CRUD functionality with MySQL, SQLite, MSSQL and CouchDB and IndexedDB. Working with the jetty server was also an eye opening and also challenging, but we managed it.

I find Vuetify awesome and enjoyable to use and using current existing skill set like VB to create WebApps is cool, thanks to BANano. I hope people could find this library useful as I will be discussing more about it in future posts.

There is also another video here that can provide more light about the workings of this b4x library.

Enjoy!

History

• 5^th December, 2021: Initial version