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

Mashiane · Dec 18, 2020

IMPORTANT ANNOUNCEMENT Version 2.67+

Download

The method to add the templates to lists has been updated, in tutorial 38. This attempts to make it easier to build the lists.

1. Add the list
2. Specify the Options
3. Add template
4. Bind list

B4X:

'inject a list
    Dim list6 As VueElement = vuetify.AddList(Me, vlists.MatrixID(3, 2), "list6", True, True, True, Null)
    'initialize the listview options, we use the default options
    'to source the data
    Dim list6Options As ListViewItemOptions = vuetify.NewListViewItemOptions
    'set the data source of the list items
    list6Options.dataSource = "topics"
    'add the group template to the list
    list6.AddListViewGroupTemplate(0, list6Options)
    lists.BindVueElement(list6)

B4X:

'inject a list
    Dim list5 As VueElement = vuetify.AddList(Me, vlists.MatrixID(3, 1), "list5", True, True, True, Null)
    'initialize the listview options, we use the default options
    'to source the data
    Dim list5Options As ListViewItemOptions = vuetify.NewListViewItemOptions
    'set the data source of the list items
    list5Options.dataSource = "emails"
    list5Options.showrightrating = True
    'add the template to the list
    list5.AddListViewTemplate(0, list5Options)
    'bind the template
    lists.BindVueElement(list5)

Regards

Mashiane · Dec 19, 2020

Part 39 is out..

Download

We add v-switches to either side of the list.

joulongleu · Dec 20, 2020

Hi Mashiane: list3_rightclick event no action

Mashiane · Dec 20, 2020

joulongleu said:
list3_rightclick event no action

It should be fixed now, https://github.com/Mashiane/BANanoVuetifyAD3

Mashiane · Dec 20, 2020

IMPORTANT ANNOUNCEMENT OF BREAKING CHANGES - Version 2.70 BETA

Download, https://github.com/Mashiane/BANanoVuetifyAD3

This update ensures that BVAD3 works well with small devices. We have added a XS breakpoint. This ensures that apps scale nicely to cellphone devices. This was not working properly before due to a missing XS breakpoint when creating grids etc.

For example, instead of AddColumns(1, 12, 12, 12, 12) we have AddColumns(1, 12, 12, 12, 12, 12)

Offsets are now 5, sizes are now 5 instead of 4.

This means that your views and columns should have a definition of XS=12, S=12, M=12, L=12, X=12 for example.

Tutorial 40 just deals with these changes and nothing else.

For more details, see the designer layouts and any AddColumns?? method calls. By default, the column size for XS=12

Ta!

NB: Your app with be definitely be broken with this update if it has to be used on cellphones. Update the grid definitions.

Good news is that we are closer to making sure that this BETA is released and used for production purposes.

Mashiane · Dec 24, 2020

Tutorial 40a: The MySQLCRUD class to build CRUD code e.g. data-table and dialog box.

Download Version 2.75 BETA

This library class helps one generate CRUD source code for MySQL backend and the generated CRUD source code can be easily adopted as per tutorial 34... for MSSQL, SQLite and BANanoSQL databases, after all, those share 99% source code for CRUD.

MySQLCRUD

Diag_AddTextField (fldName As String, row As Int, col As Int, vmodel As String, title As String)
add a text field to the dialog
Diag_AddTextArea (fldName As String, row As Int, col As Int, vmodel As String, title As String)
add a text area to the dialog
Diag_AddTimePicker (fldName As String, row As Int, col As Int, vmodel As String, title As String)
add a time picker dialog
Diag_AddDatePicker (fldName As String, row As Int, col As Int, vmodel As String, title As String)
add a date picker to the dialog
Diag_AddFileInput (fldName As String, row As Int, col As Int, vmodel As String, title As String, bMultiple As Boolean)
add a file input to the dialog
Diag_AddPassword (fldName As String, row As Int, col As Int, vmodel As String, title As String, maxLen As Int)
add a password to the dialog
Diag_AddCombo (fldName As String, row As Int, col As Int, vmodel As String, Title As String, DataSource As String, Key As String, Value As String, bReturnObject As Boolean, bMultiple As Boolean)
add a combo to the dialog
Diag_AddSelect (fldName As String, row As Int, col As Int, vmodel As String, Title As String, DataSource As String, Key As String, Value As String, bReturnObject As Boolean, bMultiple As Boolean)
add a select to the dialog
Diag_AddAutoComplete (fldName As String, row As Int, col As Int, vmodel As String, Title As String, DataSource As String, Key As String, Value As String, bReturnObject As Boolean, bMultiple As Boolean)
add an auto complete to the dialog
Diag_AddCheckBox (fldName As String, row As Int, col As Int, vmodel As String, title As String, YesValue As Object, NoValue As Object)
add a checkbox to the dialog
Diag_AddSwitch (fldName As String, row As Int, col As Int, vmodel As String, title As String, YesValue As Object, NoValue As Object, bInset As Boolean)
add a switch to the dialog
Diag_AddRadioGroup (fldName As String, row As Int, col As Int, vmodel As String, Title As String, DataSource As String, Key As String, Value As String, bRow As Boolean, bMultiple As Boolean)
add a radio group to the dialog
Diag_AddImage (fldName As String, row As Int, col As Int, url As String, lazysrc As String, alt As String, width As String, height As String)
add an image to the dialog
DT_SetTextArea (colName As String, bLarge As Boolean)
set a text area data-table edit dialog
DT_SetTextField (colName As String, bLarge As Boolean)
set a text field data-table edit dialog
DT_AddTitleIcon (elID As String, eIcon As String, btnColor As String)
add an icon to the data-table toolbar
DT_AddAction (colField As String, colTitle As String, colIcon As String)
add an action column to the data-table
DT_AddIconView (colField As String, colTitle As String, colColor As String)
add an icon view column to the data-table
DT_AddChip (colField As String, colTitle As String, colColor As String)
add a chip column to the data-table
DT_AddSwitch (colField As String, colTitle As String)
add a switch column to the data-table
DT_AddCheckBox (colField As String, colTitle As String)
add a checkbox column to the data-table
DT_AddImage (colField As String, colTitle As String)
add an image column to the data-table
DT_AddFileSize (colField As String, colTitle As String)
add a file size column to the data-table
DT_AddTime (colField As String, colTitle As String)
add a time column to the data-table
DT_AddMoney (colField As String, colTitle As String)
add a money column to the data-table
DT_AddLink (colField As String, colTitle As String, target As String)
add a link column to the data-table
DT_AddAvatarImg (colField As String, colTitle As String)
add an avatar column to the data-table
DT_AddRating (colField As String, colTitle As String)
add a rating column to the data-table
DT_AddProgressCircular (colField As String, colTitle As String)
add a progress circular column to the data-table
DT_AddProgressLinear (colField As String, colTitle As String)
add a progress linear column to the data-table
DT_AddColumn (colName As String, colTitle As String)
add a column to the data-table
DT_AddDateColumn (colName As String, colTitle As String, colFormat As String)
add a date column to the data-table
DT_AddDateTimeColumnDate (colName As String, colTitle As String, colFormat As String)
add a date time column to the data-table
DT_AddNumberColumn (colName As String, colTitle As String, colFormat As String)
add a number column to the data-table
DT_AddButtonColumn (colName As String, colTitle As String)
add a button column to the data-table
DT_AddLinkColumn (colName As String, colTitle As String, target As String)
add a link column to the data-table
DT_AddColumn1 (colName As String, colTitle As String, colType As String, colWidth As Int, colSortable As Boolean, colAlign As String)
add a column to the data-table
AddDefaults (fld As String, def As String)
set dault value for a field
AddVisibility (fld As String, bVisibility As Boolean)
set visibility for a field
Prepare As MySQLCRUD
prepare for execution
AddStrings (stringNames As List)
add field data types - strings
AddFilters (fltName As List)
add columns to filter
AddIntegers (integerNames As List)
add field data types - integers
AddDoubles (doubleNames As List)
add field data types - doubles
AddBlobs (blobNames As List)
add field data types - blobs
ToString As String
convert to string
Save
save the generated source code

Above, we have methods here for Diag (Dialog) and DT (Data-Tables). The generated source code will be used to draw up a dialog box for user input and data-table for listing records etc, linked to a MySQL backend database.

Usage

1. In your MySQL, create a database named "test" and a table named "users". The .AddStrings and .AddIntegers method calls below have your field names and types. Use those to create the schema of your Users table.

2. Create a new Code Module, name it ViewMySQLUsers, you can use tutorial 40 for this.

3. On BANano_Ready, define your code builder. This is an example. This will generate a text file.

B4X:

'define and initialize the code builder
    Dim crud As MySQLCRUD
    crud.Initialize
    'define the database name
    crud.databasename = "test"
    'define the table name
    crud.tablename = "user"
    'what is the primary key of this table
    crud.PrimaryKey = "userid"
    'which field is the auto-increment field, if none comment out
    crud.AutoIncrement = "userid"
    'what is the singular name for each record
    crud.Singular = "User"
    'what is the plural name for many records
    crud.Plural = "Users"
    'which field should be used to sort the records
    crud.SortBy = "fullname"
    'what is the component name to create
    crud.componentname = "users"
    'we have an alert/confirm dialog
    crud.HasDialog = True
    'IMPORTANT before execution
    crud.Prepare

    'add data types for the backend
    crud.AddStrings(Array("firstname", "lastname", "add1", "add2", "add3", "city", "tel1", "tel2", "email", "active", "profilepic", "password", "regdate", "fullname"))
    crud.AddIntegers(Array("userid", "provinceid"))

    'add these after data type indications to specify the default values per field
    crud.AddDefaults("userid", -1)
    crud.AddDefaults("provinceid", -1)
    crud.AddDefaults("firstname", "")
    crud.AddDefaults("lastname", "")
    crud.AddDefaults("add1", "")
    crud.AddDefaults("add2", "")
    crud.AddDefaults("add3", "")
    crud.AddDefaults("city", "")
    crud.AddDefaults("tel1", "")
    crud.AddDefaults("tel2", "")
    crud.AddDefaults("email", "")
    crud.AddDefaults("active", "Yes")
    crud.AddDefaults("profilepic", "")
    crud.AddDefaults("password", "")
    crud.AddDefaults("regdate", "")
    crud.AddDefaults("fullname", "")

    'when dialog is opened, focus on which field. NB: This currently raises an error, comment it out on final file
    crud.focuson = "firstname"
    'the field value to show to confirm deletion
    crud.DisplayField = "fullname"
    '
    'the data-table has search
    crud.DT_HasSearch = True
    'the data-table has an add new button
    crud.DT_HasAddNew = True
    'the data-table has clear sort
    crud.DT_HasClearSort = True
    'the data-table has a column visibility filter
    crud.DT_HasFilter = True
    'the data-table has a refresh button
    crud.DT_HasRefresh = True

    'the data-table has an edit column
    crud.DT_HasEdit = True
    'the data-table has a delete column
    crud.DT_HasDelete = True
    '
    'add columns to data table
    'crud.DT_AddColumn("transtypeid", "Type ID")
    crud.DT_AddAvatarImg("profilepic", "Profile Pic")
    crud.DT_AddColumn("firstname", "First Name")
    crud.DT_AddColumn("lastname", "Last Name")
    crud.DT_AddColumn("email", "Email")
    crud.DT_AddColumn("tel1", "Mobile #")
    crud.DT_AddDateTimeColumnDate("regdate", "Registration", "")
    crud.DT_AddSwitch("active", "Active")

    'we want inline-editing on the data-table, these columns should use a text field
    crud.DT_SetTextField("firstname", True)
    crud.DT_SetTextField("lastname", True)
    crud.DT_SetTextField("email", True)
    crud.DT_SetTextField("tel1", True)
  
    'dialog settings
    'set visibility for the fields you want hidden in the dialog
    crud.AddVisibility("userid", False)
    'the width of the dialog box
    crud.DialogWidth = "400"

    crud.Diag_AddTextField("userid", 1, 1, "userid", "User #")

    crud.Diag_AddImage("profilepic", 2, 1, "profilepic", "", "User Profile", "80", "80")
    crud.Diag_AddFileInput("chooseprofile", 2, 2, "chooseprofile", "Choose Profile Picture", False)

    crud.Diag_AddTextField("firstname", 3, 1, "firstname", "First Name")
    crud.Diag_AddTextField("lastname", 3, 2, "lastname", "Last Name")

    crud.Diag_AddTextField("tel1", 4, 1, "tel1", "Mobile #")
    crud.Diag_AddTextField("tel1", 4, 2, "tel1", "Telephone #")

    crud.Diag_AddTextField("add1", 5, 1, "add1", "Address Line 1")
    crud.Diag_AddTextField("add2", 6, 1, "add2", "Address Line 2")
    crud.Diag_AddTextField("add3", 7, 1, "add3", "Address Line 3")
    crud.Diag_AddTextField("city", 8, 1, "city", "City")
    crud.Diag_AddTextField("provinceid", 8, 2, "provinceid", "Province")

    crud.Diag_AddSwitch("active", 9, 1, "active", "Active", "Yes", "No", True)
     '
    crud.Save

4. Paste the contents of the text file to your ViewMySQLUsers code module. Initialize the ViewMySQLUsers on AddRouters and also add it to your Links. Ensure the msconfig.php file is set propertly.

5. In your app, comment the builder code out and run your app.

Try it out!

PS: You need to update the code before .BuildGrid for the dialog to meet the requirements of your dialog. Reference the BANanoExcel library from the External Libraries folder from the repo.

Known Issues:

CheckBoxes, Switches have a data-binding bug with the v-dialog. Still investigating.

Mashiane · Dec 24, 2020

Version 2.77 BETA pushed to fix bugs on avatars...

Download

joulongleu · Dec 24, 2020

Hi Mashiane:Very good

How to generate a text file?

joulongleu · Dec 25, 2020

Hi @Mashiane: After trying for many days, I want to add components at BANanoVuetifyAD3 home page but I have not been able to succeed

Mashiane · Dec 25, 2020

joulongleu said:
How to generate a text file?

As an example, copy the code on point 3 above on https://www.b4x.com/android/forum/t...ps-with-banano-for-dummies.124548/post-786280 to BANano_Ready subroutine and Run your app.

The crud.save call is what generates the text file.

You need to have BANanoExcel referenced on your app as one of the dependency files are in that library. You will find that in the External Libraries folder of the repo.

Its now at 2.77 after some bug fixes.

Mashiane · Dec 25, 2020

joulongleu said:
I want to add components at BANanoVuetifyAD3 home page but I have not been able to succeed

There is nothing special about the home page, its just like any other page on the tutorial, the only thing is that its path should be "/" ONLY.

For example, go to the ViewButtons page or any other page for that matter and define the path after you initialize the VueComponent.
Insert the path definition code line EXACTLY after the .initiailize call for example.

B4X:

'initialize the page component
buttons.Initialize(Me, name)
'define this page as the home page.
buttons.path = "/"

Run your app, on the browser, hold shift and click the refresh button.

NB. There should only be 1 home page for the app.

Ta!

joulongleu · Dec 25, 2020

Mashiane said:
There is nothing special about the home page, its just like any other page on the tutorial, the only thing is that its path should be "/" ONLY.

For example, go to the ViewButtons page or any other page for that matter and define the path after you initialize the VueComponent.
Insert the path definition code line EXACTLY after the .initiailize call for example.

B4X:

'initialize the page component buttons.Initialize(Me, name) 'define this page as the home page. buttons.path = "/"

Run your app, on the browser, hold shift and click the refresh button.

NB. There should only be 1 home page for the app.

Ta!

solved,Thank you so much

Mashiane · Dec 25, 2020

Tip:

To generate favicons for your app, visit,

'https://www.favicon-generator.org/

Mashiane · Dec 25, 2020

Upcoming Changes to MySQLCRUD

PHP based back-ends

1. Generate MySQL backend source code

B4X:

Dim crud As MySQLCRUD
    crud.Initialize("BANanoMySQLE")

2. Generate MSSQL backend source code

B4X:

Dim crud As MySQLCRUD
    crud.Initialize("BANanoMSSQLE")

3. Generate SQLite backend source code

B4X:

Dim crud As MySQLCRUD
    crud.Initialize("BANanoSQLiteE")

Remember to update the database name to be the path for SQLite e.g.

B4X:

crud.databasename = "./assets/test.db"

Ta!

Mashiane · Dec 25, 2020

Tip:

Download Version 2.79 BETA

Uploading files with the v-fileinput.

1. Add the file input to your dialog or page..

B4X:

Dim chooseprofile As VueElement = vuetify.AddFileInput(Me, UserCont.MatrixID(3, 2), "chooseprofile", "user.chooseprofile", "Choose Profile Picture", "", False, "", Null)
    chooseprofile.HideDetails = True
    users.BindVueElement(chooseprofile)

2. Use the element id and create a change sub routine.

B4X:

Sub chooseprofile_change(fileObj As Map)
    If banano.IsNull(fileObj) Or banano.IsUndefined(fileObj) Then Return
    'get file details
    Dim fileDet As FileObject = BANanoShared.GetFileDetails(fileObj)
    Dim fn As String = fileDet.FileName
    'you can check the size here
    'start uploading the file
    Dim fd As BANanoObject
    fd.Initialize2("FormData", Null)
    fd.RunMethod("append", Array("upload", fileObj))
    Dim Res As String = banano.CallAjaxWait("./assets/upload.php", "POST", "", fd, True, Null)
    Dim result As Map = banano.FromJson(Res)
    Dim sstatus As String = result.Get("status")
    Select Case sstatus
    Case "error"
        vuetify.ShowSnackBarError("The file was not uploaded successfully!")
        Return
    Case "success"
        vuetify.ShowSnackBarSuccess("The File was uploaded successfully!")
    End Select
    Dim fp As String = $"./assets/${fn}"$
    users.SetData("user.profilepic", fp)
End Sub

This code here...

B4X:

  users.SetData("user.profilepic", fp)

Just ensures that an image element on the dialog is updated with the picture

NB: The server should have write permissions.

Ta!

Mashiane · Dec 27, 2020

Update to the Switches and Checkbox examples.

Example 1 - no true-value or false-value are used.
Example 2 - true-value=Yes and false-value=No
Example 3 - true-value=1 and false value = 0
Example 4 - previous example

Checkboxes work the same as switches, the only difference is the element name v-checkbox.

Example 1 - no true-value or false-value is used.
Example 2 - previous example.

Mashiane · Dec 27, 2020

Download 2.84 BETA with updates Switches & Checkbox Examples.

NB: There is no official folder on the tutorials with Part 41

Enjoy!

Mashiane · Dec 27, 2020

Tip

If you have many input components on your page and dialog, linked to the same model structure. You can use a map to bind vmodels.

1. Initialize the map variable.

B4X:

Dim user as map = createmap()
vc.SetData("user", user)

2. Create dialog with v-model binding.

B4X:

Dim firstname As VueElement = vuetify.AddTextField1(Me, UserCont.MatrixID(4, 1), "firstname", "user.firstname", "First Name", Null)
    firstname.HideDetails = True
    users.BindVueElement(firstname)
   
    Dim lastname As VueElement = vuetify.AddTextField1(Me, UserCont.MatrixID(4, 2), "lastname", "user.lastname", "Last Name", Null)
    lastname.HideDetails = True
    users.BindVueElement(lastname)

Note that the v-model for each of these is prefixed by user.

When you want to read all the values entered.

B4X:

Dim user as Map = vc.GetData("user")

This will return a map object that you can save/update to backend database.

Also, if you just want to update one element, you could execute.

B4X:

vc.SetData("user.firstname", "Mashy")

It will only update the firstname key of the map variable.

You can however, run a command like this.

B4X:

Dim user as map = CreateMap()
user.put("firstname", "Mashy")
user.put("lastname", "Mbanga")

and execute

B4X:

vc.SetData("user", user)

Enjoy!

Mashiane · Dec 27, 2020

Part 40

Download Version 2.85 BETA

We create expansion panels, add a container with one with a H1 element.

Mashiane · Dec 29, 2020

Part 41 - Attempting Firebase Messaging + Notifications using a Token

1. Goto Firebase.
2. Goto firebase console.
3. Add Project > Project Name > Create Project

On Project Overview
Goto Project Settings > General > Your Apps > Select Web Platform

Ensure you get your config settings.

On project settings, goto Cloud Messaging, then Web Push Notifications and generate the key/pair, this is something called a vapidKey, you will use this later.

Sending Test Messages.

On the navBar... you will select Clould Messaging

You will be provided with... enter title and notification text and click send test message.

Click Send test message and enter the provided token. A notification will appear on your page. These run in the back-ground using a service worker. I've noted these fire twice for now.

NB: Ensure that chrome is set not to display native notifications. e.g. on chrome browser

B4X:

chrome://flags/#enable-native-notifications

To be continued...

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

Expert

Expert

Active Member

Expert

Expert

Expert

Expert

Active Member

Active Member

Expert

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads