B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Mashiane · Nov 14, 2020

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 · Nov 22, 2020

Part 17

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

Enjoy!

Mashiane · Nov 23, 2020

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 · Nov 23, 2020

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 · Nov 24, 2020

Part 20

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

Mashiane · Nov 24, 2020

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 · Nov 25, 2020

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 · Nov 26, 2020

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 · Nov 27, 2020

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 · Nov 28, 2020

Part 24

Creating form input elements inside a vcontainer with a grid.

Mashiane · Nov 29, 2020

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 · Nov 29, 2020

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 · Nov 30, 2020

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 · Dec 1, 2020

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 · Dec 1, 2020

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 · Dec 3, 2020

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

Mashiane · Dec 3, 2020

joulongleu said:
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..

B4X:

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

and

B4X:

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.

B4X:

'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 · Dec 3, 2020

change iconleft / icon to "id" ok

joulongleu · Dec 3, 2020

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

Mashiane · Dec 3, 2020

joulongleu said:
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 · Dec 3, 2020

But "to" can't with parameters

B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency