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
 
Last edited:

Roberto P.

Well-Known Member
Licensed User
Longtime User
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

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

Expert
Licensed User
Longtime User
Mock.Compile.Publish Expense Tracker with MySQL as BackEnd

MySQLExpenses.gif


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

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

SignIn.png


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

Attachments

  • SignIn.zip
    1 KB · Views: 372
Last edited:

Mashiane

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

Attachments

  • Demo Change Password.zip
    1.2 KB · Views: 373
Last edited:
Top