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

Mashiane · Sep 18, 2021

Introducing the VDataTable Tutorial on the Mashy Teaches Channel

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

13 - Beginning Offline First WebApps - IndexedDB CRUD Download BVAD3 6.03 Download Project PS: Consider donating if you looove the work!

www.b4x.com

Mashiane · Sep 18, 2021

Please be advised that Version 6.04 Update 1 is out.

BANanoVuetifyAD3/Library/BANanoVuetifyAD3.zip at main · Mashiane/BANanoVuetifyAD3

Create websites & webapps using Vuetify & BANano. Contribute to Mashiane/BANanoVuetifyAD3 development by creating an account on GitHub.

github.com

Mashiane · Sep 18, 2021

The kitchen sink has also been updated... with 6.04 Update 1

View it online from GitHub

BANanoVuetifyAD3 V7.36 - New Awesome Kitchen Sink

BVAD3 Design System

mashiane.github.io

NB: Remember the kitchen sink has a tool to help you build BindState code for your variables.

Mashiane · Sep 19, 2021

Upcoming Updates

This is an example of theming that you can apply to your BVAD3 app going forward. You choose the first and second colors for the gradients, turn then on. Walla!

Mashiane · Sep 20, 2021

Please note this:

[BANanoVuetifyAD3] Inviting all "Bug Finders"? ie. "Flaw Finders"

Hi there This is not necessary a "question" but a request for an intervention. The attempt is to have a thread to report bugs and then we post a solution. A bug is something that does not work as expected, this creates instability for applications and my dream and our dream as BVAD3 users are...

www.b4x.com

Mashiane · Sep 24, 2021

Lesson 18 is out yall.

also Version 6.04 Update 2 is available.

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

13 - Beginning Offline First WebApps - IndexedDB CRUD Download BVAD3 6.03 Download Project PS: Consider donating if you looove the work!

www.b4x.com

Mashiane · Sep 26, 2021

Updates to Data-Table Custom View...

Sort by fields & Group by fields are now in the property bag, these were accessible by code ONLY before.

The toolbar buttons now have tooltips, you can change the default tooltips.

Mashiane · Sep 26, 2021

Upcoming Updates

V-Data-Table date & time picker.

Mashiane · Sep 26, 2021

Explaining VueDataTable sorts.

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.

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)

However I am not using a DataSource here as Im not using a DB.[/code]

Mashiane · Sep 26, 2021

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.

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

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.

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:

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.

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

Mashiane · Sep 26, 2021

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

BANanoVuetifyAD3 V7.36 - New Awesome Kitchen Sink

BVAD3 Design System

mashiane.github.io

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.

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

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

Mashiane · Sep 26, 2021

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)

Mashiane · Sep 26, 2021

My Response to a Question about BANanoVuetifyAD3 Documentation

Please see my response here for more details

BANanoVuetifyAD3 SignIn, authentication and AppBar

I noticed using the SignIn example that if I log into the www.mywebsite.org/AppName/#/home page, it can log in without being authenticated. It is a problem if the person manages to enter the pages by saving the address and recalling the history without having to authenticate. Is it a solvable...

www.b4x.com

Mashiane · Sep 27, 2021

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:

Persistent storage | Articles | web.dev

Persistent storage can help protect critical data from eviction, and reduce the chance of data loss.

web.dev

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:

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.

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

Mashiane · Sep 28, 2021

[BANanoVuetifyAD3] Version 6.05 - What's New?

Ola Download 605 Mashy Teaches BANanoVuetiAD3 If you have been watching along, a lot is happening with this lib, we now bring you version 6.05, with gradient theming and basic animation using animeJS. With BANanoVuetifyAD3, you are able to create websites / webapps using Vuetify (VueJS) 2...

www.b4x.com

Mashiane · Sep 28, 2021

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!

Mashiane · Oct 1, 2021

BANanoVuetifyAD3 Version 6.05

Please note the Version 6.05 Update. When downloading, select the 605 branch and not main.

How to access a branch in github?

We are releasing new videos on the Mashy Teaches Thread, ensure to check those out. #SharingTheGoodness

Mashiane · Oct 3, 2021

Coming soon to BANanoVuetifyAD3

[BANanoRelax] 1. Perform CRUD Offline, 2. Sync to Cloud and 3. Relax

Ola With the upcoming updates to BANano 7, with cron jobs, background workers, it makes it more awesome to work with. So i guess we can only be limited by our own imagination. Hand clap to Alain for such an amazing software package. So what is BANanoRelax? BANanoRelax is a DB lib, made of...

www.b4x.com

Mashiane · Oct 4, 2021

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"

Mashiane · Oct 6, 2021

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.

Action Buttons - Elevation = 0

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

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

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads