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

Ola

NB: PLEASE DO NOT ASK QUESTIONS ON THIS THREAD

FOR A MORE DETAILED SETUP PROCESS, PLEASE SEE THE GITHUB REPO README.

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
Explaining the VList(View)

The current VList in the Kitchen Sink is made of a tree-like structure like the one below.

1641665771831.png


Looking at the HTML, one notices a node tree. This is depicted like this in Vuetify documentation.

1641665860723.png


For BVAD3, we have created a similar structure to ensure that our VList can work with built in templates. This composition is here.

ListView.jpg


The HTML Tree indicates the level within the tree of each of the nodes we use in BVAD3 to create our template. One can also hide/show each node tree depending on their options via the property bag of the VListOptions used for the VList. For example below, HasDivider, InsetDivider, UseLeftImage have been set so that those components are shown when available.

We chose the tree template for the kitchen sink.

1641666261655.png


In pgIndex, we have a method to add items to our VList.

B4X:
drwlist.AddItem("", "newstuff", "mdi-vuetify", "light-blue", "What's New", "")
    drwlist.AddItem("newstuff", "minusplusx", "", "", "Minus Plus VChip", "/mpvchip")

This created this tree structure..

1641666818108.png


The AddItem method is defined as

B4X:
Sub AddItem(parent As String, key As String, iconName As String, iconColor As String, sTitle As String, url As String) As VList
    parent = parent.ToLowerCase
    key = key.ToLowerCase
    '
    Dim nitem As Map = CreateMap()
    nitem.Put("id", key)
    If iconName <> "" Then nitem.Put("icon", iconName)
    If iconColor <> "" Then nitem.Put("iconcolor", iconColor)
    If sTitle <> "" Then nitem.Put("title", sTitle)
    If url <> "" Then nitem.Put("to", url)
    nitem.Put("parentid", parent)
    nitem.Put("visible", True)
    Records.Add(nitem)
    Return Me
End Sub

This uses as map/object which has icon/iconcolor/title etc. These items you will find further down on the VListOptions.

1641667072328.png


We used mdi-vuetify icon and Whats New title, and the iconcolor is light-blue.

This on the VListOptions we indicate which fields to use to draw the VList via the VListOptions (see DependsOn and Props on the attached Excel Sheet)

By using the Alias, you can get each component after LoadLayout and then add classes or attributes to it.


 
Last edited:

Mashiane

Expert
Licensed User
Longtime User

Mashiane

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

MinusPlusChip.jpg


HorizontalScroll

Screenshot_1.jpg


AvatarGroup

AvatarGroup.jpg


ChipIndicators

ChipIndicators.jpg


ListView - Part 1

ListView1.jpg


Enjoy!
 
Last edited:

aeric

Expert
Licensed User
Longtime User
No, its the library itself that you need to run and generate the BVAD3 b4xlib.
Ops. Now I recalled it.
Then...

1642182942554.png


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

aeric

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

B4X:
Library1=banano7
Library2=jcore
Library3=jfx
 

Mashiane

Expert
Licensed User
Longtime User
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!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

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

1642766427048.png


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

1642766614345.png


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.

B4X:
If bLowerCaseFields Then
            BANanoShared.ListOfMapsKeysToLowerCase(Result)
        End If
 

Mashiane

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

1642789660459.png


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

1642789864268.png


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

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
 
Top