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
Tip: The VueTable Toolbar Buttons...

1645627096140.png


The VueTable can have app defined buttons when you activate them and you can add more.

These are activated in the Abstract Designer like this...

1645627213420.png


To mention a few.

The events linked to these buttons are like...

1645627317214.png


You can however add your own buttons to the toolbar by specifying the button id, color, icon and tootip here. These should be separated by ;

1645627486551.png


Eg, stop, mdi-stop, orange, Stop Processing.

The event for this will be

1645627561098.png


You change the ownbutton to be the button id (key) e.g.

B4X:
sub dtTable_stop_click (e as BananoEvent)
End Sub

Those events with (Item As Map) are specific to the specific row being processed, for example. The map returns the row data where the keys are the column names (all in lowercase)

1645627385458.png


At times you want to (1) disable, (2) show/hide, (3) activate loading the toolbar buttons. To be able to do this you can call any of

B4X:
NewDisable(True), NewVisible(False), NewLoading(True)
ClearSortDisable, ClearSortVisible, ClearSortLoading
ExcelDisable, ExcelVisible, ExcelLoading
DeleteAllDisable, DeleteAllVisible, DeleteAllLoading
RefreshDisable, RefreshVisible, RefreshLoading
CSVDisable, CSVVisible, CSVLoading
ClearFilterDisable, ClearFilterVisible, ClearFilterLoading

When you activate the filter, your column names will be available for filtering like this. You can select which columns to show on your table / not.

1645628097661.png
 

Mashiane

Expert
Licensed User
Longtime User
Tip: VueTable Action Columns

By fault, the Vuetable comes up with pre-built action buttons, however you can also add your own. These are, edit, delete, clone, print, save, cancel, download, menu.

1645633275501.png


These are activated via the abstract designer property bag with...

1645636137387.png


The events for these buttons are

B4X:
dtTable_edit (item As Map)
dtTable_delete (item As Map)
dtTable_clone (item As Map)
dtTable_print (item As Map)
dtTable_save (item As Map)
dtTable_cancel (item As Map)
dtTable_download (item As Map)
dtTable_menu (item As Map)

When executing any of these events, the item returned is the row content each key being the field name (in lowercase).

One can also add their own action buttons.

1645636432399.png


These should also be action key, action header, action icon and action color. Each action should be separated by ; for each of the 4 entries.

These event fired for these additional columns is

1645636837044.png


Where the column name is the actual column key you entered, eg.

B4X:
sub dtTable_mycolumn (Item As Map)

There are also other events, e.g.

1645636545953.png


Which fire when details of that column changes (change the word column to reflect the name of your actual column), e.g.

B4X:
dtTable_name_change (item As Map)

There is also this Change event

1645636617272.png


This is useful, if you have defined columns as checkfields, combo, switches etc. This fires when ever the complete row content has changed irrespective of column.

Others (change the columnName to be the exact name of your field)

1645636721183.png
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Tip: Vuetable Toolbar Button States (Disabled/Visible/Loading)

At times you want to (a) disable / enable, (b) Hide/Show and (c) activate /de-activate loading for a toolbar button. For example:

ToolBarButtonStates.gif


In this case, we have disabled the AddNew button, hidden then DeleteAll button and set the loader for the refresh button to be active.

Setting the loading state to true is useful for example for long processes (and you dont want a user to "re-click" the button.

For the built in buttons these are

B4X:
dt2.NewDisabled(True)
dt2.RefreshLoading(True)
dt2.DeleteAllVisible(False)

etc.

For your own added toolbar buttons you have (a) ButtonDisabled (b) ButtonLoading and (c) ButtonVisible - you pass the key of the button created.

1645637773918.png
 

Mashiane

Expert
Licensed User
Longtime User
Tip: VueTable Button Actions

In the VueTable, you can add your own columns, in this example, we have a added a normal button, conditionally rendered the labels and color depending on some value in the row.

1645641488716.png


The column name is "check" and the header label is "Check"

We add out button via the database-fields property. IT DOES NOT EXIST IN OUR DATA-BASE though.

1645641614350.png


and the title.

1645641634822.png


We then indicate that its a "Button".

1645642102730.png


We also give it an initial color

1645642223396.png


You can also indicate from here that the color is from the row content. e.g. Lets assume that the color of the button is in the field named buttoncolor, then here, we would write check: item.buttoncolor

We want the label of the "button" to be dependent on some row value. We then define a "pre-display" computation via the Compute Value property.

1645641762787.png


This means that each 'value' of the button will be determined by the callback checklabel. We add () to this computation because we want that callback to receive the whole row data. Notice the checklabel(item As Map) below. If we wanted the computation to use the actual value of the 'check' field, we would exclude the () from the call and just write checklabel(currentLabel As String). Map with () and String without.

B4X:
Sub checklabel(item As Map) As String
    Dim carbs As Int = item.GetDefault("carbs", 0)
    carbs = banano.parseInt(carbs)
    If carbs <= 50 Then
        Return "Decline"
    End If
    If carbs >= 51 Then
        Return "Approve"
    End If
    Return "Check"
End Sub

From this sub, if the value of cards, is <= 50 then decline, then if >= 51 then approve. The last return is just added for completeness.

We also want the color of the button to be computed based on some property.

1645641957303.png


Here we say, for the check 'button', if the value is <= 51, make the button color red and if not, make it green. Note the lowercase color value.

B4X:
Sub checkcolor(item As Map) As String
    Dim carbs As Int = item.GetDefault("carbs", 0)
    carbs = banano.parseInt(carbs)
    If carbs <= 50 Then
        Return "red"
    End If
    If carbs >= 51 Then
        Return "green"
    End If
    Return "black"
End Sub

Just in case, we also register these methods on the Vue Component instance.

Events

The event fired by this button click is defined as

B4X:
sub dtTable_check (Item As Map)

This will be available in the Kitchen Sink Data-Table Examples.
 

Attachments

  • 1645642319890.png
    1645642319890.png
    2.5 KB · Views: 119
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Tip: Loading Indicators at Row Level

Buttons, CheckBoxes and buit in Action Buttons, can receive a "loading" indicator too.

LoadingIndicators.gif


This can show a process that is specific to that row.

In the above table, the name on each row is unique, so we will use the name and then update the loading property of that row.

B4X:
'a button has been clicked
Private Sub dt1_check (item As Map)
    'get the name of the item
    Dim sname As String = item.Get("name")
    'change the loading property
    dt1.ListChange("name", sname, CreateMap("loading": True))
End Sub

Note above that you can change a lot of properties at the same time, thus using a map.

#SharingTheGoodness
 

Mashiane

Expert
Licensed User
Longtime User
Tip: VueTable Column Types that fire a change event

The following column types in the VueTable will fire a change event when such is generated. This is usually for inline editing.

  • select
  • combobox
  • autocomplete
  • textfield
  • date
  • time
  • textarea
  • datetime
  • money
  • linear
  • rating
  • checkbox
  • switch
You can have a change event at global level OR at column level (NOT BOTH) to the data-table e.g.

Changes happening at ROW level
B4X:
sub dtTable_Change (Item As Map)

or at column level

Changes happening at COLUMN level
B4X:
sub dtTable_ColumnName_Change (Item As Map)

The ColumnName should be your field name.

Ceveat:

DO NOT USE THESE METHODS AT THE SAME TIME AS THEY ARE MUTUALLY EXCLUSIVE.
 

Mashiane

Expert
Licensed User
Longtime User
Tip: VueTable Menus

Both the toolbar and action buttons can receive a menu. This is a button that activates a menu. The menu items are customizable by the developer. Both at action & toolbar level, there can only be 1 menu for each.

VueTable Toolbar Menu

1645981546862.png


To add these VueTable toolbar menu buttons, go to the vuetable layout in the abstract designer and specify the details of your menu items

1645982172030.png


This fires a dtTable_MenuBar(Item As String) event, where the item is the menu item id for the toolbar.

B4X:
Private Sub dt2_MenuBar (MenuID As String)
    vuetify.ShowSnackBarSuccess(MenuID)
End Sub

At column level, when you have selected a menu to be available for your rows, it is activated with items you can define.

1645981689472.png


These have also been created on the VueTable Menu Action option

1645982247247.png


This fires a dtTable_Menu (MenuID as String, Item as Map) event, where the MenuID is the key selected and the item is the row applicable. This event was previously dtTable_Menu(Item As Map)

B4X:
Private Sub dt2_Menu (MenuID As String, item As Map)
    Log("menuid...")
    Log(MenuID)
    Log("item...")
    Log(item)
    vuetify.ShowSwalToastInfo($"${MenuID}: ${banano.ToJson(item)}"$, 1000)
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3 updated to BANAno 7.35

Please be advised that the BVAD3 library and Kitchen Sink has been updated to use the BANano 7.35 library.

Get your copy now from github, https://github.com/Mashiane/BANanoVuetifyAD3

Also ensure to update the Additional Libraries for updated b4xtemplates etc.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoServer Implications for BANanoVuetifyAD3

Hi there gang.

It has come to light that the latest version of BANano 7.35+ has a compulsory requirement of Hikari if you use the BANanoServer, based on my question here.


1. This requires that you use JDK 11, I have been using 8 all along, so if you use BANanoServer + BANAno 7.35, please update your stuff.

Download and unzip the file and then in b4j goto tools > configure path and update.

1646261724936.png


2. Then in your project, you need to add these directives.

B4X:
 #AdditionalJar: HikariCP-5.0.0.jar
    #AdditionalJar: slf4j-api-1.7.32      
    #AdditionalJar: slf4j-simple-1.7.32.jar

#SharingTheGoodness


has a compulsory requirement of Hikari

As per BANano Essentials eBook, "The BANanoServer library has pre-configured a lot of stuff for you, but as it is a just a B4J .b4xlib library, you can make any changes to it to match with your needs."

Going forward, BVAD3 is adopting the Hikari connection pool for all BANanoServer projects.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
IMPORTANT ANNOUNCEMENTS OF NEW B4XTEMPLATES

Hi there, please note that 2 new b4xtemplates now are available from GitHub, these are BVAD3 Server MySQL and BVAD3 Server MongoDB, to enable you to create CRUD Java Jetty WebApps easily i.e. BANanoServer. Get your copy of the BVAD3 library to explore these. Please note the ReadMe in the Library folder should you compile the b4xlib yourself. Have fun!

1646644696225.png


The BVAD3 Server MySQL demo is available here: (please note the .sql file in the Files tab to create the db. The username has been set to root and no password in the baselayout datasource)



The BVAD3 Server MondoDB demo is available here:


#SharingTheGoodness
 
  • Like
Reactions: LJG

Mashiane

Expert
Licensed User
Longtime User
Tip: Creating VueTables at Runtime that change often / Using the save VueTable to show different content.

To create the schema i.e. columns & listing at runtime
You cretae a VueTable with the abstract designer and then at runtime can change its structure i.e. columns/data like this.

1. Execute .Reset (this clears everything about your VueTable)

B4X:
Sub Reset
    VC.SetData(itemsname, NewList)
    VC.SetData(selected, NewList)
    VC.SetData(groupby, NewList)
    VC.SetData(sortby, NewList)
    VC.SetData(groupdesc, NewList)
    VC.SetData(sortdesc, NewList)
    VC.SetData(expanded, NewList)
    VC.SetData(headers, NewList)
    VC.SetData(filters, NewList)
    VC.SetData(allcolumns, NewList)
    VC.SetData(xPage, 1)
    VC.SetData(xPageCount, 0)
    columnsM.Initialize
    Size = 0
End Sub

2. Execute .AddColumn for all the columns you want to add (this builds up the columns you need). There are a variety of these calls, e.g. AddAction, etc etc. In essense this does something like

B4X:
Sub AddColumn1(colName As String, colTitle As String, colType As String, colWidth As Int, colSortable As Boolean, colAlign As String)
    colName = colName.tolowercase
    Dim nf As DataTableColumn = NewDataTableColumn(colName, colTitle)
    nf.align = colAlign
    nf.sortable = colSortable
    nf.className = ""
    nf.width = colWidth
    nf.ColType = colType
    nf.divider = bDividers
    columnsM.Put(colName, nf)
    SetColumnType(colName, colType)
End Sub

3. Execute .UpdateHeaders (this sets up the columns and stores columns to use when filtering)

B4X:
Sub UpdateHeaders
    hdr.Initialize
    filterList.Initialize
    'loop through each column
    For Each k As String In columnsM.Keys
        'get the header
        Dim nf As DataTableColumn = columnsM.Get(k)
        Dim header As Map = BuildHeader(nf)
        hdr.Add(header)
        filterList.Add(k)
    Next
    VC.SetData(headers, hdr)
    VC.SetData(allcolumns, hdr)
    VC.SetData(filters, filterList)
End Sub

4. Execute .UpdateItems (we are not using .Reload because that has been done by .Reset)

B4X:
Sub UpdateItems(C As VueComponent, lst As List)
    Items = lst
    Size = Items.size
    C.SetData(itemsname, lst)
End Sub

Reload on the other hand is useful when you want to load data and your VueTable column definition is done with the abstract designer

B4X:
Sub Reload(records As List)
    Items = records
    VC.SetData(itemsname, Items)
    VC.SetData(selected, VC.NewList)
    VC.SetData(groupby, VC.NewList)
    VC.SetData(sortby, VC.NewList)
    VC.SetData(groupdesc, VC.NewList)
    VC.SetData(sortdesc, VC.NewList)
    VC.SetData(expanded, VC.NewList)
    VC.SetData(xPage, 1)
    Size = Items.size
End Sub

5. To show / hide particular columns at runtime use..

.ShowColumns(list) - shows the columns
.HideColumns(list) - hide the columns
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
NEW B4XTEMPLATES

1646994361455.png



We have added new b4xtemplates for BVAD3, FireStoreDB and MongoDB PHP that helps you quickly create webapps that use the respective back-ends.

For Firestore, see this Mashy Teaches thread post:


For MongoDB PHP see this Mashy Teaches thread post:


NB:

This helps you create CRUD based WebApps easily using any backend of your choice. We will be adding MySQL and SQLite and MSSQL soon. You will note that the code base for all of these projects is 99.9% similar, with the exception of the DataSource settings.

Ta!
 
Top