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

Ola

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



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:

Mashiane

Expert
Licensed User
Longtime User
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.

1606576240033.png
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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"
 
Top