B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Ola

**************************************************
Feb 2024: BVAD3 RoadMap

[BANanoVuetifyAD3] 2024 RoadMap

Hi Fam BVAD3 is currently based on VueJS 2 and Vuetify 2. As you might be aware, VueJS 3 is now the standard and VueJS 2 has come to end of life when it comes to support. Vuetify 2 will also be coming to end of life when it comes to support. There has not been any upgrades to BVAD3 to work...

www.b4x.com

*************************************************

Download Additional Libraries
Download BANanoVuetifyAD3Core Library OR Download BANanoVuetifyAD3 Library
Download Kitchen Sink WebApp (Optional - useful for Learning how this works)
Download BVAD3Builder (Optional - useful to trim your final package)

Full Install Instructions on Github

What's New

To use this free and open source B4J library, you need BANano.

IMPORTANT: BANano License

Join Us

Telegram: https://t.me/bananovuematerial
Twitter: https://twitter.com/mashymbanga
Discord: https://discord.gg/ys8stGgWCU
YouTube: Mashy Teaches Video Series
B4x Blog: Mashy Teaches BVAD3 - New Series
Full Demo: New Awesome Kitchen Sink

Notable Forum Members Contributions

@Erel : Obviously
@alwaysbusy : valuable advice etc, BANano (incl. adjustments that support BVAD3)
@LJG : BANanoServer jRDC2, best overall bug finder
@aeric: Recommendations & Enhancements etc
@Star-Dust : Small solutions to development hitches etc
More...


What's Next?

You will find the most up to date content from this post onwards

Testing DataBase Connectivity (PHP)

The kitchen sink now has connectity testing for the various backends. To ensure that your app will work, you can check if your back-end is accessible.

MySQL
SQLite
MSSQL

WebServers You Can Use

Laragon - publish to c:\laragon\www

[WebApps] Using Laragon as your development web server

Ola I just ran into this link, https://www.keycdn.com/blog/web-development-tools And besides XAMPP, which I have been using for my personal web development projects, there is Laragon. With XAMPP, I remember I had to manually edit my php.ini file to locate the extension for SQLite3 to be...

www.b4x.com

[BANanoVuetifyAD3] Using a real device to debug your localhost running webapp

Hi there You are developing your app and want to see it running on your device instead of your machine from localhost. The easier method: 1. Enable hotspot on your phone. 2. Connect your PC to your phones hotspot. 3. Execute cmd > ipconfig > note the IP4 IP Address 4. Enter this IP address on...

www.b4x.com

USBWebServer
IIS - Publish to C:\inetpub\wwwroot
XAMPP - change your publish folder to use // instead of \

You can find more information here related to IDE Setup

Enjoy

PS: Log Warnings & Compilation Errors

1. Please check the pre-run logs. In most cases modules with warnings will have an underline. Warning, 9, 10, 11, 12 are normal, don't be scared.

2. manifext.txt file not found - Download the library source code and RUN to recompile on your PC. "Do not Compile to Library"
3. Do a HARD REFRESH of your browser.[/B]

 

[Mashiane]

Part 1

The skeleton app

 

[Mashiane]

Part 2

1. Creating the navigation bar, adding a hamburger button, a spacer and a button.
2. Binding events to the app for the buttons & using generate members of the abstract designer
3. Executing code on button click

 

[Mashiane]

Part 3

This third tutorial deals with how we can get started with BANanoVuetifyAD3 to create web apps: Using individual blocks, we build and run our app. We create a dynamic title for our toolbar title and change this on button click by updating its state.


Enjoy!

 

[Mashiane]

Part 4

We start with a blank template and create routers, load layouts to the router components and link these to the vuetify app. For more details of how routers are used, see the MealPrep app in the Demos folder.

 

[Mashiane]

Part 5

We continue from part 4 and now add a menu to our v-app-bar with transitions. We add an active class to the menu and a background image to the v-app-bar


Enjoy!

 

[Mashiane]

Part 6

We continue from part 5 and add a logout button and an empty navigation drawer with a background image. We will add navigation items in part 7.


Enjoy!

 

[Mashiane]

Part 7

We continue from part 6 and add a a list to the drawer, use the same links we created the menu items with. We then use a v-for loop and binding to ensure each drawer item can navigate to its page.


Ta!

 

[Mashiane]

Part 8

We take the compiled output from Part 7 and upload it to our web-server and then run google light-speed on it.

 

[Lello1964]

Thanks Mashy,

now I understand how to do it.

Without latest tutorial I couldn't have done anything


Many many thanks again.

Raffaele

 

[Mashiane]

Part 9

We create avatars, one inside the navdrawer and others types on 1 page.



Enjoy!

 

[Mashiane]

Part 10

We create different alerts and toggle visibility via a click event.


Enjoy!

 

[Mashiane]

Part 11

We create dialog boxes and snackbars that have dynamic content changeable at run time.

 

[Lello1964]

Data Table ?

 

[Mashiane]

Data Table ?

I'm sure I will figure a good version for the abstract designer. Due to its complexity, it needs to be an extra custom view.

Ta!

 

[Mashiane]

Part 12

We create an input dialog prompt.



Enjoy!

 

[Mashiane]

Part 13

We create v-text-fields, get their contents using state management and fire some icon click events

 

[Mashiane]

Part 14

Incrementing and decrementing badge values and showing user status through badges

 

[Mashiane]

Part 15

Instead of creating multiple layouts, we re-use our layouts and use BANanoLoadLayoutArray to load, extract and update them via code.

 

[Mashiane]

Part 16

We create a date and a time picker. We set some attributes for the v-text-fields to make them round, filled etc.