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

Ola

Getting Started

NB: IT IS IMPORTANT THAT YOU PLEASE RUN THE BANANOVUETIFYAD3 LIBRARY ON YOUR OWN DEVICE (DO NOT USE THE COMPILED B4XLIB OUT OF THE BOX),THIS WILL GENERATE THE B4XLIB FOR YOUR DEVICE.

IMPORTANT ANNOUNCEMENT : BindState / BindVueElement DEPRECATED



Please read my Article on Medium

1. Download and Copy these files to your B4J External Libraries Folder.
NB: It is greatly recommended that you Download the Library Source Code and run it from your PC Directly
2. Download this b4x template and put it in your B4J Internal Libraries Folder
3. Download and run the Awesome Kitchen Sink WebApp
4. Learn from Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
5. We also have the BANanoServer (jetty) version of the Kitchen Sink. See this link also https://www.b4x.com/android/forum/t...bsites-webapps-with-banano.124548/post-845410
6. Download test.sql to import with phpMyAdmin

BANanoDataSource



Tools

BindVueElement Builder

You also can

Explore the Awesome Kitchen Sink WebApp Online hosted on GitHub
Mashy Teaches BANanoVuetifyAD3 YouTube PlayList

Creating a new Project

3. In B4J, click File > New > BVAD3EDS to create a new project

1624754308034.png


What's Next?

You will find the most up to date content from this post

For MySQL Back-Ends

Run the Connection Tester WebApp
https://www.b4x.com/android/forum/threads/banano-bvad3-php-connection-tester.131014/page-2

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

BTW we are on Social Media

Join our Telegram: https://t.me/bananovuematerial
Twitter handle: @mashymbanga

Open Source Code (MIT License)

Here is the Library Source Code (THIS IS OPEN-SOURCE)
Here is the Source Code for the Extensions we have used

Freebies - BVAD3 Projects

Download

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.
 
Last edited:

Mashiane

Expert
Licensed User
Please note this:

 

Mashiane

Expert
Licensed User
Explaining VueDataTable sorts.

1632658391492.png


As indicated earlier, on the upcoming VueDataTable, you will be able to indicate your sort order, sort desc etc on the property bag.

In the Custom View Code checker im using, I am using text files to store content, e.g. logs, working transaction files etc.

So I wanted to see the log files, so I just stored them in a text file. I could use a database though but wanted the easier option as BANanoPHP works perfectly. The logs are stored in CSV format and my delimiter is ~~

B4X:
Sub loadlogs
    'read the transactions logs using php
    dtLogs.UpdateLoading(True)
    'clear the contents
    dtLogs.Reload(home.NewList)
    'use php to read the log files and load to a table
    Dim php As BANanoPHP
    php.Initialize("", False)
    'read the file contents
    Dim strContents As String = banano.Await(php.FileReadWait(tranLog))
    'convert file to list
    Dim recs As List = BANanoShared.StrParse(CRLF, strContents)
    'split each line
    Dim logsc As List
    logsc.Initialize
    Dim logCnt As Int = 0
    For Each logentry As String In recs
        logentry = logentry.Trim
        If logentry = "" Then Continue
        logCnt = logCnt + 1
        Dim record As List = BANanoShared.StrParse("~~", logentry)
        Dim nrec As Map = CreateMap()
        nrec.Put("id", logCnt)
        nrec.Put("filename", record.Get(0))
        nrec.Put("section", record.Get(1))
        nrec.Put("action", record.Get(2))
        nrec.Put("result", record.Get(3))
        nrec.Put("pickdate", BANanoShared.DateNow)
        nrec.Put("picktime", BANanoShared.TimeNow)
        logsc.Add(nrec)
    Next
    dtLogs.Reload(logsc)
    dtLogs.UpdateLoading(False)
End Sub

So because I had indicated a sort order on my data-table, the table shows the logs in the sequence of the sorted fields.

SortedUpdateLogs.png


Usually to execute a sort, you need to specify that in the DataSource (the data source builds your SQL statements based on the parameters specified in the property bag)

1632658851948.png


However I am not using a DataSource here as Im not using a DB.[/code]
 
  • Like
Reactions: LJG

Mashiane

Expert
Licensed User
VueDataTable - Show Select

At times you might want to enable selection of all records in your data-table. This is possible with the select property.

1632662433545.png


The next time you run your app, your data-table will have a main select checkbox.

1632662661863.png


When the "heading" one is checked, it selects all records. To get the selected records, a list of the selected records item-keys is returned with

B4X:
dim lst As List = dtTable.GetSelected

Now let's assume that you need a toolbar button like, "delete", that when selected, you are able to detect the selected records and perform some action.

Adding custom buttons to the VueTable toolbar

Step 1: The VueTable has a new property to add additional buttons on the toolbar.

1632663223139.png


Here you can specify the table keys, color, tootip and icon for each button you want added, these needs to be separated by ;

The newly generated toolbar now looks like:

1632663282243.png


Now you have a way to trap this event. You need to define an event in code.

B4X:
private Sub dtProperties_deleteall_click (e As BANanoEvent)
    'get the selected records from the data-table
    Dim selRecords As List = dtProperties.GetSelected
    Log(selRecords)
    For Each rec As String In selRecords
        Log(rec)
    Next
End Sub

Note the event signature

B4X:
dtProperties_deleteall_click (e As BANanoEvent)

It uses the key we specified for our new button.

Adding Custom Action Buttons

BTW: You can also add your own custom actions in the vue-table with these properties, using the same format above.

1632663413439.png



Because action buttons are per row, you need to pass it the row data you are on, so their event signature is different.

B4X:
sub dtProperties_customaction (item As Map)
End Sub

Where [customaction] is the key name of your action button
 
  • Like
Reactions: LJG

Mashiane

Expert
Licensed User
VueTable Display Format

The VueDataTable has a various display formats, to display the underlying data.

These are:

B4X:
Public COLUMN_DATE As String = "date"
    Public COLUMN_TEXT As String = "text"
    Public COLUMN_ICON As String = "icon"
    Public COLUMN_CHECKBOX As String = "checkbox"
    Public COLUMN_NONE As String = ""
    Public COLUMN_TIME As String = "time"
    Public COLUMN_DATETIME As String = "datetime"
    Public COLUMN_IMAGE As String = "image"
    Public COLUMN_MONEY As String = "money"
    Public COLUMN_NUMBER As String = "number"
    Public COLUMN_FILESIZE As String = "filesize"
    Public COLUMN_CHIP As String = "chip"
    Public COLUMN_EDIT As String = "edit"
    Public COLUMN_DELETE As String = "delete"
    Public COLUMN_ACTION As String = "action"
    Public COLUMN_SWITCH As String = "switch"
    Public COLUMN_AVATARIMG As String = "avatarimg"
    Public COLUMN_AVATARTXT As String = "avatartxt"
    Public COLUMN_AVATARICON As String = "avataricon"
    Public COLUMN_RATING As String = "rating"
    Public COLUMN_LINK As String = "link"
    Public COLUMN_LINK1 As String = "link1"
    Public COLUMN_PROGRESS_CIRCULAR As String = "progresscircular"
    Public COLUMN_PROGRESS_LINEAR As String = "progresslinear"
    Public COLUMN_SAVE As String = "save"
    Public COLUMN_CANCEL As String = "cancel"
    Public COLUMN_BUTTON As String = "button"
    Public COLUMN_COMBOBOX As String = "combo"
    Public COLUMN_AUTOCOMPLETE As String = "autocomplete"
    Public COLUMN_TEXTFIELD As String = "textfield"
    Public COLUMN_TEXTAREA As String = "textarea"
    Public COLUMN_SELECT As String = "select"
    Public COLUMN_RAG_SMILEY As String = "ragsmiley"
    Public COLUMN_RAG_CIRCLE As String = "ragcircle"
    Public COLUMN_UP_DOWN As String = "updown"
    Public COLUMN_REACTION As String = "reaction"
    Public COLUMN_GENDER As String = "gender"

We have just added new ones, these being...

B4X:
  Public COLUMN_RAG_SMILEY As String = "ragsmiley"
    Public COLUMN_RAG_CIRCLE As String = "ragcircle"
    Public COLUMN_UP_DOWN As String = "updown"
    Public COLUMN_REACTION As String = "reaction"
    Public COLUMN_GENDER As String = "gender"

These display formats is what is used in this page of the kitchen sink


As an example, depending on the underlying content on the source of your table, you can indicate that a column should be displayed as any of the Enums above.
1632668473225.png


1632668509336.png


You do this in the property bag and update the display format , for example

1632668670635.png


Chips fields are "carbs", Button fields are "check".
 

Attachments

  • 1632668490438.png
    1632668490438.png
    217.5 KB · Views: 10
  • Like
Reactions: LJG

Mashiane

Expert
Licensed User
VueTable Display Formats Saving Formats

B4X:
'for smiles & circles
    Public const RAG_RED As Int = 1
    Public const RAG_AMBER As Int = 2
    Public const RAG_GREEN As Int = 3
    Public const RAG_UNKNOWN As Int = 4        ' not for smileys
    '
    Public const REACT_LIKE As Int = 1
    Public const REACT_LOVE As Int = 2
    Public const REACT_HAHA As Int = 3
    Public const REACT_WOW As Int = 4
    Public const REACT_SAD As Int = 5
    Public const REACT_ANGRY As Int = 6
    '
    Public const KPI_UP As Int = 1
    Public const KPI_DOWN As Int = 2
    '
    Public const GENDER_F As Int = 1
    Public const GENDER_M As Int = 2

The above enum indicates the SAVING FORMAT of the underlying data to display the type of content on the data-table.

For example, to display content as a Like Reaction on the data-table, the value of that field should be 1.
The RAG... indicators apply to both Circles and Smilely indicators (except 4)
 
  • Like
Reactions: LJG

Mashiane

Expert
Licensed User
My Response to a Question about BANanoVuetifyAD3 Documentation

Please see my response here for more details

 

Mashiane

Expert
Licensed User
Storing App Session Data

In the next version you will be able to set a heartbeat for BVAD3 to execute saving of your current existing data for both at pgIndex and page level.

Data stored on a page and also on the pgIndex is stored in a data object. This is accessible via

pgIndex.data and VC.data (VueComponent)

Due to the size of cookies and limited localstorage, one can turn on persistent storage:


This ensures that content in cookies, IndexedDB, LocalStorage is not cleared when browsers run out of space.

Recently I activated persistent storage and this was the report it gave me on the browser:

1632705977529.png


Steps:

1. Tell Vuetify to activate the heartbeat on app create in the Init subroutine

B4X:
vuetify.OnCreated("startheartbeat", Null)

2. Start the heart-beat via the code, here we start the heartbeat with persisted storage

B4X:
Sub startheartbeat
    'start the heartbeat to save the session state
    vuetify.StartHeartBeat(True, 5000)
End Sub

The start heart beat code here starts every 5 seconds, this saves all the data in pgIndex (i.e all data-binding) related data to LocalStorage.

You can always stop the heartbeat with .StopHeartBeat.

To make the data stored for the session the active data in your app, you can execute pgIndex.ReadSession, this will update the vuetify.data store.

At page level, you just call the VC.ReadSession to make your page data the active data.

at pgIndex, the data is stored using the app name i.e. same name as in Main.AppName.

1632707198025.png


It is recommended that when the page is created, you can start the timer and then
When the page is destroyed, you stop the timer, so that it does not continue unattended.

In summary...

on PgIndex

B4X:
vuetify.OnCreated("startheartbeat", Null)
vuetify.OnDestroyed("stopheartbeat", Null)

Sub startheartbeat
    Log("pgIndex.startheartbeat every 5 seconds...")
    'start the heartbeat to save the session state
    vuetify.StartHeartBeat(True, 5000)
End Sub

Sub stopheartbeat
    Log("pgIndex.stopheartbeat...")
    vuetify.StopHeartBeat
End Sub

You can reload the content to be active with

B4X:
pgIndex.ReadSession

on any Page...

B4X:
Sub pagecreated
    Log($"${name}.startheartbeat, every 5 seconds..."$)
    home.StartHeartBeat(False, 5000)

etc

Sub stopheartbeat
    Log($"${name}.stopheartbeat..."$)
    home.StopHeartBeat
End Sub
 

Attachments

  • 1632705241334.png
    1632705241334.png
    1.4 KB · Views: 10
Last edited:

Mashiane

Expert
Licensed User
 

Mashiane

Expert
Licensed User
SUPPORT FOR CUSTOM "PARAMETER" Queries in the Data Source

It is with pleasure to indicate that the data-source now support fully parametized CUSTOM QUERIES.

For example.

B4X:
'clear any existing parameters
 usersDS.CLEAR_PARAMETERS
 'add the parameter types
 usersDS.ADD_PARAMETER_STRING(username)
 'execute the query
 usersDS.CUSTOM_QUERY("getuserbyname", $"SELECT * FROM users where username = ?"$)

The result for this is trapped by the _DONE callback.

B4X:
Private Sub usersDS_Done (Action As String, Success As Boolean, Response As String, Error As String, affectedRows As Int, Result As List)
    loginDialog.OkLoading = False
    Log(Result)
    Log(Error)
 
    If Success And Response = usersDS.RESULT_SUCCESS Then
        'we have a success, will execute next lines
    Else
        vuetify.ShowSwalError("The operation could not be executed, please try again!")
         Return
    End If

    Select Case Action
        Case "getuserbyname"
    Case "B"
    Case "C"
    End Select
End Sub

Here are the other parameter types, this means you need to categorize your arguements to fit these types ONLY.

B4X:
'add a string parameter, these will translate to [s = string, i = integer, d = double,  b = blob]
public Sub ADD_PARAMETER_STRING(fldName As String)
    qparameters.Put(fldName, "s")
    bUsesParameters = True
End Sub

'add an integer parameter, these will translate to [s = string, i = integer, d = double,  b = blob]
public Sub ADD_PARAMETER_INTEGER(fldName As String)
    qparameters.Put(fldName, "i")
    bUsesParameters = True
End Sub

'add an integer parameter, these will translate to [s = string, i = integer, d = double,  b = blob]
public Sub ADD_PARAMETER_DOUBLE(fldName As String)
    qparameters.Put(fldName, "d")
    bUsesParameters = True
End Sub

'add an integer parameter, these will translate to [s = string, i = integer, d = double,  b = blob]
public Sub ADD_PARAMETER_BLOB(fldName As String)
    qparameters.Put(fldName, "b")
    bUsesParameters = True
End Sub


PS: The other alternative to the callback is to define a callback linked to the "action", in the above example we used "getuserbyname", so we can..

B4X:
Private Sub usersDS_getuserbyname (Success As Boolean, Response As String, Error As String, affectedRows As Int, Result As List)
    loginDialog.OkLoading = False
    Log(Result)
    Log(Error)
    
    If Success And Response = usersDS.RESULT_SUCCESS Then
        'we have a success, will execute next lines
    Else
        vuetify.ShowSwalError("The operation could not be executed, please try again!")
         Return
    End If
End Sub

To trap the results of the callback.

Ta!
 
Last edited:

Mashiane

Expert
Licensed User
Coming soon to BANanoVuetifyAD3

 
  • Love
Reactions: LJG

Mashiane

Expert
Licensed User
Sweet Alerts

By default Sweet Alerts are placed at top-end and are times for 3 seconds. You can change this behavior.

By calling:

B4X:
    Vuetify.SwalPosition = "top-end"
    Vuetify.SwalTimer = 2000

You can use these other constants to change the location..

B4X:
Public const SWAL_TOP As String = "top"
    Public const SWAL_TOP_START As String = "top-start"
    Public const SWAL_TOP_END As String = "top-end"
    Public const SWAL_CENTER As String = "center"
    Public const SWAL_CENTER_START As String = "center-start"
    Public const SWAL_CENTER_END As String = "center-end"
    Public const SWAL_BOTTOM As String = "bottom"
    Public const SWAL_BOTTOM_START As String = "bottom-start"
    Public const SWAL_BOTTOM_END As String = "bottom-end"
 
Last edited:
  • Like
Reactions: LJG

Mashiane

Expert
Licensed User
Tip: VueTable ToolBar and Action Buttons

By default the VueTable Toolbar and action buttons have an elevation of 4. This was fixed and is now a flexible property. When applied it applies to both the toolbar and action buttons.

VueTable Toolbar - Elevation 0

The elevation here has been set to 0.

1633485143637.png


Action Buttons - Elevation = 0

1633485230993.png


You can set the elevation via the abstract designer. Below are the default values, that you can change now

1633485410198.png


By setting the "Buttons / Chips Outlined" option, you can have outlined buttons like this...

1633485659233.png
 
Last edited:
Top