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

Mashiane

Expert
Licensed User
Longtime User
Customizing VueTable Items Per Page

1648599169939.png


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:

1648599227717.png


Ta!

Download updat from Github!

PS: Thanks LJG for pointing this out.
 
Last edited:

Mashiane

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

1648598708811.png


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

There is this setting

1648598756118.png


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..

1648598971346.png


Displayed as...

1648599006355.png


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

Mashiane

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

1649103178541.png


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

VDataTableColumnGrouping.png
 
Last edited:

Mashiane

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

1649458939046.png


VueTableSingleSelect.gif


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

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

VDTGetSelected.gif


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

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

 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

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


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

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

1649820766065.png


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

1649886789734.png



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

Mashiane

Expert
Licensed User
Longtime User
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 [email protected].

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

Expert
Licensed User
Longtime User
Tip: VField Handling Foreign Data

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

1650002290625.png


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