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

*************************************************

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

[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

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.

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]

 

[Mashiane]

The basics of creating a Single Page Application

 

[Mashiane]

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.

 

[Mashiane]

Upcoming Updates: QRCode

We have added a new Plugin, QRCode, this generates a QRCode based on the text you speciy. Any QRCode reader is able to read these. We intend to add a QRCodeReader for BVAD3 soon.

 

[Mashiane]

[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

[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

 

[Mashiane]

Version 6.05 Update 14 is available on Github

 

[Mashiane]

[BANanoVuetifyAD3] BANanoServer - DirectSQLite CRUD

Ola Download Successfully implement a direct SQLite connection for BANanoVuetifyAD3 BANanoServer SQLite and did some crud. This depends on BANanoVuetifyAD3 Version 6.05 Update 15. NB: This uses jSQL DataSource Connection Settings This shoul be uploaded soon...

www.b4x.com

 

[Mashiane]

[BANanoVuetifyAD3] BANanoServer - DirectMySQL CRUD

Ola Download Successfully implement a direct MySQ connection for BANanoVuetifyAD3 BANanoServer MySQL and did some crud. This depends on BANanoVuetifyAD3 Version 6.05 Update 15. NB: This uses jSQL DataSource Connection Parameters This should be done uploading soon:

www.b4x.com

 

[Mashiane]

[BANanoVuetifyAD3] BANanoServer - DirectMSSQL CRUD

Hi there... Download DataSource Database Settings Option 1: Use jdts In Main Add: #AdditionalJar: jtds-1.3.1.jar This can be used with Dim jdbcUrl As String = $"jdbc:jtds:sqlserver://${serverIP}:${serverPort}/${serverDB};instance=SQLEXPRESS"$...

www.b4x.com

 

[Mashiane]

Version 6.05 Update 15 GPA (BETA) is now available

NB: Please back up your work.

This is about the BANanoServer Direct BackEnd Connections using jSQL

Updated BANanoVuetifyAD3 BANanoServer Kitchen Sink

Updated Library Source (Those having KanBan +Chat can copy from your previous download)

 

[Mashiane]

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.

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]

Enable remote connection to a MySQL database on phpMyAdmin?

There are a few programs you can use to connect remotely to your database. HTML editors like DreamWeaver can connect to your databases remotely as well.

www.ovipanel.in

 

[Mashiane]

Worth Reading

jRDC2 is it safe?

sorry for my ignorance but i hear a lot of people saying using PHP is not safe to connect to a MySQL DB. and i hear a lot erel saying the best solution is to use jRDC2. so i tried and watched the whole tutorial of him here i must say that i was surprised that everything worked. so i managed to...

www.b4x.com

 

[Mashiane]

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

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

 

[Mashiane]

Version 6.05 Update 18 available

BANanoVuetifyAD3/Library/BANanoVuetifyAD3.zip at main · Mashiane/BANanoVuetifyAD3

Create websites & webapps using Vuetify & BANano. Contribute to Mashiane/BANanoVuetifyAD3 development by creating an account on GitHub.

github.com

 

[Mashiane]

Please note that Version 6.05 Update 19 for Donators/Buyers is now available on the same pCloud link provied via your email.

The same is also available on Github excluding the VBeautifulChat & VKanban components or here Download

 

[Mashiane]

Version 7 Now available.

What's New Section

Toggle Buttons

Windows

Item Groups

OTP Input

Form Inside Carousel

VueTable - Export to PDF & Excel

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

21: CRUD - Creating a Dialog Form to capture our Invoices - Part 2

www.b4x.com

PrintHTML - print any HTML element (also exclude others)

LabelPlus - a VLabel that can have Titles / Headings

AES Encryption / Decryption

Enjoy!

 

[Mashiane]

[BANanoVuetifyAD3] Creating Websites / WebApps by persons who are unable to use the Abstract Designer

Hi there I once read a thread here that there are persons who cannot / unable to use the Abstract Designer. It got me thinking about the future of BVAD3. The drive ever-since AD3 started was to move everything towards the abstract designer as it seemed the easier when it comes to creating...

www.b4x.com

 

[Mashiane]

Changing the WebApp Global Font

 

[Mashiane]

Handling UI Breakages on Page Refresh

 

[Mashiane]

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

BANanoShared.AddLoader

2. Add this before Vuetify.Initialize

BANanoShared.ShowLoader

3. Add this after Vuetify.Serve

BANanoShared.HideLoader

In normal apps...

1. Add this before Vuetify.Initialize

BANanoShared.AddLoader
BANanoShared.ShowLoader

2. Add this after Vuetify.Serve

BANanoShared.HideLoader