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

Mashiane · May 18, 2021

THIS IS VERY IMPORTANT:

[BANanoVuetifyAD3] Implementing the new BVAD3 (1) B4X Project Template

Ola Download BVAD3 4.21+ b4xlib Copy this to your External B4J Libraries folder Download the Font Libraries (Roboto + MaterialDesignIcons) Copy these to your External B4J Libraries folder. After you create the project, ensure that these are referenced. Remember, if you want to use the...

www.b4x.com

Mashiane · May 18, 2021

We have created a YT video for Part 71 (b).

Download

1. We look at creating the animated counter infoboxes via the abstract designer.
2. We add some sweet alerts.

Remember to subscribe to our YT channel for updates and also you add your name to the telegram channel, Join our Telegram: https://t.me/bananovuematerial

Mashiane · May 21, 2021

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.

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!

Magma · May 22, 2021

Waiting for it!!!

Mashiane · May 22, 2021

TIP: I keep forgetting to call BindVueElement(?) when I create components. Perhaps explaining why you need it and its compulsory to do so for stateful and event bound components will help me remember.

EDIT: BindState is now an automated process.

Mashiane · May 22, 2021

BVAD3 Tips: The importance of VueElement.BindVueElement in BVAD3 after BANano.LoadlLayout.

NB: This is a manual code entry you need to call y'all.

Mashiane · May 24, 2021

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

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

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..

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.

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!

Mashiane · May 24, 2021

Download Version 5.00 and explore the new design system

Please note the new design system is still work in progress, however backward compatible.

Have fun and enjoy

Mashiane · May 25, 2021

You can now start test driving the now enhanced design system for BVAD3.

Download the B4xlib and templates and install.

Mashiane · May 25, 2021

Check this amazing new development https://www.b4x.com/android/forum/t...mations-with-bananoanimejs.130795/post-825016

We use the abstract designer to animate our BVAD elements.

Mashiane · May 25, 2021

We animate from the Abstract Designer

LJG · May 25, 2021

Mashiane said:
Download Version 5.00 and explore the new design system

Please note the new design system is still work in progress, however backward compatible.

Have fun and enjoy

This is great work. Looking forward to seeing how it will integrate with the BANanoServer/BANanoVuetifyAD3 example. Thank you, Mashiane!

Mashiane · May 27, 2021

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/

Mashiane · May 28, 2021

Get your own copy of the official eBook on creating WebApps using BVAD3. The book is specific to the BVAD3 CRUD Builder WebApp.

[BANAnoVuetifyAD3] Creating CRUD based WebApps free eBook (for those in a hurry)

Ola Update: 31 May 2022 ***** NOTE: PLEASE NOTE THIS IS BEING RE-DESIGNED as Incwadi yamaBali (StoryBook). You can still read the attached eBook for understanding. https://www.b4x.com/android/forum/threads/bananovuetifyad3-incwadi-yamabali-storybook-low-code-vue-webapps.140884/ ***** Download...

www.b4x.com

Enjoy

Mashiane · May 28, 2021

[BANAnoVuetifyAD3] Creating CRUD based WebApps free eBook (for those in a hurry)

Ola Update: 31 May 2022 ***** NOTE: PLEASE NOTE THIS IS BEING RE-DESIGNED as Incwadi yamaBali (StoryBook). You can still read the attached eBook for understanding. https://www.b4x.com/android/forum/threads/bananovuetifyad3-incwadi-yamabali-storybook-low-code-vue-webapps.140884/ ***** Download...

www.b4x.com

Mashiane · May 29, 2021

Version 5.04 is now out and available, it fixes a few bugs and additional work towards the Enhanced Design System

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 · May 29, 2021

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

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...

for example

One

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

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

Mashiane · May 29, 2021

Please follow the new designs on the Enhanced Design System Thread.

[BANanoVuetifyAD3] Enhanced Design System 101

Ola ANNOUNCEMENT: BVAD3 ENHANCED DESIGN SYSTEM !!!! TO BE LAUNCHED SOON !!!! 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...

www.b4x.com

NB: We will not reharsh stuff that is here though but can create a reference.

Mashiane · May 29, 2021

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.

Mashiane · May 30, 2021

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.

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..

Vuetify Documentation

Slider component — Vuetify

The slider component can be used as an alternative visualization instead of a number input.

vuetifyjs.com

Range Slider component — Vuetify

The range slider component is a better visualization of the number input. It is used for gathering a range of numeri...

vuetifyjs.com

Ta - Tutorial 72..

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads