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

Ola

Getting Started

NB: IT IS IMPORTANT THAT YOU PLEASE RUN THE BANANOVUETIFYAD3 LIBRARY ON YOUR OWN DEVICE (DO NOT USE THE COMPILED B4XLIB OUT OF THE BOX),THIS WILL GENERATE THE B4XLIB FOR YOUR DEVICE.

IMPORTANT ANNOUNCEMENT : BindState / BindVueElement DEPRECATED



Please read my Article on Medium

1. Download and Copy these files to your B4J External Libraries Folder.
NB: It is greatly recommended that you Download the Library Source Code and run it from your PC Directly
2. Download this b4x template and put it in your B4J Internal Libraries Folder
3. Download and run the Awesome Kitchen Sink WebApp
4. Learn from Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
5. We also have the BANanoServer (jetty) version of the Kitchen Sink. See this link also https://www.b4x.com/android/forum/t...bsites-webapps-with-banano.124548/post-845410
6. Download test.sql to import with phpMyAdmin

BANanoDataSource



Tools

BindVueElement Builder

You also can

Explore the Awesome Kitchen Sink WebApp Online hosted on GitHub
Mashy Teaches BANanoVuetifyAD3 YouTube PlayList

Creating a new Project

3. In B4J, click File > New > BVAD3EDS to create a new project

1624754308034.png


What's Next?

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

For MySQL Back-Ends

Run the Connection Tester WebApp
https://www.b4x.com/android/forum/threads/banano-bvad3-php-connection-tester.131014/page-2

WebServers You Can Use

Laragon - publish to c:\laragon\www

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

BTW we are on Social Media

Join our Telegram: https://t.me/bananovuematerial
Twitter handle: @mashymbanga

Open Source Code (MIT License)

Here is the Library Source Code (THIS IS OPEN-SOURCE)
Here is the Source Code for the Extensions we have used

Freebies - BVAD3 Projects

Download

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.

1625825241311.png


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

Mashiane

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

B4X:
'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
 
  • Like
Reactions: LJG

Mashiane

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

B4X:
Vuetify.Serve
and

B4X:
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

Expert
Licensed User
[BANanoVuetifyAD3][BANanoServer] Version 6.05 [5]

BVAD3 BANanoServer 605[5].jpg


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

Expert
Licensed User
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.
 
  • Like
Reactions: LJG
Top