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 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 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 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.

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:
Click to expand...
Mashiane

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

Mashiane

Expert
Licensed User
Longtime User

[BANanoVuetifyAD3] Deploying BANanoServer on Windows HTTPS

Ola Remember: The jetty webserver is a self encompassing webserver. These is no need for laragon development webserver here. This is detailing a step by step process on how we have managed to make this work without hurdles. Step 1: Download the ABKeyStoreSSL libraries to your external...
www.b4x.com www.b4x.com

[BANanoVuetifyAD3] Deploying BANanoServer on Windows HTTP

Ola The BANanoVuetifyAD3 BANanoServer kitchen sink was updated yesterday to favour HTTPS connections. This tutorial is necessary due to that otherwise if you have the old version of BVAD3 BANanoServer, it will run without issues. NB: Please note that you don't need the ABJSKStore for this...
www.b4x.com www.b4x.com
 
  • Like
Reactions: LJG
Mashiane

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

Mashiane

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

[BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

*START OF NOTICE As of 02 FEB 2021, this project is is no longer maintained as it has given birth to BVAD3. This project was a joy to create, however like everything that has a start and an end, its time to move on and evolve. BVAD3 is faster, more simpler to implement and takes advantage of...
www.b4x.com www.b4x.com


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

[BANanoOXML] Client Side Excel Report Generation

Yippie!! In case you need something like this one day, so here is my BANano implementation of it for y'all. With this one is able to CREATE Excel workbooks with multiple sheets. One is able to also set styles e.g. bold, italic, forecolor, add borders. Once generated, the workbook is...
www.b4x.com www.b4x.com
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

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

These 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
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
Share My Creation [BANanoVuetifyAD3] WhatsApp CRM
Replies
2
Views
3K
Dave G
D
Mashiane
  • Article
Share My Creation BANanoVuetifyAD3 - New Form Builder Concept
Replies
18
Views
5K
joulongleu
J
Mashiane
Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
7 8 9
Replies
163
Views
50K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [BANAnoVuetifyAD3] Creating CRUD based WebApps free eBook (for those in a hurry)
2
Replies
25
Views
7K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [BANanoVuetifyAD3] Organogram Lite FireBase WebApp Source Code @ $11
Replies
12
Views
3K
Sergey_New
S
Top