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

Mashiane · Dec 22, 2021

This makes for some nice reading:

Pros And Cons Of Using Vue.js for Web Development | Nordic APIs |

Vue.js is one of the most popularly used JS frameworks for developing UIs and single-page applications. Here, we look at the pros and cons of using it.

nordicapis.com

Mashiane · Dec 30, 2021

Good day...

The BVAD3.b4xtemplate has been slightly updated.

Kindly download the latest version here.

This should be copied to your B4J Additional Libraries Folder.

Mashiane · Dec 30, 2021

Upcoming Changes: Show Date Buttons (True/False)

For the DatePicker used in textboxes, we have added a new property in the property bag. This enables one to hide the buttons on the date picker. By default this is True, when turned off, there is no Cancel, Clear and Ok buttons. This can speed up date entry. This is also available on the VField component.

@ThanksToARecommendationFromAFriend.

Mashiane · Dec 30, 2021

Upcoming Updates: V-Chip - MinusPlus

You activate this by indicating that the vchip is MinusPlus on the property bag.

Reproduction

1. Drop a VChip on the layout
2. Check the MinusPlus property bag option
3. The caption will be the initial value.
4. Indicate the two-way binding VModel to bind the chip value to i.e. age. You can get and set the age with .SetData("age", 10) or .GetData("age")

5. Clicking + / - on the chip increments / decrements the age value, this is done by calling IncrementChip

B4X:

Private Sub VChip10_Minus (e As BANanoEvent) VChip10.DecrementChip(about) 'get the value Dim vn As String = VChip10.GetValue(about) vuetify.ShowSnackBarInfo(vn) End Sub Private Sub VChip10_Plus (e As BANanoEvent) VChip10.IncrementChip(about) 'get the value Dim vn As String = VChip10.GetValue(about) vuetify.ShowSnackBarInfo(vn) End Sub

Below is an example of setting a random value to the chip

B4X:

Private Sub btnRandom_Click (e As BANanoEvent) Dim xi As Int = Rnd(1, 50) VChip10.SetValue(about, xi) End Sub

Mashiane · Dec 30, 2021

Upcoming Updates: Updates to scroll bars

Add this to pgIndex / BrowserIndex (Update : this is now built into the library)

B4X:

#if css
::-webkit-scrollbar {
  background: transparent;
  width: 12px !important;
}
::-webkit-scrollbar-thumb {
  background: #606060 !important;
  border-radius: 100px !important;
}
#End If

This is more evident here: (see right scrollbar)

Mashiane · Dec 31, 2021

The VField MinusPlus Chip Counter

1. Place a VField inside a VForm
2. Indicate the field name to bind the value to e.g. age
3. The Title/Caption should be the value of the field i.e. age.
4. The Table Heading indicates the Heading to show for this in the VueTable
5. The Data Type is integer
6. Select the Component Type - MinusPlus.

This will generate a MinusPlus Chip component on your form as per example below.

Mashiane · Dec 31, 2021

Upcoming Updates: VField Component Sizes

In the Add Person Screen above, the Full Name text field takes the whole 12 spaces of the dialog, filling up all the available space in that row.

There are times when you want to specify your own size for a column where your component is placed, for example, span of 6 below for fullname.

Option 1

On the FullName row you can add another VField, give it a div component type and indicate that it will be placed at R2C2, whilst the fullname will sit in R2C1.
This option uses 2 vfields to ensure that the components are placed next to each other and thus splitting the dialog.

This is just like the 3rd row, where we have first name and lastname.

We have the first name at R3C1

and we have last name at R3C2

However for Option 1 here, the component type should be DIV as you would not want any other component next to the first name.

Option 2

As a column size should span 12 spaces, you can with this option just indicate the size of the VField you need between 1 & 12.

In this example, the first name will sit in R2C1, however, we have indicated on Sizes SMLX that for Small (12), Medium to XTraLarge (6). Thus when the form is being created during BindState, this "new" size will be picked up and applied without a need for a second div.

With this option, one is able to create components of whatever, size they want at each RC and it just needs 1 VField in this case.

Mashiane · Dec 31, 2021

Upcoming Updates: VField Component Offsets

Offsets exists to nudge stuff to the right. In this example, we have nudged the full name 6 spaces to the right.

Care however should be practised as the size of the R2C1 should span 12 columns. To achieve the 12 spaces span, we have set an offset of 6 (nudge to the right 6 spaces) and also ensure the size of the fillname is 6, so that it does not extend beyond the dialog.

To offset, just like the example above, you provide the offsets in the VField for that RC. This is done in the Offsets SMLX, where each offset per device is specified.

Mashiane · Dec 31, 2021

Upcoming Updates: Vfield Computed VModel

The VModel is the two way data-binding of components to the data-model. Whilst one can specify the VField fieldname, which will link to the table to save content to, one can also compute the value of the vmodel.

A simple of this is the date-picker. The date internally on the data-base will be saved as yyyy-mm-dd, however when displayed, it shows as something nice.

The UI Part

Step 1

We need to link each VField to a VForm. On the VForm we specify the RecordSource, this is the single record specification for our form entry. For example.

In the above v-form, our table name is people (this should link to a real database table name).
We have given this v-form a record source of person, i.e. each record in the table people is called a "person"
For Singular, as humans, we call a single individual, a Person and many individuals People i.e. plural. These are used by the DataSource for the delete confirmation.

This helps us to ensure that to read the complete form content made up of all VFields inside the form, we can just execute

B4X:

dim pers as map = .GetData("person")
log(pers)

or do whatever manipulation we want.

Step 2

We add all our VFields to the VForm. We added a first name

this makes the assignment to the firstname to be person.firstname internally in our app. The Vfield is linked to the VForm with person recordsource.

We also added lastname

This makes the assignment person.lastname

Now what we want to do is that on the full name text field, when a person enters the first and last name, the fullname should be "computed", based on the entered first and last name, as depicted below.

For this we are not using any change / keypress or any other event but the vmodel.

For the fullname field, we specify the Compute VModel property.

In simple terms, we want the computed vmodel for the fullname to be

B4X:

person.firstname + ' ' + person.lastname

being the firstname, a space and the last name.

Thus anytime person.firstname and person.lastname changes, the fullname will be automatically updated.

As noted above, the Compute VModel property has received a JAVASCRIPT code script. This only works for the UI. We need a second leg where for example, the fullname should be "persisted" to the db, as an example.

For the second leg we need to write B4X code for BVAD3 that will actually assign the computed value and save it to the DB. This second leg will not affect the UI but the back-end.

The Back-End Part

The back-end part involves updating the form content just before the content is written to the database.

In this particular case we want to join values of fields and compute a fullname based on firstname and lastname.

The example above only works with the UI, this example is for the back-end.

So in our dialog_ok click method, we need to execute a join of the fields..

B4X:

Private Sub dlgPeople_Ok_Click (e As BANanoEvent)
    frmPeople.JoinFields(home, "fullname", " ", Array("firstname", "lastname"))
    'perform datasource verification
    dsPeople.VERIFY
    'peform the form validation
    home.refs = vuetify.GetRefs
    Dim bValid As Boolean = frmPeople.Validate(home)
    If bValid = False Then
        'the validation has failed
        vuetify.ShowSwalToastError("Please enter all required information!", 2000)
        Return
    End If
    'get the entered content on the form
    Dim person As Map = frmPeople.GetData(home)
    Log(person)
   
    'show a loading indicator on the ok button
    'dlgPeople.OkLoading = True
    'get the record from form (recordsource) and CREATE / UPDATE record depending on mode
    'dsPeople.CREATE_OR_UPDATE
End Sub

As soon as OK is clicked, we execute the JoinFields method of the form, giving it the field to compute and which fields to join.
Then we execute verification and validation.

We also read and logged the form contents.

B4X:

 'get the entered content on the form
    Dim person As Map = frmPeople.GetData(home)
    Log(person)

This produces...

From the .GetData call, we can read the form contents as a map, update the map and then execute .SetData to write the contents back to the form, before its saved to teh DB.

Mashiane · Dec 31, 2021

Computing / Updating Dialog Form Data just before saving it to the Database

When the OK button of an input dialog is clicked, one can read the form contents, manipulate it and then feed it back to the from before the contents are saved to the db.

Step 1: Read the form contents.

B4X:

Private Sub dlgPeople_Ok_Click (e As BANanoEvent)
Dim person As Map = frmPeople.GetData(home)
 
.
.
.

Step 2: Update the form contents.

B4X:

person.put("age", 48)

Step 3: Feed back the updated content to the form, before CREATE_OR_UPDATE is called.

B4X:

frmPeople.SetData(home, person)

CREATE_OR_UPDATE etc will then save the data to the db.

This should be done inside the _OK_Click method.

You can perform any computation you need and update the map as needed.

NB: No matter how many times we change the age value below, because the computation/update of the age happens after the ok click button, it will always be 48.

The complete code

B4X:

Private Sub dlgPeople_Ok_Click (e As BANanoEvent)
    frmPeople.JoinFields(home, "fullname", " ", Array("firstname", "lastname"))
    'perform datasource verification
    dsPeople.VERIFY
    'peform the form validation
    home.refs = vuetify.GetRefs
    Dim bValid As Boolean = frmPeople.Validate(home)
    If bValid = False Then
        'the validation has failed
        vuetify.ShowSwalToastError("Please enter all required information!", 2000)
        Return
    End If
    'get the entered content on the form
    Dim person As Map = frmPeople.GetData(home)
    Log(person)
    person.Put("age", 48)
    frmPeople.SetData(home, person)
    
    'show a loading indicator on the ok button
    'dlgPeople.OkLoading = True
    'get the record from form (recordsource) and CREATE / UPDATE record depending on mode
    'dsPeople.CREATE_OR_UPDATE
End Sub

Mashiane · Dec 31, 2021

Adding VField Rules

A rule checks the validity of an entry. A component can have any number of rules, as long as the callbacks are defined.

You can tell the form should lazy-validate (i.e. when contered is entered per input component) with LazyValidation setting. This is on by default.

After the layout is loaded, we can add rules per each of the fields.

B4X:

frmPeople.AddRule("firstname", "firstnamecheck")
    frmPeople.AddRule("lastname", "lastnamecheck")
    frmPeople.AddRule("lastname", "lastnamesizecheck")

Above we see the lastname field have 2 rules.

Focusing on the .AddRule, gives intellisense that has code we can copy.

The first and last names should be specified, as these are required.

B4X:

Sub firstnamecheck(v As String) As Object    'ignoredeadcode
    v = BANanoShared.ValidString(v)
    If v = "" Then
        Return "This first name is required!"
    Else
        Return True
    End If
End Sub

Sub lastnamecheck(v As String) As Object    'ignoredeadcode
    v = BANanoShared.ValidString(v)
    If v = "" Then
        Return "This last name is required!"
    Else
        Return True
    End If
End Sub

Also, we want the length of the lastname to be more than 3 characters. As noted above, we added another rule, we then specify the callback.

B4X:

Sub lastnamesizecheck(v As String) As Object    'ignoredeadcode
    v = BANanoShared.ValidString(v)
    Dim lnl As Int = v.Length
    If lnl <= 3 Then
        Return "This last name length cannot be less than 3 characters!"
    Else
        Return True
    End If
End Sub

When we run the code, we have a nice experience. NB: Ensure your form's Hide Details is not checked so that the error messages are shown.

Source Code Attached

Mashiane · Dec 31, 2021

Upcoming Updates: Enhanced Life Cycle Methods

VueJS has life-cycle methods that you can fire at some events in the life of your app. Going forward, the way these will be defined is via.

Step 1:

Copy the event you want from the definition. This is available when you click VueComponent / VuetifyApp in Class_Globals.

Step 2: Take note of your component name

B4X:

Public name As String = "home"

Step 3: Rename the EventName_??? to the name of the VueComponent.

Step 4: Update the source code for the life cycle event.

B4X:

Sub home_mounted
    Dim people As List = home.NewList
    people.Add(CreateMap("id":1, "firstname": "Anele", "lastname":"Mbanga", "age":48))
    people.Add(CreateMap("id":2, "firstname": "Usi", "lastname":"Mbanga", "age":18))
    people.Add(CreateMap("id":3, "firstname": "Olo", "lastname":"Mbanga", "age":12))
    people.Add(CreateMap("id":4, "firstname": "Eso", "lastname":"Mbanga", "age":11))
    people.Add(CreateMap("id":5, "firstname": "Markhams", "lastname":"Mbanga", "age":25))
    people.Add(CreateMap("id":6, "firstname": "Gift", "lastname":"Mbanga", "age":10))
    dtPeople.Reload(people)
End Sub

With this there is no need to add .SetCreated / .SetMounted etc.

Now

.SetCreated = home_created
.SetMounted = home_mounted

YOU DO NOT HAVE TO ADD THESE METHODS with .SetCreated / .SetMounted etc anymore on .Initialize, as long as the ?_created, ?_mounted (etc) are specified as subs in your code module, BVAD3 will know that its a .SetCreated / .SetMounted (etc) call.

Remember
: _oncreated - the UI is not rendered / built. Use it to fetch data from a database / perform API fetch etc.
_mounted - the UI is rendered. use it to update the UI.

NB: If you dont have _created, _mounted (etc), nothing will be linked to .SetCreated / .SetMounted (etc), unless you specify it yourself with either .SetCreated / .SetMounted (etc) or with the _created / _mounted callbacks.

Mashiane · Dec 31, 2021

Upcoming Updates : MinusPlus VChip on VueTable.

Trapping Events - these work like edit / delete for VueTable

B4X:

Private Sub dtPeople_age_Minus (item As Map)
    BANanoShared.DecrementMap(item, "age")
    Log(item)
End Sub

Private Sub dtPeople_age_Plus (item As Map)
    BANanoShared.IncrementMap(item, "age")
    Log(item)
End Sub

You can then manipulate the row item. The table name is dtPeople, the column name is age, the event is a minus / plus.

How to reproduce?

Option 1

Set the option via the VField inside your VForm. This is done on the Column Type. This is the option used in this example.

Option 2

Specify the field name to be a MinusPlus Fields column in the VueTable. Here you can specify, separated by ; all fields in the VueTable to be MinusPlus Fields.

Mashiane · Dec 31, 2021

Version 7.20.1 BETA Available

Please note BVAD3 7.20.1 BETA is now available. This features Vuetify 7.6.2

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

Here is the example that speaks to this version.

BANanoVuetifyAD3/Mashy Teaches BANanoVuetifyAD3/ComboBoxes.zip at main · Mashiane/BANanoVuetifyAD3

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

github.com

This also includes some bug fixes and other improvements.

Updated BVAD3.b4xtemplate

Also download and update the BVAD3 project template, add this to your B4J Additional Libraries folder.

BANanoVuetifyAD3/BVAD3.b4xtemplate at main · Mashiane/BANanoVuetifyAD3

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

github.com

Mashiane · Jan 5, 2022

Upcoming Updates

More v-data-table magic, multi-select combo on form, avatar group on table. BANanoVuetifyAD3 - Powered by B4x + Vuetify + BANano

Mashiane · Jan 5, 2022

Version 7.20.3 BETA is now available + Updated New Awesome Kitchen Sink.

GitHub - Mashiane/BANanoVuetifyAD3: Create websites & webapps using Vuetify & BANano

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

github.com

Mashiane · Jan 6, 2022

Decided to deep dive into some difficult topics...

Known Issues: Inline Editing on the VDataTable DOES NOT WORK as expected for these types of Column Types when Multiple=True, recommendation is rather to set the Column Type as Chips/Normal and edit via your VMsgBox.

These are the variations on the VField

Mashiane · Jan 6, 2022

Showing Tags on the VDataTable.

If you have a multi-select dropdown, you can set the Column Type to Chips on the VField. Below we have customized the colors of the chips in the property bag.

Mashiane · Jan 7, 2022

VDataTable VChip Indicators

Mashiane · Jan 8, 2022

Explaining the VList(View)

The current VList in the Kitchen Sink is made of a tree-like structure like the one below.

Looking at the HTML, one notices a node tree. This is depicted like this in Vuetify documentation.

For BVAD3, we have created a similar structure to ensure that our VList can work with built in templates. This composition is here.

The HTML Tree indicates the level within the tree of each of the nodes we use in BVAD3 to create our template. One can also hide/show each node tree depending on their options via the property bag of the VListOptions used for the VList. For example below, HasDivider, InsetDivider, UseLeftImage have been set so that those components are shown when available.

We chose the tree template for the kitchen sink.

In pgIndex, we have a method to add items to our VList.

B4X:

drwlist.AddItem("", "newstuff", "mdi-vuetify", "light-blue", "What's New", "")
    drwlist.AddItem("newstuff", "minusplusx", "", "", "Minus Plus VChip", "/mpvchip")

This created this tree structure..

The AddItem method is defined as

B4X:

Sub AddItem(parent As String, key As String, iconName As String, iconColor As String, sTitle As String, url As String) As VList
    parent = parent.ToLowerCase
    key = key.ToLowerCase
    '
    Dim nitem As Map = CreateMap()
    nitem.Put("id", key)
    If iconName <> "" Then nitem.Put("icon", iconName)
    If iconColor <> "" Then nitem.Put("iconcolor", iconColor)
    If sTitle <> "" Then nitem.Put("title", sTitle)
    If url <> "" Then nitem.Put("to", url)
    nitem.Put("parentid", parent)
    nitem.Put("visible", True)
    Records.Add(nitem)
    Return Me
End Sub

This uses as map/object which has icon/iconcolor/title etc. These items you will find further down on the VListOptions.

We used mdi-vuetify icon and Whats New title, and the iconcolor is light-blue.

This on the VListOptions we indicate which fields to use to draw the VList via the VListOptions (see DependsOn and Props on the attached Excel Sheet)

By using the Alias, you can get each component after LoadLayout and then add classes or attributes to it.

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

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads