B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano


As of 02 FEB 2021, this project is is no longer maintained as it has given birth to BVAD3.

This project was a joy to create, however like everything that has a start and an end, its time to move on and evolve. BVAD3 is faster, more simpler to implement and takes advantage of the Abstract Designer use.

Subscribe to Telegram Channel

[BANanoVuetifyAD] Vuetify WebSites & WebApps with BANano for Dummies



UPDATE 24 October 2020: The recommended methodology to create BANanoVuetify WebApp is being discussed here:
MealPrep. This covers most of what VueJS + Vuetify is all about in terms of the internals.

Whilst you can use the designer to create your UX, you need to separate your concerns when creating the app just like its done on the MealPrep by using components and routers for the pages.



BANanoVuetifyAD - Prelease Playlist on Youtube
BANanoVueMaterial (Vuetify) Playlist on Youtube

2020-05-20 Update: Important Update

BANanoVueMaterial Designer Usage - Mock.Compile.Publish

BANanoVueMaterialCore (pure vuetify without extensions)

Exploring Components & Router Basics

How to ask questions, request help, report bugs and request enhancements + Telegram Channel

Thanks to everyone who has been playing with this and highlighting issues and requesting features. You are stars!

*** IMPORTANT: Migrating to the new version

Word. Moving from VueMaterial to Vuetify was inevitable and whilst both are Vue Material based frameworks, Vuetify has more strengths. If if was going to be possible, we would not be having a migration guide, however things changed and enhancements happened and some code rewrites took place. When doing the transition from the VueMaterial to Vuetify codebases, we tried to make the code transition to be as smooth as possible, thus our migration guide is as small as possible. We did not want to dictate how to use the lib, so we removed some things that were hard coded and fixed. This was specific to the side drawer. To test the migration, the old examples were converted to new examples (see below) and all of them work.

BANanoVueMaterial is complete open source, so this means you can use it to your hearts content and adjust it and make it your own. If you enhance, send us word, we will merge. Make the code simple and comment it as much as you can. I cannot over-emphasize that Vuetify is LARGE, so check their website on how components are created and used to learn stuff. Do enjoy. TheMash. #IAmLovingThis

BANanoVuetify (recommended for new projects & migration notes attached)

You can track our progress from here. All the components that we got from VueMaterial exists in Vuetify and more!!!

  • Copy all the files in the 1. External Libraries folder to your B4J external libraries folder
  • If you want to explore the BANanoVuetify source code, open and run the project in 2. Library
  • If you want to explore all the components in this version, open and run the project in 3. Demo
  • You can also explore other specific examples from the 4. Examples folder
Live Preview

Tutorials (New)


NB: Download and Import the Project Components files for the Expense Tracker here.

1. Expense Tracker with BANanoSQL

Expense Tracker Part 1
Expense Tracker Part 2
Expense Tracker Part 3
Expense Tracker Part 4
Preparations for Part 5
Expense Tracker Part 5.1
Expense Tracker Part 5.2

2. Expense Tracker with SQLite (you need to understand all of 1. Expense Tracker with BANanoSQL first!)

Making your app use SQLite as a backend
Mock.Compile.Publish Expense Tracker with SQLite as BackEnd Full Implementation

3. Expenses Tracker with MSSQL (you need to understand all of 1. & 2. above first!)

Mock.Compile.Publish Expense Tracker with MSSQL as BackEnd

4. Expense Tracker with MySQL (you need to understand all of 1. - 3. above first)

Mock.Compile.Publish Expense Tracker with MySQL as BackEnd

NEW NEW NEW!!!! Handling Events

Developing a grid with the Designer
Developing forms with the Designer
Designing text field controls with the Designer
Designing text area controls with the Designer
Designing password controls with the Designer
Designing images with the Designer
Designing file input with the Designer
Designing buttons with the Designer
Designing checkboxes with the Designer
Designing switches with the Designer
Designing icons with Designer
Designing labels with Designer
Designing sliders with the Designer
Designing select, combo and autocomplete with the Designer
Designing radio boxes with the Designer
Designing date & time pickers with the Designer (NB: functionality works on your app)
Designing a parallax with the Designer
Designing a container with the Designer
Designing the appbar, toolbars and systembar with the Designer - Part 1
Designing the appbar, toolbars and systembar with the Designer - Part 2
Drag n Drop Menu - Part 1
Drag n Drop Menu - Part 2
Drag n Drop Carousel
Drag n Drop Dialog
Drag n Drop Rating
Drag n Drop SpeedDial
DataTable multi selects
Invisible File Selector
DataTable GetItemKeys
Drag n Drop Chips
Drag n Drop Badges
Drag n Drop Avatars
Exporting Component Schemas (Multi Development Mode)
Importing Component Schemas (Multi Development Mode)
Drag n Drop Lists
Drag n Drop Tabs
Drag n Drop Stepper
Drag n Drop ExpansionPanels (Accordion)
Drag n Drop Page
Setting Project Properties
Reading Text files (without upload to server)
Reading Excel files (without upload to server)

Reporting (New)

Excel Client Side Reporting with OXML

Example Projects

Hello World
Navigation (1 or more pages using v-show directive)
Login Screen
User Registration Screen
Expenses.Show - MySQL+PHP+ChartKick CRUD
Form Utilities - BANanoSQL CRUD
Calculations - using watch directives

IMPORTANT: Asking Questions about BANanoVueMaterial

1. Please do not ask questions on this thread as this is about updates and new developments about BANanoVueMaterial.
2. When asking a question, please use the B4J Forum and prefix your question with [BANanoVueMaterial] Your Question
3. As the author of this lib, I would recommend that in the content of your question you also address it to myself with @Mashiane (this will also help me find and attend to your questions faster as it will show in my personal notifications)

Related Content

BANanoVue - a now updated CORE of BANanoVueMaterial
BANanoWired - a mockup framework build on BANanoVue (WIP)
BANanoPDFDesign - a creation based on BANanoVueMaterial for PDF reporting (WIP)
BANanoVMDesign - this intends to support BANanoVueMaterial design philosophy. (WIP)

Have fun and enjoy!

PS: BANanoVueMaterial uses an updated version of the BANanoPostProcessor library done by Kiffi.
Last edited:


Licensed User
Longtime User
A constant internet connection and working offline - without service workers turned on.

If your internet connection will always be on, it is recommended that you use the CDN versions of the resources used to with the library.

To do this.

Open the core library and in Main.AppStart i.e. Main module in AppStart sub

1. Constant Internet Connection (without service workers turned on)

1.1 Uncomment these lines

'BANano.Header.AddCSSFile("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css")
'BANano.Header.AddCSSFile("https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css")
'BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js")
'BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js")
'BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js")

1.2 Delete the rest of the lines that are adding stuff to the header e.g. AddCSS and AddJavaScript
1.3 Remove all the resources listed in the Files tab of your b4J project
1.4 In your projects using this library, comment this line out, BP.UnzipFonts in your project.

2. Local Resources for offline usage (without service workers turned on)

1.1. Ensure the resources referenced here exists in the Files tab of your project and leave the lines above in 1.1. commented.


Turning Service Workers On (offline usage)

Turning service workers on ensures that your resources are available and your app can work offline. At the moment this is unstable when consolidated with BVM tests. More tests are being done to debug the issue.

Last edited:


Licensed User
Longtime User
IMPORTANT UPDATE : Core 4.06 Maintenance Update

1. The library with extensions has been split to Core + Extensions.
2. Extensions have their own Source + Demo
3. Compiled versions of the Extensions are in the External Libraries folder and source code on 2.1 Extensions
4. The Demo is the Core Demo
5. The Libraries folder is the Core Library
6. The Designer is based on the Core + BVMConnection + BVMDevice + BVMPrism
7. All examples have been updated to use the Core and Extensions where necessary
8. A Backends folder has been added, this has installation files for MSSQLE usage
9. To test of your webserver will work upload the contents of Test your WebServer


This is the list of existing extensions

Last edited:


Licensed User
Longtime User
Abmaterial has integrate debugger
ABM is server side and can use the B4J debugger because the .jar must be running to let the ABM app work. The B4JS part of ABM (comparable with what BANano does) is browser side so it can not use the B4J debugger eighter. Once the Transpiler has done its thing, B4J is no longer needed to run a BANano app. In B4JS & BANano, the browser and its Developer Tools are your best friends.

That is why the hybrid mode (BANano + BANanoServer) is much more powerful than e.g. BANano + PHP in development as it can, just like ABM, use the B4J debugger for the server side.

For BANano 5, I'm working on Live Code Swapping that should help and will be closer to how other B4X programming works, but e.g. putting a break in a method is never going to be possible as the webapp never goes through the B4J code, but through its Transpiled javascript. See for more info: https://www.b4x.com/android/forum/threads/banano-live-code-swapping-in-v5-preview.118053/



Licensed User
Longtime User
What is the best way to debug Banano apps?
I kindly request that you please start a new thread next time when you want to ask a question. This thread is specifically for posting about BVM. The response from @alwaysbusy is such a crucial point and rather deserves its own thread than inside here. Please understand.

ABM is server side and can use the B4J debugger
Thanks @alwaysbusy, this is beautiful news for BANano 5.


Licensed User
Longtime User
Upcoming Updates:

1. We have redesigned the toolbox so that "My Components" are just next to the items and no longer down the toolbox. This makes good use for a longer list of components.


2. Due to case SensiTivity of javascript, we have fixed some bugs in the code generated by the designer for Data Tables. Most things are lowercase.
3. When one changes an option in the designer, e.g. turn a switch on, update text (and press tab to trap the change event), the property bag is automatically updated and the stage refreshed taking care of your changes.


Licensed User
Longtime User
Upcoming updates... 4.10

1. If one has a required field and "forgot" to enter the error text property, this is updated based on the provided label. See the property bag in this instance.


Activate the control from the 'My Components' list and then save the control from the property bag.

2. In the designer, required fields are automatically marked as being in an "error" state. This gives a guideline for all your required fields. See above.

3. Button actions have been increased, for example, we have added "Contact Us" and "User Credentials". Contact Us provides functionality to send an email about the contact us information entered. This expects to get the details from a map variable that will have a fullname, an email address, telephone and comment.


This in essence generates this source code for the button click event.


Explaining Record.get(?)

For each specified ?, one needs to provide the v-model /id of the textbox that you had already created on your page to get the content. As an example...

5. One has created some controls in the page and gave them names, so on the B4X generated code, you are now provided extra code to read the form contents, should you need these after .GetData. These are however external to the .GetData call as there could be a variety of controls on your page.


6. Update to Project Properties

To be able to send emails, the project details should be updated to indicate the "from", "to", "cc" (if required) email addresses. If you are using gmail, one needs to turn on a settings to use gmail from less secure apps.


If you are also using laragon to test, you can also set laragon to send emails (after turning the above setting on). Set up the mail catcher (optional) and mail sender, by specifying your email address and password and run test email. when successful, this will send an email to your gmail account.


7. Sending emails inside BANAno.

We are using this PHP script to send emails.

#if PHP
function SendEmail($from,$to,$cc,$subject,$msg) {
    $msg = str_replace("|", "\r\n", $msg);
    $msg = str_replace("\n.", "\n..", $msg);
    // use wordwrap() if lines are longer than 70 characters
    $msg = wordwrap($msg,70,"\r\n");
    //define from header
    $headers = "From:" . $from . "\r\n";
    $headers .= "Cc: " . $cc . "\r\n";
    $headers .= "X-Mailer:pHP/" . phpversion();
    // send email
    $response = (mail($to,$subject,$msg,$headers)) ? "success" : "failure";
    $output = json_encode(array("response" => $response));
    header('content-type: application/json; charset=utf-8');
#End If

This expects the actual www address for php and not localhost. So your settings for PHP in BANano should be like:

BANano.PHPHost = $"http://${ActualIP}/${AppName}/"$

Where ActualIP could be www.mycompany.com and AppName is the sub domain where your BANano app will reside.

8. Password Encryption


For password components, one is able to encrypt them. This means the value that will be saved to the db will be encrypted. This is one-way encryption. This means to check a match against the db value, one needs to encrypt the value first and then compare it to the value in the database.

We have a hash type..


And the algorithm


I have attached the Change Password screen components herein. You can create a project and then import it to create your design.

9. Match to

For passwords & possibly confirm password, we have added a property to indicate the matching v-model for that component. In this instance, the confirm password should match to the new password v-model.


10. Updatable

The confirm password, should not be added to the database. So we need to turn updatable off. For anything else that should be written to the database, one needs to turn updatable on. This is for the code that is generated to change / update the code to add/update the db. We will depict it below.


For the change password screen, we want to encrypt the content before we add it to the db and do some verification. Let's look at the generated source code.

'INSTRUCTION: Copy and paste the code below this line to the "<Your Module>" module, in case you need this!
Dim scurrentpassword As String = Record.Get("currentpassword")
'Reference the BANanoEncrypt Library...
Dim bencrypt As BANanoHashes
'Initialize the encryption
bencrypt.Initialize(scurrentpassword, Main.AppName)
'Encrypt the content
Dim scurrentpasswordhash As String = bencrypt.Hash("SHA256", "b64")
'update the content
Record.put("currentpassword", scurrentpasswordhash)
Dim snewpassword As String = Record.Get("newpassword")
'Reference the BANanoEncrypt Library...
Dim bencrypt As BANanoHashes
'Initialize the encryption
bencrypt.Initialize(snewpassword, Main.AppName)
'Encrypt the content
Dim snewpasswordhash As String = bencrypt.Hash("SHA256", "b64")
'update the content
Record.put("newpassword", snewpasswordhash)
Dim sconfirmpassword As String = Record.Get("confirmpassword")
'Reference the BANanoEncrypt Library...
Dim bencrypt As BANanoHashes
'Initialize the encryption
bencrypt.Initialize(sconfirmpassword, Main.AppName)
'Encrypt the content
Dim sconfirmpasswordhash As String = bencrypt.Hash("SHA256", "b64")
'update the content
Record.put("confirmpassword", sconfirmpasswordhash)
'Check match
snewpassword = Record.Get("newpassword")
sconfirmpassword = Record.Get("confirmpassword")
If snewpassword <> sconfirmpassword Then
vm.ShowSnackBarError("The passwords do not match!")
End If
'Should not be updated...


  • Change Password.zip
    1.1 KB · Views: 159
Last edited:


Licensed User
Longtime User
Upcoming Updates 4.10

Things for Date Added, Date Updated...

At times you need to add text fields that will keep track of times and dates without using the time and date picker. We have 3 variants for this. 1. Date Now, 2. Time Now and 3. Date Time Now. These return yyyy-mm-dd and HH:mm and yyyy-mm-dd HH:mm respectively.

For this in each text field, you activate the needed option in the property bag.



Dim txtdatenow As VMTextField = vm.NewTextField(Me, false, "txtdatenow", "datenow", "Date Now", "", true, "mdi-account", 0, "", "The date now is required!", 0)
vm.Container.AddControl(txtdatenow.textfield, txtdatenow.tostring, 1, 1, 0, 0, 0, 0, 12, 12, 12, 12)

Updating the record to date now.

Dim sdatenow As String = Record.Get("datenow")
sdatenow = vue.DateNow
Record.put("datenow", sdatenow)


Dim txttimenow As VMTextField = vm.NewTextField(Me, false, "txttimenow", "timenow", "Time Now", "", true, "mdi-account", 0, "", "The time now is required!", 0)
vm.Container.AddControl(txttimenow.textfield, txttimenow.tostring, 2, 1, 0, 0, 0, 0, 12, 12, 12, 12)

Updating the record to time now.

Dim stimenow As String = Record.Get("timenow")
stimenow = vue.TimeNow
Record.put("timenow", stimenow)


Dim txtdatetimenow As VMTextField = vm.NewTextField(Me, false, "txtdatetimenow", "datetimenow", "Date Time Now", "", true, "mdi-account", 0, "", "The date time now is required!", 0)
vm.Container.AddControl(txtdatetimenow.textfield, txtdatetimenow.tostring, 3, 1, 0, 0, 0, 0, 12, 12, 12, 12)

Update the record date.time now

Dim sdatetimenow As String = Record.Get("datetimenow")
sdatetimenow = vue.DateTimeNow
Record.put("datetimenow", sdatetimenow)

Static vs Dynamic Controls

The designer has been creating static components in some respects. This has been due to the initialization of controls, for example

= vm.NewTextField(Me, True,

For dynamic components the True needs to be False. This activates the vue state. The designer will now generate all your components to be dynamic. This variable name is bStatic.


  • Date Times.zip
    768 bytes · Views: 154