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

Mashiane · Mar 20, 2022

Create a jetty server app for BVAD3 that uses MS Access as a backend...

You can get the Additional Libraries now from Github

Mashiane · Mar 22, 2022

[BANanoVuetifyAD3] Legacy projects that DO NOT use the abstract designer Now FREE

Hi there Download Hi, thank you for your interest. There is some BVAD3 legacy code that DOES NOT USE (a) the abstract designer and (b) the data-source. Everything has been coded. Whilst some of the methodologies used in these projects are no longer recommended (especially how the VueElement...

www.b4x.com

Mashiane · Mar 29, 2022

Customizing VueTable Items Per Page

The VueTable has an extra property called "Items Per Page Options"

Use this to customize the footer rows per page dropdown. By defaults this is set to "5;10;15;-1"

You can change it to any items you want e.g. 20;40;60;80;100;-1, to have your pages showing in increment of 20 items per page, also change Items Per Page to 20.

For this example we have set it to:

Ta!

Download updat from Github!

PS: Thanks LJG for pointing this out.

Mashiane · Mar 30, 2022

Vuetable Auto-Configuration

It is now possible for the VueTable to auto-configure. By auto-configure, we mean, you just feed the VueTable with a URL of the data-source. You dont need to specify any column names as the process reads the first record of your JSON and generates the column names to add to the table automatically.

This is useful where you want to display content quickly and don't want to have to create columns etc. All you have to do is..

1. Drop a VueTable on your abstract designer
2. In mounted, call the ReloadFromURL method.

If you open the kitchen sink > Whats New > VDataTable URL, you.

Find a table with about 500 records, split into increments of 50 records per page.

There is this setting

We want the table records to be loaded when our page shows...

B4X:

Sub mounted        'ignoreDeadCode
    VueTable1.ReloadFromURL("https://jsonplaceholder.typicode.com/comments")
    vuetify.Loading(False)
End Sub

Also we want this information to be refreshed..

B4X:

Private Sub VueTable1_Refresh_Click (e As BANanoEvent)
    vuetify.Loading(True)
    VueTable1.ReloadFromURL("https://jsonplaceholder.typicode.com/comments")
    vuetify.Loading(False)
End Sub

If you paste the URL on your browser, you get sample content like..

Displayed as...

Ceveats:

Only the first level keys will be considered.

Lets look at this method specifically... (is used to build tables dynamically at runtime)

B4X:

'create columns from the url and autoconfig
Sub ReloadFromURLWait(url As String) As Boolean
    'reset the table definition
    Reset
    'get the data
    Dim records As List = BANano.Await(BANano.GetFileAsJSON(url, Null))
    If records.Size > 0 Then
        'get the first record
        Dim rec1 As Map = records.get(0)
        'build the column names
        For Each k As String In rec1.Keys
            'display proper case column names
            Dim title As String = BANanoShared.BreakAtUpperCase(k)
            title = BANanoShared.ProperCase(title)
            k = k.tolowercase
            'create columns
            AddColumn(k, title)
        Next
       'update headers
        UpdateHeaders
       'ensure that each row has lowerCase key records
        BANanoShared.ListOfMapsKeysToLowerCase(records)
        'update all rows
        UpdateRows(records)
    End If
    Return True
End Sub

Mashiane · Mar 31, 2022

VueTable - Column Visibility Filter

Here we fire the filter each time a choice is made.

B4X:

Private Sub VueTable1_FilterChange(e As BANanoEvent)
    'apply the filter
    VueTable1.ApplyFilter
End Sub

VueTable Property Settings;

Mashiane · Apr 1, 2022

Vuetify - Grouping Data by a Specific Column

Mashiane · Apr 4, 2022

VueTable - grouping content at runtime

1. Step 1

Specify that the vuetable uses grouping. You may indicate which column should be grouped by. Groupable fields are the names of the fields that can be grouped. These will appear as chips. Grou by fields are the defaults fields that should be grouped when app runs.

At run-time you are able to select the column to group by and see your table redraw itself to meet your needs.

Mashiane · Apr 4, 2022

With both column visibility filtering on and grouping on..., you can filter which columns to show and which should be grouped at run-time...

Mashiane · Apr 4, 2022

BVAD3 has been updated to take care of runtime VueTable column visibility filtering and also column grouping:

Demo: https://mashiane.github.io/BANanoVuetifyAD3/#/dturl

Mashiane · Apr 8, 2022

VueTable Tip: Selecting Multiple Items

1. In your VueTable - check the ShowSelect Property (this activates the checkbox on the header)

2. Generate the SelectedItems events (fires each time that checkbox is toggled)

B4X:

Private Sub VueTable1_SelectedItems (items As List)
    Log(items)
End Sub

Happy BVAD3 Coding

Mashiane · Apr 9, 2022

Tip: VueTable Single Select

Both these properties should be checked. This enables a single row selection. As you will note.There is no header checkbox for this case.

The SelectedItems event is also used to return a list of selected records, whenever a selection changes

B4X:

Private Sub VueTable1_SelectedItems (items As List)
    Dim tItems As Int = items.Size
    vuetify.ShowSwalToastInfo($"${tItems} item selected"$, 1000)
End Sub

Mashiane · Apr 9, 2022

Tip: VueTable - Getting Selected Records via a button click

If you dont want to fire the SelectedItems event each time you make selections on the VueTable, you can GetSelected (items) via a button click.

Here, we click the Delete All button and get save the selected records to a List.

B4X:

Private Sub VueTable1_DeleteAll_Click (e As BANanoEvent) 'get all records in the table 'Dim allItems As List = VueTable1.GetData 'get only selected records Dim selItems As List = VueTable1.GetSelected Log(selItems) Dim tItems As Int = selItems.Size vuetify.ShowSwalToastInfo($"${tItems} items deleted"$, 1000) End Sub

Mashiane · Apr 9, 2022

As my friend says "less is more", the grouping for the VueTable has been streamlined.

The "Show Grouping By" property should be off for a beautiful experience. This will remove the "group" text on the headers.

Mashiane · Apr 9, 2022

BANanoVuetifyAD3 - Garbage Collection Importance [VERY VERY VERY IMPORTANT]

To be able for Vue to collect garbage, its important that a "beforeunload" event is fired. This is picked up when someone presses F5 on the browser.
By adding this piece of code on the pgIndex module, each time someone presses F5 when your app is running, the browser will be refreshed and the instance of your app will be destroyed.

B4X:

'garbage collection
Sub BeforeUnload
    vuetify.Destroy
End Sub

Please note without this code your app WILL CRASH via pressing F5.

Vue “blue pills” and how to “detach from the matrix” — A story about how I fixed my Vue App Memory…

Here, the story goes….

mbanga-anele.medium.com

Mashiane · Apr 9, 2022

[BANanoVuetifyAD3] Encrypting & Decrypting Traffic between JavaScript (Encrypt) & PHP (Decrypt)

Ola DISCLAIMER: ALWAYS RUN YOUR PHP WEBSERVER ON TOP ON SSL Download Source code to REPRODUCE (Extracted from the BVAD3 Library) Whilst you might be secure when running PHP apps on top of SSL, the issue at times is internal and the risks it poses. Anyone who has access to your app can access...

www.b4x.com

Mashiane · Apr 9, 2022

Cancelling Page Refreshes (F5)

Pressing F5 reloads the current page, taking into account the cache. This means the whole lifecycle event of the page will start from the beginning.

Pressing Shift + F5 or Ctrl F5 does not delete the cache, but ignores it.

So a way to detect "beforeunload" is needed, thus the BeforeUnload event added previously.

Window: beforeunload event - Web APIs | MDN

The beforeunload event is fired when the current window, contained document, and associated resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.

developer.mozilla.org

So the 'beforeunload' event will be fired when a user presses F5 / clicks refresh and will affect the current page.

With already have a Destroy and need a DoNotDestroy call, which will prevent the app being destroyed / restarting.

This we have updated the signature for the BeforeUnload callback so that its..

B4X:

Sub BeforeUnload (e As BANanoEvent)
vuetify.DoNotDestroy
End Sub

It is the opposite of the last callback we discussed before. With this pressing F5 will not have any effect on the app.

To be updated soon!

Mashiane · Apr 13, 2022

MySQL PHP - Traffic Encryption Between JavaScript & PHP

DISCLAIMER: ALWAYS RUN YOUR PHP WEBSERVER ON TOP ON SSL

This functionality enables one to encrypt & decrypt traffic between their BANano JavaScript WebApps & their MySQL PHP based connections.

NB. The DataSource Will do this automatically based on settings, however for manual class definitions a few things need to be set.

Step 1: In the mysqlconfig.php file, add a DB_KEY constant. This will have your SALT key.

Step 2: Update the DataSource. If no encryption should take place leave these as unchecked.

NB: Also specify the SALT property of the DataSource to be the same as in mysqlconfig.php

Encrypt To means all traffic TO MySQL PHP server will be encrypted.
Encrypt From means all traffic FROM MySQL PHP server will be encrypted.
You can turn on To and tuff off From too, so that you have encryption to ON and encryption from off.

If you have multiple data-sources in your app, add a data-source in pgIndex, set-it up with all the parameters you need. IT MUST NEVER be set for Dynamic connection and will use the mysqlconfig.php file for connectivity.

After BANano.LoadLayout, call

B4X:

vuetify.GetBackEnd(dsOnPgIndexOnly)

This saves your connection parameteres and some useful settings on your MASTER data-source to vuetify.

In all other pages besides pgIndex, after BANano.LoadLayout, call

B4X:

vuetify.SetBackEnd(eachDataSourceOnThisPage)

For each data-source on the page. This will apply the same settings used, except for tables, fields etc, but just the basic settings.

For examples, on the master DS, setting, ShowLogs, will turn on all ShowLogs for all data-sources in your app and turning this off, will turn off all ShowLogs for all data-sources.

Using Dim xxx As BANanoMySQLE on your code

If you have Dim xxx As BANanoMySQLE on your code and are using MySQL PHP, if you want to encrypt your data, you need to.

B4X:

Dim xxx As BANanoMySQLE
xxx.Initialize
'
vuetify.SetBackEndMySQLE(xxx)

The class calls to any of these methods are OK, btw, these execute BANano.CallInlinePHPWait internally, will fire the encryption.

B4X:

GetSumWait
UpdateAllWait
UpdateWhereWait
UpdateWait
SelectDistinctAllWait
SelectAllWait
SelectEverythingWait
DeleteWhereWait
DeleteAllWait
SelectDistinctWhereWait
SelectWhereWait
ExistsWait
ReadWait
GetCountWait
DeleteWait
InsertWait
DropTableWait
ExecuteWait
SelectMaxWhereWait
SelectWhereAscDescWait
SelectWhere1Wait
GetTableNamesWait
DescribeTableWait
ColumnNamesWait
GetMinWait
GetMaxWait

Also if you need to encrypt & decrypt for a particular BANanoMySQLE / DataSource, you can just do so after SetBackEnd/SetBackEndMySQL calls in code.

NB: If your app will not use this methodology, please DO NOT change anything.

#Happy BVAD3 Coding.

Mashiane · Apr 14, 2022

VChartKick HiddenIndices

This functionality returns an object/map of hidden indices each time you hide a chart data-set by clicking the legend.

B4X:

Private Sub VChartKick2_Click (e As BANanoEvent)
    Log(VChartkick2.HiddenIndices)
End Sub

Kitchen Sink & Library Updated..

Mashiane · Apr 15, 2022

ANNOUNCEMENT: SithasoVant3 Mobile WebApp Development UIKIt

Hello

We are taking pre-orders for the SithasoVant3 Mobile WebApp Development UIKit at an affordable price of $20.00, the paypal address is anele@mbangas.com.

It's been more than a month since the development of this product started and it is with pleasure that Phase 1 is complete.

This phase is basically about the UI and its pre-built components, which are mostly plug and play. For this UI we have separated a lot of concerns. You build it like you like it to suit your needs with all the building blocks available.

All components are easily drag and drop to the abstract designer, then generate events and then write your code.

We will be making available mobile apps templates created with this UI Kit soon.

SithasoVant3 - Mobile App Development with Vant3 & Vue3 Options API - Basic Components

SithasoVant3 - Mobile App Development with Vant3 & Vue3 Options API - Form Components

SithasoVant3 - Mobile App Development with Vant3 & Vue3 Options API - Action Components

SithasoVant3 - Mobile App Development with Vant3 & Vue3 Options API - Navigation Components

SithasoVant3 - Mobile App Development with Vant3 & Vue3 Options API - Display Components

SithasoVant3 - Mobile App Development with Vant3 & Vue3 Options API - Business Components

Built with Vue3, Vant, B4X and BANano.

PS: With your pre-order you get to have access to the latest source code and demo of the complete SithasoVant3 Mobile WebApp Development UIKit.

Mashiane · Apr 15, 2022

Tip: VField Handling Foreign Data

Step 1: In the field that will be the combo, specify these details.

"Item Value" should be the field name on "this" table. Also specify the details of the foreign table, foreign key etc so that "this vfield" will know where to lookup from.

This will need another data-source, after adding and and in it specifying the connection details, the tables to source content from, AFTER you have loaded the data-table with the source from your table, execute.

theotherDataSource.GetForeignData AFTER "this" data-table.Reload call.

Internally

B4X:

'uses the values specified for the foreign data of the dropdown
'NB: USE ANOTHER DATA_SOURCE FOR THIS OPERATION
'<code>
'Private Sub (DataSource)_get(fieldname) (Success As Boolean, Response As String, Error As String, affectedRows As Int, Result As List)
'If Success And Response = DataSource.RESULT_SUCCESS Then
'    'update the contents of the combo
'    (fieldname).SetItems(component, result)
'Else
'    vuetify.ShowSwalError("The operation could not be executed, please try again!")
'     Return
'End If
'End Sub
'</code>
Sub GetForeignData(ds As BananoDataSource)
    Dim qry As String = $"select ${sDataKey},${sDataValue} from ${sDataSource} order by ${sDataValue}"$
    ds.CLEAR_PARAMETERS
    ds.CUSTOM_QUERY($"get${sFieldName}"$, qry)
End Sub

This will expect a callback, being "get(fieldname)" where fieldname is the name of the field you used in your VField "fieldname" property. You can hover around its definition to get the code.

ta!

PS: Example source will be provided soon for more clarity.

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads