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]

Whilst I am still not sure of the implications of this stack overflow response, its very interesting.

Do I have to use the Composition API in Vue 3, or can I still do things the "Vue 2" way?

Is it possible to install Vue 3, but still do things the "Vue 2" way? In other words, I see that Vue 3 has the new Composition API, but is that optional or the required way of doing thing...

stackoverflow.com

 

[Mashiane]

The latest updated list of topics on the Mashy Teaches Channel.

 

[Mashiane]

BVAD3 Version 7.29 RC

Hi there

It is with pleasure to indicate that BVAD3 Version 7.29 RC is now available for download.

1. Download BVAD3 Library and unzip the contents to your b4j workspace
2. Download updated external libraries and copy these to your b4j external libraries folders
3. Download the updated kitchen sink, to explore the kitchen sink offline
4. Run the BVAD3 Library b4j project to compile the b4xlib.
5. You are good to go!

So whats new...

MinusPlusChip

HorizontalScroll

AvatarGroup

ChipIndicators

ListView - Part 1

Enjoy!

 

[aeric]

Download BVAD3 Library and unzip the contents to your b4j workspace

The zip file downloaded from GitHub contains a folder name Library711. Is this a sample project?

 

[Mashiane]

Is this a sample project?

No, its the library itself that you need to run and generate the BVAD3 b4xlib.

 

[aeric]

No, its the library itself that you need to run and generate the BVAD3 b4xlib.

Ops. Now I recalled it.
Then...

Maybe you can add a remarks that the latest version required BANano v7.

 

[Mashiane]

@aeric , please follow the 1st post on this thread on how to set up. You missed installing and setting BANano.

You can use 659 / RC7, they will both work.

 

[aeric]

You can use 659

I have BANano 6.59
I checked it and now the IDE stops complaining.

I think it is because the B4J project load BANano7 by default. I open the .b4j file and see the following:

Library1=banano7
Library2=jcore
Library3=jfx

 

[Mashiane]

Awesome, I am still checking BANano 7 and reporting experiences to Alain via PM that's why.

 

[Mashiane]

FYI...

GitHub - vuejs/awesome-vue: ? A curated list of awesome things related to Vue.js

? A curated list of awesome things related to Vue.js - GitHub - vuejs/awesome-vue: ? A curated list of awesome things related to Vue.js

github.com

 

[Mashiane]

BANanoVuetifyAD3 Version 7.29 is out!!!

Please note there is nothing to add to this version going forward and we will just work on 1. maintenance (bug fixing) and the 2. BVAD3 Package Manager and 3. documentation.



A special thanks to everyone who is involved in this project. You make it to be what is it today.

Have fun!

 

[Mashiane]

[BANanoVuetifyAD3] Important Information about Navigation Guards

Hi there These are primarily used to guard navigations either by redirecting it or cancelling it. Global Navigation Guards You have beforeEach (page) and afterEach (page), these can be placed in pgIndex. 'before each page is rendered Sub beforeEach(boTo As Map, boFrom As Map, boNext As...

www.b4x.com

 

[Mashiane]

CEVEATS

Executing TABLE_NAMES / SHOW_DATABASES with the data-source returns the actual list of table names on your database and not a list of maps. The end result should be this.

You need to ensure that the 'Lower Case Fields' option is checked OFF, by default this is ON.

The reason that this 'Lower Case Fields' setting was added is because BVAD3 expects the field names to be lowercase. In some cases, some fields do not meet this criteria. If however all your field names are lowercase on your data-base, you can turn this setting off as it always adds an extra processing of your result set. For the record, most things in BVAD3 are processed in lowercase, e.g. setdata, getdata, stuff inside {{ }} should be lowercase etc etc.

#Thanks @micro

PS:

The extra processing done by 'Lower Case Fields', save yourself some speed by ensuring your field names are lowercase and this processing is skipped.

If bLowerCaseFields Then
            BANanoShared.ListOfMapsKeysToLowerCase(Result)
        End If

 

[Mashiane]

New Animation Strategies in BANanoVuetifyAD3.

Download

 

[Mashiane]

CEVEATS

VField.AutoComplete/Combo/Select 2 Data Types

These controls have 2 data types, one to read the content, one to save the content. Its important that these match.

But at times, you might save the contents of a combo e.g. multi-select autocomplete as a string, whilst the items in it are having integer keys. In that case, the save data type is string and the read data type is integer. For example

If you will read your combo as integer and save as integer, specify integer on both save & read data types.

 

[Mashiane]

[BANanoVuetifyAD3] Package Manager

Hi there The creation of the Package Manager (which you will run yourself to tree-shake your BVAD3 package for your app), has started. So far my theories about this are rather simple. 1. You get the free BVAD3 package manager and run it. 2. You upload the master BVAD3 Library 3. You upload...

www.b4x.com

 

[Mashiane]

Wish List: What kind of projects would you like to see created in BANanoVuetifyAD3?

Ola We are stabilizing the release of BVAD3 and one is able to create powerful impressive webapps. Question is, what kind of projects would you like to see created with BVAD3. Depending on votes you cast, perhaps we can choose on the best project to do with BVAD3. Hit me up and send me work...

www.b4x.com

 

[Mashiane]

[BANanoVuetifyAD3] On beginning basic Animations with BANanoAnimeJS, what other types of animations would you be interested in?

Ola See BVAD3 Animations on Github After being inspired at how b4x animation names are "simple" with SetLayoutAnimations, we have followed suit and added some basic animations to BVAD3, off course animeJS is more advanced. So rather look at this at some kind of rewind and also based on...

www.b4x.com

 

[Mashiane]

[BANanoVuetifyAD3] - Your word counts campaign

Hi there Word... We want to make creating WebApps with BVAD3 easy and enjoyable, please tell us how, it matters. If you have had the pleasure to work with BANanoVuetifyAD3, surely you have picked up how easy at times it is to use and probably enjoying using it. Yes its massive and the...

www.b4x.com

 

[Mashiane]

BANanoVuetifyAD3 - A Vuetify App Development Tool - Version 7.29 Maintenance Release