B4J Tutorial [BANanoVuetifyAD3] Enhanced Design System 101

Mashiane

Expert
Licensed User
Ola

You can now explore all the core elements from the New Awesome Kitchen Sink WebApp

This thread is dedicated to the Enhanced Design System for BVAD3. Whilst one is able to create UXs via the abstract designer using a single generic component, creating a rather element focused approach is inevitable. It makes things easier and one knows exactly what they are dealing with. It makes debugging also more easier. The best part, we are following B4X design philosophy of 0% code writes towards the UX. One has to write code towards the functionality of their app than write code to create the UX.

So what has changed? The base element for all these Vuetify elements is still our own built VueElement. The only thing is, each element has its own personality and functionality. As a result this makes it very easy to create your designs. You pick a element, put it on a layout, set its properties, generate members and events and you are set to go.

So, no more writing .Initialize .Add?? in BVAD3 to create your UX, you design it completely with the abstract designer, you are actually forced to. Your mind can just be utilized for your app functionality. The great part is with debug mode, live code swapping, you will see your creations come to life in real time.

BVAD3DesignSystem.jpg


PS: Don't worry, this is fully backward compatible until the end of 2021. From January 2022, BVAD4 will be the recommended way to create your UX designs i.e. what we are talking about here.

Enjoy and have fun!


 
Last edited:

Mashiane

Expert
Licensed User
Download

We have updated Part 72 of our tutorials to include the New Design System. We have done so because of backward compatibility otherwise a completely new project could have been done.

Vuetify API to B4X Drag n Drop

Vuetify2B4X.jpg


To test drive and keep track of latest work, run the project (Tutorials/Part72) and on the navigation drawer, select Abstracts..

1621862139926.png


As an example, on the AD Inputs, we have just finished the V-Rating component and the code on ViewADInputs to showcase this is simply..

1621862255617.png


B4X:
'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
All the rating attributes/styles are set via the abstract designer as depicted below.

1621862295385.png


1621862417588.png


This component is based on Vuetify Documentation here, https://vuetifyjs.com/en/components/ratings/

We are wrapping the v-rating API to B4X custom views and generating the html for each component there. You can learn about the component from their docs and its variants, make changes to the custom view and see magic happens when you run your app.

Enjoy!
 
Last edited:

Mashiane

Expert
Licensed User
Creating a Login/Sign In Screen

Download

Download B4xLib & Other Dependencies (Copy to your EXTERNAL libraries folder)

In this example, we have used the following components, you can follow the links to read about them for understanding.

VDialog, read about it here, https://vuetifyjs.com/en/components/dialogs/
VCard, read about it here, https://vuetifyjs.com/en/components/cards/
VBtn, read about it here, https://vuetifyjs.com/en/components/buttons/
VContainer, read about it here, https://vuetifyjs.com/en/components/grids/


SignInForm.jpg
 
Last edited:

Mashiane

Expert
Licensed User

Mashiane

Expert
Licensed User
3 Pages and a Drawer

Download External Libraries
BVAD3 5.04+

Download Source Code
3 Pages + Drawer

Home page - you can set any page to be the home page by setting the path to be /. There should only be 1 root page in your app. See ViewHome code module in the attachment.

NB: Please study the layouts for more information.

In this example we have used the following components. As BVAD3 is just a wrap around Vuetify, you can do more when you understand how it works.


VAppBar, VAppBarNavIcon and VAppBarTitle, you can read about them from https://vuetifyjs.com/en/components/app-bars/
VNavigationDrawer , read about it here, https://vuetifyjs.com/en/components/navigation-drawers/
VList, read about it here, https://vuetifyjs.com/en/components/lists/
VueRouter, read about it here, https://router.vuejs.org/
VSlideTransition, read about it here, https://vuetifyjs.com/en/styles/transitions/
VRow, VCol, VContainer, read about it here, https://vuetifyjs.com/en/components/grids/

Things to know

1. The code in pgIndex is the glue of the application.
2. Each page is independent and this is a separate Vue instance in itself. Thus each page can have its own layouts and events etc.

Home Page

1622321634550.png



B4X:
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
You navigate the pages by clicking on the drawer. The items in the drawer are created when the Vue instance is mounted.

B4X:
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
This creates each of the items in the drawer and then the routes to go to e.g. / for home page, /one or /two for the pages. The link from the drawer to the page is the path of each page. This path is determined by the name of each page. This will show in the address bar as...

1622322009270.png


for example

One

1622321665217.png


B4X:
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

Two

1622321724127.png


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

Mashiane

Expert
Licensed User
User Authentication

Download External Libraries

Download Example

This tutorial is a combination of the Login Screen and 3 pages & Drawer above.

Hi there, in this tutorial we create an authentication system. The username and password to log in is admin respectively. When the app starts, the app bar and drawer are hidden. We achieve this by setting the v-if directive to authenticated and setting this to false for both. For more details, study the layouts.

As soon as the user is authenticated, the authenticated state variable is turned to true and the app navigates to another page. We have used a persistent dialog, hidden its overlay to ensure that a user needs to enter something for the app to work. We also added some transition to the dialog to show an animated effect. The login details HTML is appended to the card text section of the dialog card.

The components used are the same as mentioned on the 2 threads above. You can study the Vuetify Docs to understand how the rest of the functionality works.


 
Last edited:

Mashiane

Expert
Licensed User
PS: Please be advised that all the examples here have been updated, please re-download. For consistency, we have changed the Visible method to UpdateVisible.

BTW, to update the VALUE of any component, you first need to set the V-MODEL in the property bag. You can then call .SetValue and .GetValue to update the value / set it.

For more details, see the sliders and ranges example.

1622415423593.png


These components are designed using the Abstract Designer, here is the source code to manipulate the data.

B4X:
'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
And the design..

1622415519199.png


Vuetify Documentation


Ta - Tutorial 72..
 

Mashiane

Expert
Licensed User
It is with pleasure to release the first Awesome Kitchen Sink for BVAD3

For more details, follow this link...

 
Top