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

Mashiane

Expert
Licensed User
Longtime User
Creating a ListView - Other Item Variants

ListViewVariant.jpg


In this lesson we look at how to create other item variants in the listview. It is recommended one uses one variant template at a time and hide other item using the Use directive in the ListViewOptions component to be linked with the VList.

B4X:
Sub mounted        'ignoreDeadCode
    'clear the listview
    VList1.Clear(page)
    VList1.AddItem("", "home", "mdi-home","orange", "AddItem", "/")
    VList1.AddItemSubTitle("", "home1", "mdi-home","yellow", "AddItemSubTitle", "xxx", "/").SetItemRightChip("home", "10").SetItemRightChipColor("home", "green")
    VList1.AddItemSubTitleChip("", "home12", "mdi-home","yellow", "AddItemSubTitleChip", "xxx", "20", "magenta", "/")
    VList1.AddRightItem("", "homeright", "mdi-vuetify","pink", "AddRightItem", "")
    VList1.AddRightItemSubTitle("", "homeright1", "mdi-vuetify","pink", "AddRightItemSubTitle", "xxx", "")
    '
    VList1.AddAvatarTitleSubTitle("", "user1", "https://randomuser.me/api/portraits/med/men/10.jpg", "AddAvatarTitleSubTitle", "xxx",  "")
    VList1.AddAvatarTitleSubTitleText("", "user2", "https://randomuser.me/api/portraits/med/men/11.jpg", "AddAvatarTitleSubTitleText", "Yeah, see you tomorrow.",  "30 minutes ago", "")
    VList1.AddAvatarTitleSubTitleChip("", "user10", "https://randomuser.me/api/portraits/med/men/70.jpg", "AddAvatarTitleSubTitleChip", "Yeah, see you tomorrow.",  "2", "orange", "")
    VList1.AddAvatarText("", "atext", "AM", "blue","AddAvatarText", "081...", "")
    VList1.AddImage("", "img1", "https://randomuser.me/api/portraits/med/men/18.jpg", "AddImage", "")
    VList1.AddImageTitleSubTitle("", "a1", "https://randomuser.me/api/portraits/med/men/12.jpg", "AddImageTitleSubTitle", "xxx", "")
    VList1.AddImageTitleSubTitleText("", "a2", "https://randomuser.me/api/portraits/med/men/13.jpg", "AddImageTitleSubTitleText", "xxx", "16:09", "")
    VList1.AddImageTitleSubTitleChip("", "a15", "https://randomuser.me/api/portraits/med/men/66.jpg", "AddImageTitleSubTitleChip", "xxx", "33", "purple", "")
    VList1.AddRightAvatar("", "a8", "https://randomuser.me/api/portraits/med/men/14.jpg", "AddRightAvatar", "")
    VList1.AddRightAvatarText("", "a9", "AM", "green", "AddRightAvatarText", "xxx", "")
    VList1.AddRightAvatarTitleSubTitle("", "a10", "https://randomuser.me/api/portraits/med/men/15.jpg", "AddRightAvatarTitleSubTitle", "xxx", "")
    VList1.AddRightImage("", "a11", "https://randomuser.me/api/portraits/med/men/16.jpg", "AddRightImage", "")
    VList1.AddRightImageTitleSubTitle("", "a12", "https://randomuser.me/api/portraits/med/men/17.jpg", "AddRightImageTitleSubTitle", "xxx", "")
    'refresh the drawer
    VList1.Refresh(page)
    vuetify.Loading(False)
End Sub
 

Attachments

  • ListViewVariants.zip
    24.3 KB · Views: 331

Mashiane

Expert
Licensed User
Longtime User
Creating a ListView - Preferences using left check boxes

For this to work, in the VListOptions to be linked to your VList, these options should be set

1657189157257.png


ListViewLeftCheckBoxes.gif


To add items

B4X:
Sub mounted        'ignoreDeadCode
    'clear the listview
    VList1.Clear(page)
    VList1.AddHeader("Lights (On/Off)")
    VList1.AddItemLeftCheckBox("a1", False, "Kitchen", "", "")
    VList1.AddItemLeftCheckBox("a2", False, "Lounge", "", "")
    VList1.AddItemLeftCheckBox("a3", False, "Dining Room", "", "")
    VList1.AddItemLeftCheckBox("a4", False, "Bedroom 1", "Light needs attention", "Urgent")
    
    VList1.AddHeader("Blinds (On/Off)")
    VList1.AddItemLeftCheckBox("a5", False, "Kitchen", "", "")
    VList1.AddItemLeftCheckBox("a6", False, "Lounge", "", "")
    VList1.AddItemLeftCheckBox("a7", False, "Dining Room", "", "")
    VList1.AddItemLeftCheckBox("a8", False, "Bedroom 1", "Dog tore blinds, attend.", "Urgent")
    'VList1.AddItemLeftSwitch("a4", True, "AddItemLeftSwitch", "xxx", "xxx1")
    'VList1.AddItemRightRating("a6", 0.5, "AddItemRightRating", "xxx", "xxx1")
    'VList1.AddItemRightSwitch("a7", False, "AddItemRightSwitch", "xxx", "xxx1")
    'refresh the drawer
    VList1.Refresh(page)
    vuetify.Loading(False)
End Sub

To trap the checked item, we use the LeftClick event

B4X:
Private Sub VList1_LeftClick (item As Map)
    Dim sid As String = item.Get("id")
    vuetify.ShowSwalNotification(sid)
End Sub

To get checked items as a list,,,

B4X:
Private Sub btnGet_Click (e As BANanoEvent)
    Log(VList1.GetPreferencesChecked(page, True))
End Sub

 

Mashiane

Expert
Licensed User
Longtime User
Creating a ListView - Preferences using the Right Check Boxes

The previous post bears reference:

To use the Right Check Boxes in the VList, these options in the VListOptions to be linked to your VList should be activated.

1657190304941.png


ListViewRightCheckBoxes.gif


The code to add items is like this:

B4X:
VList2.Clear(page)
    VList2.AddHeader("Lights (On/Off)")
    VList2.AddItemRightCheckBox("a1", False, "Kitchen", "", "")
    VList2.AddItemRightCheckBox("a2", False, "Lounge", "", "")
    VList2.AddItemRightCheckBox("a3", False, "Dining Room", "", "")
    VList2.AddItemRightCheckBox("a4", False, "Bedroom 1", "Light needs attention", "Urgent")
    
    VList2.AddHeader("Blinds (On/Off)")
    VList2.AddItemRightCheckBox("a5", False, "Kitchen", "", "")
    VList2.AddItemRightCheckBox("a6", False, "Lounge", "", "")
    VList2.AddItemRightCheckBox("a7", False, "Dining Room", "", "")
    VList2.AddItemRightCheckBox("a8", False, "Bedroom 1", "Dog tore blinds, attend.", "Urgent")
    'refresh the drawer
    VList2.Refresh(page)

To trap the check/click event, you use the RightClick event.

B4X:
Private Sub VList2_RightClick (item As Map)
    Dim sid As String = item.Get("id")
    vuetify.ShowSwalNotification(sid)
End Sub
 

Attachments

  • ListViewCheckBoxes.zip
    30.4 KB · Views: 283

Mashiane

Expert
Licensed User
Longtime User
Creating a ListView - Using Left Switches

The previous posts bears reference. One can also use switches for listview preferences.

To use the switches, the VListOptions to be linked to the VList should have these options set

1657192204847.png



ListViewLeftSwitches.gif


To add items..

B4X:
VList1.Clear(page)
    VList1.AddHeader("Lights (On/Off)")
    VList1.AddItemLeftSwitch("a1", False, "Kitchen", "", "")
    VList1.AddItemLeftSwitch("a2", False, "Lounge", "", "")
    VList1.AddItemLeftSwitch("a3", False, "Dining Room", "", "")
    VList1.AddItemLeftSwitch("a4", False, "Bedroom 1", "Light needs attention", "Urgent")
    
    VList1.AddHeader("Blinds (On/Off)")
    VList1.AddItemLeftSwitch("a5", False, "Kitchen", "", "")
    VList1.AddItemLeftSwitch("a6", False, "Lounge", "", "")
    VList1.AddItemLeftSwitch("a7", False, "Dining Room", "", "")
    VList1.AddItemLeftSwitch("a8", False, "Bedroom 1", "Dog tore blinds, attend.", "Urgent")
    'refresh the drawer
    VList1.Refresh(page)

To trap the check/click events, use the LeftClick events

B4X:
Private Sub VList1_LeftClick (item As Map)
    Dim sid As String = item.Get("id")
    vuetify.ShowSwalNotification(sid)
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
Creating a ListView - using Right Switches

ListViewRightSwitches.gif


Adding Items

B4X:
VList2.Clear(page)
    VList2.AddHeader("Lights (On/Off)")
    VList2.AddItemRightSwitch("a1", False, "Kitchen", "", "")
    VList2.AddItemRightSwitch("a2", False, "Lounge", "", "")
    VList2.AddItemRightSwitch("a3", False, "Dining Room", "", "")
    VList2.AddItemRightSwitch("a4", False, "Bedroom 1", "Light needs attention", "Urgent")
   
    VList2.AddHeader("Blinds (On/Off)")
    VList2.AddItemRightSwitch("a5", False, "Kitchen", "", "")
    VList2.AddItemRightSwitch("a6", False, "Lounge", "", "")
    VList2.AddItemRightSwitch("a7", False, "Dining Room", "", "")
    VList2.AddItemRightSwitch("a8", False, "Bedroom 1", "Dog tore blinds, attend.", "Urgent")
    'refresh the drawer
    VList2.Refresh(page)

Trapping Click Event

B4X:
Private Sub VList2_RightClick (item As Map)
    Dim sid As String = item.Get("id")
    vuetify.ShowSwalNotification(sid)
End Sub
 

Attachments

  • ListViewRightSwitches.zip
    36.3 KB · Views: 307

Mashiane

Expert
Licensed User
Longtime User
BVAD3 Kitchen Sink Topic Search

1657214606811.png


The upcoming BVAD3 Kitchen Sink will have a Topic Search. This helps one search for any topic of interest they need.

For example, you want to search for anything in relation to the MongoDB, in the search box you will type mongo. A list of pages in the kitchen sink that relate to that will be shown. The last part of the URL refers to the Kitchen Sink Source code "page" name.

For example, mongodb.

The next thing you will have to do is to locate the page in the kitchen sink, for example:

1657214807589.png


You can then explore the layouts, the code to learn how everything works for CRUD for that page.

PS: If there is anything you cant find, please indicate for us to add it or enhance the search.

Happy Coding..
 

Mashiane

Expert
Licensed User
Longtime User
Creating Forms with VFlexDialog (VDialog+VForm+VFields)

With this you don't have to drop any VFields inside a VForm as you can just define your components via code in the Initialize sub.
As this is based on VForm + VFields, it only works in Design Time.

This is just a better alternative to this example: https://mashiane.github.io/BANanoVuetifyAD3/#/formbuilder, just without using the abstract designer.

If you need functionality to create forms at runtime, see the Dynamic Forms Example.

VFlexDialog.gif


Its simple as...

B4X:
Sub BuildPreferences
    VFlexDialog1.Clear
    'create options
    Dim options As Map = CreateMap()
    options.Put("eng", "English")
    options.Put("afr", "Afrikaans")
    options.Put("xho", "Xhosa")
    options.Put("nde", "isiNdebele")
    options.Put("zul", "isiZulu")
    options.Put("sep", "Sepedi")
    options.Put("ses", "Sesotho")
    options.Put("tsw", "Setswana")
    options.Put("swa", "seSwati")
    options.Put("tsh", "Tshivenda")
    options.Put("xit", "Xitsonga")
    
    'ROW 1
    VFlexDialog1.AddTextField(1, 1, "firstname", "First Name","Anele")
    VFlexDialog1.AddTextField(1, 2, "lastname", "First Name","Mbanga")
    'ROW 2
    VFlexDialog1.AddTextArea(2, 1, "bio", "Biography","")
    'ROW 3
    VFlexDialog1.AddAutoComplete(3, 1, "lang", "Language", options, "eng", True)
    VFlexDialog1.AddColor(3, 2, "hair", "Enter hair color","black")
    'ROW 4
    VFlexDialog1.AddDate(4, 1, "dob", "Enter Date of Birth","1973-04-15")
    VFlexDialog1.AddDouble(4, 2, "height", "Enter your height","1.85")
    'ROW 5
    VFlexDialog1.AddFileInput(5, 1,"image", "Please upload your image")
    VFlexDialog1.AddImage(5, 2, "profile", "./assets/myself.jpg", "100", "100")
    '
    Dim gender As Map = CreateMap()
    gender.Put("male", "Male")
    gender.Put("female", "Female")
    gender.Put("other", "Other")
    'ROW 6
    VFlexDialog1.AddRadioGroup(6, 1, "gender", "Gender", gender,"male", True)
    VFlexDialog1.AddRange(6, 2, "salary", "Salary Range", 5000, 10000, 100, 6000)
    
    'ROW 7
    VFlexDialog1.AddRating(7, 1, "service", 5, "How can you rate our service?", 2)
    VFlexDialog1.AddSlider(7, 2, "loan", "Loan amount", 1000, 5000, 50, 1500)
    
    'ROW 8
    VFlexDialog1.AddTelephone(8, 1, "tel", "Telephone", "")
    VFlexDialog1.AddTime(8, 2, "meet", "Time of Meeting","09:00")
    
    'ROW 9
    VFlexDialog1.AddPassword(9, 1, "pass", "Enter your password","")
    
    'ROW 10
    VFlexDialog1.AddSwitch(10, 1, "active","Active", True, True)
    VFlexDialog1.AddCheckBox(10, 2, "agree", "I agree with Terms & Conditions",True)
    '
    VFlexDialog1.Refresh 
    'get the vFields for bindings
    'COMPULSORY
    txtfirstname = VFlexDialog1.Get("firstname")
    txtlastname = VFlexDialog1.Get("lastname")
    txtbio = VFlexDialog1.Get("bio")
    cbolang = VFlexDialog1.Get("lang")
    colhair = VFlexDialog1.Get("hair")
    dpdob = VFlexDialog1.Get("dob")
    txtheight = VFlexDialog1.Get("height")
    filimage = VFlexDialog1.Get("image")
    imgprofile = VFlexDialog1.Get("profile")
    radgender = VFlexDialog1.Get("gender")
    rngsalary = VFlexDialog1.Get("salary")
    ratservice = VFlexDialog1.Get("service")
    sldloan = VFlexDialog1.Get("loan")
    teltel = VFlexDialog1.Get("tel")
    timmeet = VFlexDialog1.Get("meet")
    pwdpass = VFlexDialog1.Get("pass")
    swtactive = VFlexDialog1.Get("active")
    chkagree = VFlexDialog1.Get("agree")
    'Log(VFlexDialog1.Declarations)
    'Log(VFlexDialog1.Gets)
End Sub

As we have defined a VField, that uses a VFileInput, when its changed event is fired, we get the file, upload it to the assets folder, then get its URL link and use that to update the profile picture displayed. This same principle applies to a normal direct VFileInput component.

B4X:
Private Sub image_Change(fileObj As Map)
    page.refs = vuetify.GetRefs
    'has the file been specified
    If banano.IsNull(fileObj) Or banano.IsUndefined(fileObj) Then Return
    'show the loading indicator
    filimage.UpdateLoading(page, True)
    'get file details
    Dim fileDet As FileObject
    fileDet = BANanoShared.GetFileDetails(fileObj)
    'get the file name
    Dim fn As String = fileDet.FileName
    'you can check the size here
    Dim fs As Long = fileDet.FileSize
    If fs >= 5000 Then
    End If
    'start uploading the file to assets folder
    fileDet = BANanoShared.UploadFileWait(fileObj)
    'get the status of the upload
    Dim sstatus As String = fileDet.Status
    Select Case sstatus
        Case "error"
            'hide the uploader
            filimage.UpdateLoading(page, False)
            vuetify.ShowSnackBarError($"The file '${fn}' was not uploaded successfully!"$)
        Case "success"
            vuetify.ShowSnackBarSuccess($"The file '${fn}' was uploaded successfully!"$)
    End Select
    'get the upload full path
    Dim fp As String = fileDet.FullPath
    'update state of some element like an image
    imgprofile.SetValue(page, fp)
    'hide the uploading status
    filimage.UpdateLoading(page, False)
End Sub

For more details: please see this post:

Happy BVAD3 Coding

PS: Coming to the next maintenance release.
 

Attachments

  • BVAD3VFlexDialog.zip
    34.9 KB · Views: 279

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
 

AlfaizDev

Well-Known Member
Licensed User
A big effort.
Thank you
The fact that these applications of this environment work on all platforms
And it's the closest thing to the applications
I think he worked with it.
Electronic Store
It's going to be great, time-saving and effort-saving.
 

Mashiane

Expert
Licensed User
Longtime User
Uploading Files to a folder of your choice and or rename the name of the uploaded file.

FileUploads01.gif


What has changed:

The old call was: fileDet = BANanoShared.UploadFileWait(fileObj)

The additional optional call is: BANanoShared.UploadFileOptionsWait(fileObj, "../assets", "n")

Option 1

These calls will both upload a file to the assets folder as usual.

For example:

B4X:
Private Sub txtUsualUpload_Change (fileObj As Map)
    page.refs = vuetify.GetRefs
    'start uploading the file to assets folder
    fileDet = BANanoShared.UploadFileOptionsWait(fileObj, "../assets", "n")
    'get the status of the upload
    Dim sstatus As String = fileDet.Status
    'get the file name
    Dim fn As String = fileDet.FileName

Option 2
This will upload the file to the files folder, will create folder if it does not exist.

B4X:
Private Sub txtUsualUpload_Change (fileObj As Map)
    page.refs = vuetify.GetRefs
    'start uploading the file to assets folder
    fileDet = BANanoShared.UploadFileOptionsWait(fileObj, "../files", "n")
    'get the status of the upload
    Dim sstatus As String = fileDet.Status
    'get the file name
    Dim fn As String = fileDet.FileName

To have the file renamed to a "random" file name, just change the last variable from "n" to "y", meaning that you want the uploaded file to be renamed.

The new "random" file name is based on...

B4X:
$filename = uniqid() . "-" . time();

A new php script has been added to BVAD3.

IMPORTANT: Getting Import Code from Intellisence (that you can "copy code")

If using VField, use VField.FileChangeSingle for single file upload and VField.FileChangeMultiple for multiple.
If using the actual VFileInput use VFileInput.FileChangeSingle for single file upload and VFileInputFileChangeMultiple for multiple.

FileUploads02.gif


Update: Uploading a file and rename it to your own custom name:

B4X:
Private Sub txtFileRename_Change (fileObj As Map)
    page.refs = vuetify.GetRefs
    'has the file been specified
    If banano.IsNull(fileObj) Or banano.IsUndefined(fileObj) Then Return
    'show the loading indicator
    txtToAssetsRename.UpdateLoading(page, True)
    'get file details
    Dim fileDet As FileObject
    fileDet = BANanoShared.GetFileDetails(fileObj)
    'you can check the size here
    Dim fs As Long = fileDet.FileSize
    'get the file name and rename it
    Dim FileName As String = "batch-" & BANanoShared.DateTimeNowBackUp & "-" & fileDet.FileName
  
    If fs >= 5000 Then
    End If
    'start uploading the file to assets folder
    fileDet = banano.Await(BANanoShared.UploadFileRenameToWait(fileObj, "../assets", FileName))
    'get the status of the upload
    Dim sstatus As String = fileDet.Status
    'get the file name
    Dim fn As String = fileDet.FileName
    Select Case sstatus
    Case "error"
        'hide the uploader
        txtToAssetsRename.UpdateLoading(page, False)
        vuetify.ShowSnackBarError($"The file '${fn}' was not uploaded successfully!"$)
    Case "success"
        vuetify.ShowSnackBarSuccess($"The file '${fn}' was uploaded successfully!"$)
    End Select
    'get the upload full path
    Dim fp As String = fileDet.FullPath
    'IMPORTANT
    fp = fp.Replace("../assets", "./assets")
    lblFullPath.UpdateCaption(fp)
    'update state of some element like an image
    'vimage.SetImage(page, fp)
    'hide the uploading status
    txtToAssetsRename.UpdateLoading(page, False)
End Sub

With this example, we read the file name first and then pre-pend the file name

B4X:
Dim FileName As String = "batch-" & BANanoShared.DateTimeNowBackUp & "-" & fileDet.FileName

We then upload it to the server assets folder. Please note the "../assets"

B4X:
fileDet = banano.Await(BANanoShared.UploadFileRenameToWait(fileObj, "../assets", FileName))

Finally after the file is uploaded, we get the new full path and have to clean out the ../assets out.

B4X:
'get the upload full path
    Dim fp As String = fileDet.FullPath
    'IMPORTANT
    fp = fp.Replace("../assets", "./assets")


FileUpload.gif
 

Attachments

  • BVAD3UploadWithOptions.zip
    20.8 KB · Views: 249
Last edited:

Mashiane

Expert
Licensed User
Longtime User

Attachments

  • BVAD3KeyStore.zip
    5.2 KB · Views: 239
Last edited:

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
Creating colored chips using VChipGroup

VChipGroup.gif


1658475736799.png


B4X:
VChipGroup1.Clear(page)
    VChipGroup1.AddItemColor("c1", "", "black", "white")
    VChipGroup1.AddItemColor("c2", "", "#E6E6E6", "black")
    VChipGroup1.AddItemColor("c3", "", "#FFB500", "white")
    VChipGroup1.AddItemColor("c4", "", "#F27229", "white")
    VChipGroup1.AddItemColor("c5", "", "#EB3427", "white")
    VChipGroup1.AddItemColor("c6", "", "#923FA3", "white")
    VChipGroup1.AddItemColor("c7", "", "#3A51DF", "white")
    VChipGroup1.AddItemColor("c8", "", "#23A7F5", "white")
    VChipGroup1.AddItemColor("c9", "", "#5EB524", "white")
    VChipGroup1.AddItemColor("c10", "", "#7C5F4D", "white")
    VChipGroup1.AddItemColor("c11", "", "lime", "white")
    VChipGroup1.Refresh(page)
 

Attachments

  • BVAD3ColoredChips.zip
    20.3 KB · Views: 262

Mashiane

Expert
Licensed User
Longtime User
How to add a pre-built product card

Just add your products and you can select buy, copy and wish to either buy a product or add to your wish list.

VProductCard.gif


B4X:
VProductCard1.Clear(page)
    VProductCard1.AddProduct("p1", "KD 8 EXT", "./assets/nike1.png", "$ 145.00", "-20%", "")
    VProductCard1.AddProduct("p2", "Jordan Galaxy", "./assets/nike2.png", "$ 599.00", "-30%", "")
    VProductCard1.AddProduct("p3", "Nike SB Trainerendor Leathe", "./assets/nike3.png", "$ 190.00", "-17%", "")
    VProductCard1.AddProduct("p4", "Air Jordan Spike 40 iD", "./assets/nike4.png", "$ 220.00", "-22%", "")
    VProductCard1.AddProduct("p5", "Nike Air Footscape Magista Flyknit", "./assets/nike5.png", "$ 235.00", "-18%", "")
    VProductCard1.AddProduct("p6", "Nike Air Zoom Huarache 2k4", "./assets/nike6.png", "$ 190.00", "-40%", "")
    VProductCard1.AddProduct("p7", "Jordan Horizon", "./assets/nike7.png", "$ 230.00", "-13%", "")
    VProductCard1.AddProduct("p8", "Air Jordan xx9 Low", "./assets/nike8.png", "$ 185.00", "-15%", "")
    VProductCard1.Refresh(page)

Trapping Events

The events receive the map that contains the product details..

B4X:
Private Sub VProductCard1_Copy (item As Map)
    vuetify.ShowSwalInfo("Copy: " & banano.ToJson(item))
End Sub

Private Sub VProductCard1_Buy (item As Map)
    vuetify.ShowSwalInfo("Buy: " & banano.ToJson(item))
End Sub

Private Sub VProductCard1_Wish (item As Map)
    vuetify.ShowSwalInfo("Wish: " & banano.ToJson(item))
End Sub

1658495754118.png
 

Mashiane

Expert
Licensed User
Longtime User
Adding a category listing

This category listing uses the V-Item-group to create images linked to a VModel.

You just drop a VCategoryListing and then add the items with image dimensions, you can fire the change event to determine which item was selected.

VCategoryList.gif



B4X:
VCategoryList1.Clear(page)
    VCategoryList1.AddItem("all", "ALL", "./assets/c1.png", 110)
    VCategoryList1.AddItem("coff", "Coffee", "./assets/c2.png", 90)
    VCategoryList1.AddItem("jui", "Juice", "./assets/c3.png", 80)
    VCategoryList1.AddItem("mlk", "Milk Based", "./assets/c4.png", 80)
    VCategoryList1.AddItem("sna", "Snack", "./assets/c5.png", 110)
    VCategoryList1.AddItem("des", "Dessert", "./assets/c6.png", 110)

Trapping the change event

B4X:
Private Sub VCategoryList1_Change (item As String)
    vuetify.ShowSwalToastInfo(item, 1000)
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
Lets Reverse Engineer the VForm

The VForm is a very powerful component that helps you build VForms & input VDialog using the Abstract Designer.
Using it also helps you to to have your form linked to the VueTable and DataSource.

Below we look at what happens when you put a VField inside a VForm and choose a Component Type

For example, in your VField, when you choose MinusPlus component type, during the CreateForm process, which is called by the form BindState sub, the BuildMinusPlusChip sub will be called. This internally will call the VChip, pass specified properties to it and this ends up in your UI.

untitled_page.png


vform02.png

vform03.png





When you use the VFlexDialog, it calls the VForm underneath, which executes these calls.
 

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
 
Top