B4J Tutorial [BANanoVueMaterial] BVMDesigner - Mock.Compile.Publish

*START OF NOTICE

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

Ahoy!!!

*END OF NOTICE

Ola

You can subscribe to Telegram Channel here

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.

DO NOT FOLLOW THE APPROACH USED IN CREATING THE BANANOVUEMATERIALDEMO WHEN CREATING YOUR APPS. THAT METHOD IS NO LONGER FEASIBLE.

NB: Set your browser to 80%

Newsflash!!!

Download BANanoVueMaterial 3.08+
Download BVMDesigner eBook (draf)

This thread is specifically about using the BANanoVueMaterial Designer 3.

I'm working on an eBook about using the designer. So far it is a draft, however if you are interested to check it so long, here is it. Feedback will be welcomed and also stuff you would like to see in it.

I do greatly recommend that you go through the videos posted in the first post here as they will brief you about how the designer works, this also helps you as you go through the eBook.

The designer helps one to 1. Mock an app then 2. Compile the app in B4J (after copying the generated source code) and then you can 3. Publish your app on the interweb.

Some facts about BANanoVueMaterial.

BVM (BANanoVueMaterial) is based on Vuetify, wrapping Vuetify for BANano. Vuetify is based on VueJS. Try and explore VueJs and Vuetify from their respective sites. I will make a silly assumption that you are prepared to also do some ground work but will do my best to make this easy peasy.

The Designer is meant for you to mock your app by dragging and dropping components on a stage, change the properties of that component in the property bag, this generates the needed B4X source code and also the HTML source code. The HTML source code is usable if you want to write your app via the Vue CLI, whilst the B4X code you can only use it in a B4J Project.

We will gradually work from one example app here with the designer and we will create some database based webapps here.

Welcome to the world of the BANanoVueMaterial Designer!!

Ta

 

[Roberto P.]

you are doing a really great job ...
I have a question: can the connection to the various databases only take place with Aragon or can the available libraries be used?


thanks

 

[Mashiane]

can the connection to the various databases only take place with Aragon or can the available libraries be used?

Thank you, appreciated, laragon is only a web server and its just my choice for development purposes, the connection libraries will work on any web server as long as its set up for PHP and or SQLite and or MSSQL PHP PDO.

I have successfully deployed on IIS with MSSQL and PHP PDO before for numerous clients.

 

[Mashiane]

Expense Tracker Project Component Files

Get all the project components files that you can import to the designer here.

 

[joulongleu]

MSSQL test ok, great work is almost done

 

[Mashiane]

Mock.Compile.Publish Expense Tracker with MySQL as BackEnd

Recommended implementation

1. Create your MSSQL database externally from B4J
2. Update the config.php file (Files Tab in B4J) with connection settings to your MSSQL backend.

This demo follows on our previous tutorial of the expense tracker, but here we are using MySQL as a backend. One follows the same methodology as before but then for compilation activates MySQL as a backend. This generates the needed source code for the app.

 

[Mashiane]

Important Update about BVM

 

[Mashiane]

Mock.Compile.Publish a Login/Sign In Modal (Dialog)

NB: Component File to Input Attached to reproduce.


1. Create a project the normal way you have been.
2. Import the attached file.

3. The designer ouput should look like this. You can then follow the instructions to create the modal form.

 

[Mashiane]

Mock.Compile.Publish - Contact Us Page

Import the attached components file to your project.

 

[Mashiane]

Mock.Compile.Publish - Change Password Dialog Part 1


In this demo we are creating a change password dialog. This has 3 password input controls. For each we specify that the value should be encrypted, we also check matching and non-matching.

Component file attached!

 

[Mashiane]

We are making working with the designer to import and convert database tables to data-tables a little easier.

Core 4.20 out with this important update.