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
Upcoming Updates: Taking & Saving Pictures with the Camera

The camera component has been updated: 1. one is able to select the camera to use from a list of available cameras on your device. 2. You can either flip the camera in case you have a front / back camera

The example on the kitchen demo saves the taken picture to the ./assets folder.


1635854025389.png
 

Mashiane

Expert
Licensed User
Longtime User

 
  • Like
Reactions: LJG

Mashiane

Expert
Licensed User
Longtime User
IMPORTANT NOTIFICATION -

The code below is in BANanoVuetifyAD3.Main.App_Start


Please note that after careful consideration, the BANanoVuetifyAD3 library will be in "debug" mode. To explain, lets see this image.

1636579546458.png


vue.js is the DEBUG mode of Vue.JS whilst vue.min.js is for PRODUCTION.

With debug mode, its easy to debug ones app and see where problems are. In most cases, the production version will NEVER tell you where problems are with your app. So from now on the DEFAULT mode is DEBUG MODE.

This as a result will log stuff in your web console.log. When happy with your app, comment the DEBUG mode (vue.js) and uncomment the PRODUCTION mode (vue.min.js), run the library (IN B4J RELEASE MODE) to produce he b4xlib and then PRODUCE your app.

PLEASE NOTE: In DEBUG mode, some warnings are not to cause ALARM, as long as your app works well and as expected in both DEBUG & PRODUCTION versions, you have nothing to worry about, just ignore the warnings. ONLY and ONLY ask for help IF and ONLY IF your project does not work and you don't know how to solve the problem.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
A simple Excel Reporting Example that still works..



BANanoXML is internal to BVAD3 however these examples here still apply.

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Last edited:

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
What's Coming - Pre-App Progress Loaders

T
hese help show a progress loader before the app is rendered.

Found some nice spinners here, https://www.cssscript.com/9-css-only-loaders/

Actually there is a lot on the net. We have applied this for both normal and BANanoServer apps, so far looking good.

In BANanoServer Apps

1. Add this to BrowserIndex.Initialize

B4X:
BANanoShared.AddLoader

2. Add this before Vuetify.Initialize

B4X:
BANanoShared.ShowLoader

3. Add this after Vuetify.Serve

B4X:
BANanoShared.HideLoader

In normal apps...

1. Add this before Vuetify.Initialize

B4X:
BANanoShared.AddLoader
BANanoShared.ShowLoader

2. Add this after Vuetify.Serve

B4X:
BANanoShared.HideLoader
 
Top