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

Ola

The use of .BindVueElement & .BindState is now done automatically for components, there is not need to have that code anymore. As some of these lessons are old and were done before the automatic BindVueElement/BindState, where you find such code in the examples, comment it out / remove it. Also using the VueElement directly is no longer recommended as all it does is handle DESIGN TIME properties and CANNOT be used for any run-time updates. The Kitchen Sink WebApp is the most up to date repo that contains all examples about how the BVAD3 library works.

NB: PLEASE DO NOT ASK QUESTIONS ON THIS THREAD

FOR A MORE DETAILED SETUP PROCESS, PLEASE SEE THE GITHUB REPO README.

How to learn from the New Awesome Kitchen Sink to create your next powerful WebApp/Website

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
Hi there gang, it is with pleasure to release the first version of the BVAD3 API Documentation. Please check it out, send us your thoughts and feelings. Have fun,

NB: The API depends on a PHP Web Server running, you can get the latest BVAD3 version + Kitchen sink and run a local copy. GitHub + Netlify are for "static" websites, so you might not see the documentation there.



Access it here: https://magenta-vacherin-2f7e6b.netlify.app/#/
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
Version 7.33 is live and kicking...


Incwadi yamaBali has also been updated.

 

Mashiane

Expert
Licensed User
Longtime User
The Relationship between BVAD3 Custom Views, the API and the Low Code generated by Incwadi yamabali (Story Book)

The current up to date, single source of truth for everything BVAD3 is currently running in Netlify on this link, https://magenta-vacherin-2f7e6b.netlify.app/#/

and also GitHub via this link, https://mashiane.github.io/BVAD3-Kitchen-Sink---A-Vuetify-Project/#/

If you access this, you have the BVAD3 API, which details all the components, their events and methods. This can help you understand how everything works for each component.

1655911712533.png


Below is an example of the VTextField component...

1655911779644.png


In the abstract designer, the custom views uses "Display Name" for description, the low code produced by the Story Book is based on the custom view or / property bag.
Besides, custom views are just classes that one can initialize and set properties to. For the low code we use the "key" of each property in the Map to feed to the designer script.

Happy BVAD3 Coding!

The attached document can shed some more light.
 

Attachments

  • BVAD3 Relationship between Custom Views, API and Low Code.zip
    176.8 KB · Views: 1
Top