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]

Part 17

We begin our first session with v-data-tables.


Enjoy!

 

[Mashiane]

Part 18

We extend our tables and add color coded chips and color coded action buttons. We link these action buttons to events, events that are passed the row being processed.

 

[Mashiane]

Part 19

This is version 2.32 BETA using BANano 6.11.

Adding input components, e.g. rating, progress, avatar, switches to the v-data-table.

 

[Mashiane]

Part 20

Adding images, url links, formatting dates with day.js and numbers with numeral.js.

 

[Mashiane]

Part 21

Download

We create v-selects (the same approach will apply for v-combo and v-autocomplete). We also obfuscate our javascript files for the project for protection (run in release mode)

 

[Mashiane]

Part 22 - Grid Design Using the Abstract Designer (Part 1)

Download

We build the grid using the abstract designer during debug to experience BANano #LiveCodeSwapping. We add elements to the grid matrix using re-usable layouts, this includes a button with a click event.

 

[Mashiane]

Version 2.40 BETA is now available, this is in preparations to finalize the grid tutoral on part 22.

Download from here now.

To ensure that you get the latest updates on the library, watch the github repo so that you get email notifications about updates.

If you like it a lot, please star it too!

Ta!.

 

[Mashiane]

Part 23 - Grid Design Using the Abstract Designer (Part 2)

Download BVAD3 2.42 BETA

We have now added the compiled version of the library in the External Libraries of the dist.

Lets begin creating awesome grids using the abstract designer. We use v-row, v-col, v-sheets to explain concepts with #LiveCodeSwapping.


#ExplainItLikeIm5


We continued and added more rows and columns to the grid. In each we changed the sizes to meet our specs. We used a v-sheet in each column.

Next we will look at input controls.

 

[Mashiane]

Part 24

Creating form input elements inside a vcontainer with a grid.

 

[Mashiane]

Part 25

Alerts & Confirmation Dialogs inside component pages. Previously, alerts and confirm dialogs were managed at a global scale using confirm_ok and confirm_cancel with BVM.
This ensures that code for alerts and confirm run inside their own scope of the page. This is an amazing addition to BVAD3!!!

 

[Mashiane]

Part 26

Download 2.50 BETA

Work do a work review then add radio groups, switches, checkboxes, chips, text-area, file inputs, sliders and lists #ReusableLayouts with LoadBananoArray



Enjoy!

 

[Mashiane]

BVAD3 Version 2.52 BETA

Phew... just discovered a major flaw on the grid design code. The library

Here is a fixed version. Please note only example 26 has been updated, the rest not.

Also I had to add a "process" key for the alert dialog, just like ShowConfirm method.

NB: Only Tutotial 26 is updated on the repo.

Download

 

[Mashiane]

Part 27 - Understanding the BANanoElement by creating a Vuetify Wireframe

Lets create a wireframe by exploring the BANanoElement functionality IN DETAIL. We use a couple of BANanoElement to create our wireframe. This is for understanding how BANano works.

 

[Mashiane]

Version 2.53 BETA has been released.

Please note that Tutorial 26 is the most updated code base for everything we have spoken about from tutorial 01 until now. So far it is the only updated tutorial with the latest library. You can use it as the most reliable source of truth.

Thanks

 

[joulongleu]

Hi Mashiane:
Part28 vuetify.ShowSnackBarSuccess(item) show icon name not id or titleThank You.

 

[Mashiane]

show icon name not id or title

Its because when it was initialized on the code, we set it to display the "icon" and not the "id", see the code.

For example..

BVAD3.NewListItem(lists, "list1", "items", "iconleft", 0,  Null)

and

BVAD3.NewListItem(lists, "list2", "icontitle", "icon", 0,  Null)

How?

When you run any of the add methods, they create a map record for the item you add. This is the format.

'add an item
Sub Items_Add(records As List, sid As String, siconleft As String, savatar As String, savataricon As String, sicon As String, siconcolor As String, stitle As String, ssubtitle As String, ssubtitle1 As String, slinkto As String, siconright As String, stextright As String)
    Dim rec As Map = CreateMap()
    rec.Put("id", sid)
    If siconleft <> "" Then rec.Put("iconleft", siconleft)
    If savatar <> "" Then rec.Put("avatar", savatar)
    If sicon <> "" Then rec.Put("icon", sicon)
    If siconcolor <> "" Then rec.put("iconcolor", siconcolor)
    If stitle <> "" Then rec.Put("title", stitle)
    If ssubtitle <> "" Then rec.Put("subtitle", ssubtitle)
    If ssubtitle1 <> "" Then rec.Put("subtitle1", ssubtitle1)
    If siconright <> "" Then rec.Put("iconright", siconright)
    If stextright <> "" Then rec.Put("textright", stextright)
    If savataricon <> "" Then rec.Put("avataricon", savataricon)
    If slinkto <> "" Then rec.Put("to", slinkto)
    records.Add(rec)
End Sub

So as you can see, you are not limited to anything that you want to return, whether its the title, subtitle etc,

So to return the "id", change iconleft / icon to "id"

 

[joulongleu]

change iconleft / icon to "id" ok

 

[joulongleu]

Hi @Mashiane: How to use the following item_click ,Thank You.

 

[Mashiane]

How to use the following item_click

I will check, I'm not sure if I implemented it yet as currently its linked to the router via the "to" property.

 

[joulongleu]

But "to" can't with parameters