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

'Static code module
Sub Process_Globals   
    Public vuetify As VuetifyApp
    Public about As VueComponent
    Public path As String
    Public name As String = "adinputs"
    Private banano As BANano
    Private VRating1 As VRating
End Sub

Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    about.Initialize(Me, name)
    path = about.path
   
    banano.LoadLayout(about.Here, "myinputs")
    '
    about.BindVueElement(VRating1.VElement)

    'add the component as a router
    vuetify.AddRoute(about)
End Sub


Private Sub VRating1_Input (num As Double)
    vuetify.ShowSwal(num)
End Sub

Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    home.Initialize(Me, name)
    home.vuetify = vuetify
    'make this the start page
    home.Path = "/"
    path = home.path
    '
    'build the page html here
    banano.LoadLayout(home.Here, "home")
   
    'add this route component to the app
    vuetify.AddRoute(home)
End Sub

Sub onmounted
    'clear the drawer
    drwlist.ClearOnApp(vuetify)
    drwlist.AddHeader("Enhanced Design System")
    drwlist.AddItem("", "home", "mdi-home", "green", "Home", "/")
    drwlist.AddItem("", "one", "mdi-access-point-check", "orange", "One", "/one")
    drwlist.AddItem("", "two", "mdi-silverware", "brown", "Two", "/two")
    'refresh the drawer
    drwlist.RefreshOnApp(vuetify)
End Sub

Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    one.Initialize(Me, name)
    one.vuetify = vuetify
    path = one.path
    '
    'build the page html here
    banano.LoadLayout(one.Here, "view1")
   
    'add this route component to the app
    vuetify.AddRoute(one)
End Sub

Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    two.Initialize(Me, name)
    two.vuetify = vuetify
    path = two.path
    '
    'build the page html here
    banano.LoadLayout(two.Here, "view2")
   
    'add this route component to the app
    vuetify.AddRoute(two)
End Sub

'Static code module
Sub Process_Globals   
    Public vuetify As VuetifyApp
    Public about As VueComponent
    Public path As String
    Public name As String = "adsliders"
    Private banano As BANano
    Private cardsr1 As VRow
    Private VCard3 As VCard
    Private VSlider1 As VSlider
    Private VSlider2 As VSlider
    Private VSlider3 As VSlider
    Private VSlider4 As VSlider
    Private VSlider5 As VSlider
    Private VSlider6 As VSlider
    Private VRangeSlider1 As VRangeSlider
    Private btnGetRange1 As VBtn
    Private btnGetSlider As VBtn
    Private btnSetRange1 As VBtn
    Private btnSetSlider1 As VBtn
End Sub

Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    about.Initialize(Me, name)
    path = about.path
    
    banano.LoadLayout(about.Here, "mysliders")
    about.BindVueElement(btnGetRange1.VElement)
    about.BindVueElement(btnGetSlider.VElement)
    about.BindVueElement(btnSetRange1.VElement)
    about.BindVueElement(btnSetSlider1.VElement)
    
    
    VSlider1.SetValue(about, 25)
    about.BindVueElement(VSlider1.VElement)
    '
    VSlider2.SetValue(about, 75)
    about.BindVueElement(VSlider2.VElement)
    '
    about.BindVueElement(VSlider3.VElement)
    about.BindVueElement(VSlider4.VElement)
    about.BindVueElement(VSlider5.VElement)
    
    VSlider6.AddRule("checkRule6")
    about.BindVueElement(VSlider6.VElement)
    '
    about.BindVueElement(VRangeSlider1.VElement)
    
    VSlider5.UpdateTickLabels(about, Array("Figs", "Lemon", "Pear", "Apple"))
    VSlider5.SetValue(about, 1)
    
    'add the component as a router
    vuetify.AddRoute(about)
End Sub

Sub checkRule6(v As Object) As Object    'ignoredeadcode
    v = banano.parseInt(v)
    If v > 40 Then
        Return "There are only 40 items in stock"
    Else
        Return True
    End If
End Sub


Private Sub VSlider1_Change (num As Object)
    vuetify.ShowSwalToastInfo(num, 1000)
End Sub

Private Sub VSlider2_Change (num As Object)
    vuetify.ShowSwalToastInfo(num, 1000)
End Sub

Private Sub VSlider4_ClickAppend (e As BANanoEvent)
    about.Increment(VSlider4.VModel)
End Sub

Private Sub VSlider4_ClickPrepend (e As BANanoEvent)
    about.Decrement(VSlider4.VModel)
End Sub

Private Sub VRangeSlider1_Change (nums As List)
    Dim sValues As String = banano.ToJson(nums)
    vuetify.ShowSwalToastInfo(sValues, 1000)
End Sub

Private Sub btnSetSlider1_Click (e As BANanoEvent)
    VSlider1.SetValue(about, 67)
End Sub

Private Sub btnSetRange1_Click (e As BANanoEvent)
    VRangeSlider1.SetValue(about, 60, 80)
End Sub

Private Sub btnGetSlider_Click (e As BANanoEvent)
    Dim snum As String = VSlider1.GetValue(about)
    vuetify.ShowSwalToastInfo("Get Slider: " & snum, 1000)
End Sub

Private Sub btnGetRange1_Click (e As BANanoEvent)
    Dim nums As List = VRangeSlider1.GetValue(about)
    Dim sValues As String = banano.ToJson(nums)
    vuetify.ShowSwalToastInfo("Get Range: " & sValues, 1000)
End Sub