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

Ola

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



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.

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.[/B]
 
Last edited:

Mashiane

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

Mashiane

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

With 6.05 my VElement.Bind also stopped working is there a way to write those in another way now ?
B4X:
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 ?
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Please see this post


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

Mashiane

Expert
Licensed User
Longtime User
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 [email protected], 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.
 

Star-Dust

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