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]

IMPORTANT NOTE: Removal of Firebase Resources from BVAD3 Bundle

If your app uses Firebase, you need to add these resources in the Main module, before building the application.

'FIREBASE
    BANano.Header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/9.1.1/firebase-analytics.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/9.1.1/firebase-auth.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/9.1.1/firebase-firestore.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/9.1.1/firebase-messaging.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/9.1.1/firebase-storage.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/9.1.1/firebase-performance.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/9.1.1/firebase-database.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/9.1.1/firebase-functions.js")

As these are no longer included in the definition of BVAD3 projects library.

For more details, see on the kitchen sink

 

[Mashiane]

Version 6.05 - Update 5 - The Bye Bye BindState/BindVueElement Edition.

Download 605[5] Here
Download 605[5] Kitchen Sink Here

It is with pleasure to confirm that the BindState/BindVueElement debacle is not permanently sorted. You dont have to write any BindState/BindVueElement calls anymore as this is done automatically for you when these lines of code are executed

Vuetify.Serve

and

vuetify.AddRoute(?)

TERMS AND CONDITIONS

1. All components on your layout should be defined as variables in Class_Globals. You do this via 'Generate Members' in the Designer.
2. Setting default properties / adding items to components SHOULD BE DONE after .Serve or vuetify.AddRoute
For more details see these code modules
2.1 ViewADAutoComplete
2.2 ViewADBottomNav
2.3 ViewADCombo
2.4 ViewADDatePicker
2.5 ViewADMenus
2.6 ViewADSelects
2.7 ViewADSparkLines

etc etc

Actually, please just skim the Kitchen Sink Source Code to understand how the changes impact the new bindstate-less approach.

WHEN TO EXECUTE BIND-STATE?

There is however just 1 case where I called .BindState, its for one of the tables, the only reason for that is because the VForm is linked to the DataSource and DataTable. In such cases, .BindState has to be called after loadlayout.

CASES WHERE STUFF IS DONE AT DESIGN TIME

Steppers, Tabs

For now these have no easier way to create at run-time.

Have fun & Enjoy

 

[Mashiane]

[BANanoVuetifyAD3][BANanoServer] Version 6.05 [5]

Ola

Its happening!!! We finally sorted out the BindState/BindVueElement debacle. When this feature was requested, it seemed impossible. What BindState does is to ensure that ones event listeners are registered and BVAD3 does what it does, its re-active. Without executing such binding, your app is just a sitting duck. Previously BindState had to be done manually after "Generate Members" and now with BANanoVuetifyAD3 version 6.05 update 5, this is done automatically and internally. All you have to do it generate members for everything in your layout. That's it and no more writing line after line of .BindState/BindStateOnApp.

This updates bring everything we have done eversince the last update in August 2021, gradients, animation, pdf reporting, dynamic tables, sweet alerts and many many more.

Get yourself a free copy of BANanoVuetify today now. You can develop using PHP as a back-end / firebase or Jetty via the BANanoServer.

BANanoVuetifyAD3 Library Download
BANanoVuetifyAD3 Kitchen Sink Download
BANAnoVuetifyAD3 BANAnanoServer Kitchen Sink

PS: These all depend on the BANano Library by Alain, get it here.

BTW: We use the abstract designer and LoadLayout to create our UI, with very minimal coding.

 

[Mashiane]

As a first entry to What He/She did, here is SD's project. What He/She did will feauture peoples projects done with BVAD3.

What He/She Did [1] - Reserve A Place


Awesome stuff. Love it!

 

[Mashiane]

Reminder: vuetify.GetRefs is only usable on pages added with AddRoute ONLY and nothing else.

Fact: You can completely not use the DataSource on your projects but use the BANanoMySQLE, BANAnoMSSQLE and BANanoSQLiteE and BANanoALASQLE, the DataSource just abstracts these classes so that you dont code, however using the classes themselves provides the greatest of flexibility.

 

[Mashiane]

Installing Class Templates:

 

[Mashiane]

Once again, thanks to everyone who is supporting this project, whether they find bugs, give advice, send donations, I humbly thank you, its making a huge difference. I get to buy data to be able to do the explainer videos, get internet access to post lessons on the Mashy Teaches Series and also add valuable things. Enjoy!

 

[Mashiane]

You can also use this quick PayMe link: https://paypal.me/anelembanga?locale.x=en_US for your generous donations.

Thanks

 

[Mashiane]

BVAD3 CRUD Page Template

 

[Christian75]

Hi,

With 6.05 my VElement.Bind also stopped working is there a way to write those in another way now ?

VLabel1.VElement.Bind("style", "textcolor")

In the web page console log I see this printout, (and it worked in 6.04):
Uncaught TypeError: Cannot read properties of undefined (reading 'bind')

I know that for "style" I could use the Visual Designer but if I want to code it then how do I do it ?

 

[Mashiane]

Please see this post

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

Ola ************************************************** Feb 2024: BVAD3 RoadMap https://www.b4x.com/android/forum/threads/bananovuetifyad3-2024-roadmap.159326/ ************************************************* Download Additional Libraries Download BANanoVuetifyAD3Core Library OR Download...

www.b4x.com

As Indicated there, for applying classes and styles at runtime, use these calls

Classes & Styling

• ToggleClass
• AddClassRT (AddClass is for usage after BANanoLoadLayout only for DESIGN TIME)
• RemoveClassRT (RemoveClass is for usage after BANanoLoadLayout only for DESIGN TIME)
• AddStyleRT (AddStyleClass is for usage after BANanoLoadLayout only for DESIGN TIME)
• RemoveStyleRT

 

[Mashiane]

Morning yall. I kindly request that you please if you have ever donated or purchased any of bvad3 projects, to send me your last PayPal transaction number, your email address, b4x forum name, full name, to my email address mbanga.anele@gmail.com, I need to send you the source code for the chat module and the kanban board. Only people who are kind enough to action this request will receive the source as I won't include it on the normal channel. I thank you.

 

[Mashiane]

Announcements

The kitchen sink has been updated for anyone to play around with the KanBan board and also the chat box.

BANanoVuetifyAD3 V7.36 - New Awesome Kitchen Sink

BVAD3 Design System

mashiane.github.io

 

[Mashiane]

BANanoVuetify 6.05 Update 11 GPA is now available.

Get it here.

Thanks

 

[Mashiane]

Mashy Teaches V-Label

 

[Mashiane]

IMPORTANT NOTIFICATION

Please note that the BVAD3EDS project template is no longer compatible with BVAD3 605+, please follow the instructions on the first post of this thread on how to set up the new template and additional BVAD3 class templates.

 

[Star-Dust]

In the link to download BANanoVuetifyAD3, instead of the B4XLib library there are the compressed sources. Is it involuntary or it was done on purpose.
Do we need to import the sources?

 

[Mashiane]

it was done on purpose.

We have found out that due to different setups etc, in most instances, some people have experienced problems with the generated b4xlib, so downloading the source and compiling it themselves have helped, thus the permanent exclusion this time around.

 

[Mashiane]

We have updated the first post to include a video on Getting Started.

 

[Mashiane]

Version 6.05 Update 12 is now available. This addresses some bugs in :style and :class bindings. Copy contents of the External Libraries to your B4J external libraries folder and unzip and run the bvad3 zip file on the library folder to compile an updated bvad3 b4xlib.

External Libraries
Library