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

Mashiane · May 31, 2021

TIP: BindVueElement

It is necessary and compulsory that...

After you call BANano.LoadLayout... you call

...BindVueElemement(???.VElement) per component you Generated Members for, otherwise your app wont work as expected.

Ta!

Mashiane · Jun 1, 2021

Version 5.09 is now available and includes the BVAD3DS layout. Copy this to C:\Program Files (x86)\Anywhere Software\B4J\Libraries

BVAD3 5.09 Library

BVAD3 5.09 Templates

Mashiane · Jun 2, 2021

Between our erratic electric current...

Counters on the bottom nav... awesome!

Mashiane · Jun 3, 2021

BindVueElement Source Code Building:

All components built using the Abstract Designer should be bound. Download BindVueElement Builder.

Mashiane · Jun 4, 2021

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

For more details, follow this link...

[BANanoVuetifyAD3] New Awesome Kitchen Sink WebApp

Ola Welcome to the New Awesome Kitchen Sink for BVAD3. BVAD3 helps one to create WebApps/Webistes using Material Design based on BANano+Vuetify+B4X. Anyone who wants to, can now create WebApps/Websites with the full power of the Abstract Designer. All the components are custom view based and...

www.b4x.com

Mashiane · Jun 4, 2021

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

For more details, follow this link, https://www.b4x.com/android/forum/threads/bananovuetifyad3-new-awesome-kitchen-sink-webapp-1.131337/

Mashiane · Jun 4, 2021

Tip: Life Cycle Hooks

VueJS uses a methodology called life cycle hooks. That is to say before a Vue instance fully runs, you can inject code to run.

For example, to load data to a combo box from a database, you can do this on the created / mounted life cycle hooks.

There are further discussed here, https://vuejs.org/v2/guide/instance.html

To see this work, in the kitchen sink code, in pgIndex, we have defined an onmounted hook, this clears the drawer and feeds the item. We also did a similar task with the bottom nav bar, we created a hook to clear the items and then create them. This means that each time one navigates to the page, the hook is called and executes the code.

For each VuetifyApp and VueComponent, we have defined methods to handle these... Internally these are defined as

B4X:

'set mounted
Sub SetMounted(Module As Object,methodName As String, args As List) As VueComponent
    methodName = methodName.ToLowerCase
    If SubExists(Module, methodName) = False Then Return Me
    Dim mounted As BANanoObject = BANano.CallBack(Module, methodName, args)
    opt.Put("mounted", mounted)
    SetMethod(Module, methodName, args)
    Return Me
End Sub

'set updated
Sub SetUpdated(Module As Object, methodName As String, args As List) As VueComponent
    methodName = methodName.ToLowerCase
    If SubExists(Module, methodName) = False Then Return Me
    Dim updated As BANanoObject = BANano.CallBack(Module, methodName, args)
    opt.Put("updated", updated)
    SetMethod(Module, methodName, args)
    Return Me
End Sub

'set beforemount
Sub SetBeforeMount(Module As Object, methodName As String, args As List) As VueComponent
    methodName = methodName.ToLowerCase
    If SubExists(Module, methodName) = False Then Return Me
    Dim beforeMount As BANanoObject = BANano.CallBack(Module, methodName, args)
    opt.Put("beforeMount", beforeMount)
    SetMethod(Module, methodName, args)
    Return Me
End Sub

'set beforeupdate
Sub SetBeforeUpdate(Module As Object, methodName As String, args As List) As VueComponent
    methodName = methodName.ToLowerCase
    If SubExists(Module, methodName) = False Then Return Me
    Dim beforeUpdate As BANanoObject = BANano.CallBack(Module, methodName, args)
    opt.Put("beforeUpdate", beforeUpdate)
    SetMethod(Module, methodName,args)
    Return Me
End Sub

'set before destroy
Sub SetBeforeDestroy(Module As Object, methodName As String, args As List) As VueComponent
    methodName = methodName.ToLowerCase
    If SubExists(Module, methodName) = False Then Return Me
    Dim beforeDestroy As BANanoObject = BANano.CallBack(Module, methodName, args)
    opt.Put("beforeDestroy", beforeDestroy)
    SetMethod(Module, methodName, args)
    Return Me
End Sub


'set before created
Sub SetBeforeCreate(Module As Object, methodName As String, args As List) As VueComponent
    methodName = methodName.ToLowerCase
    If SubExists(Module, methodName) = False Then Return Me
    Dim beforeCreate As BANanoObject = BANano.CallBack(Module, methodName, args)
    opt.Put("beforeCreate", beforeCreate)
    SetMethod(Module, methodName, args)
    Return Me
End Sub


'set created
Sub SetCreated(Module As Object, methodName As String, args As List) As VueComponent
    methodName = methodName.ToLowerCase
    If SubExists(Module, methodName) = False Then Return Me
    Dim created As BANanoObject = BANano.CallBack(Module, methodName, args)
    opt.Put("created", created)
    SetMethod(Module, methodName, args)
    Return Me
End Sub

'set destroyed
Sub SetDestroyed(Module As Object, methodName As String, args As List) As VueComponent
    methodName = methodName.ToLowerCase
    If SubExists(Module, methodName) = False Then Return Me
    Dim destroyed As BANanoObject = BANano.CallBack(Module, methodName, args)
    opt.Put("destroyed", destroyed)
    SetMethod(Module, methodName, args)
    Return Me
End Sub


'set activated
Sub SetActivated(Module As Object, methodName As String, args As List) As VueComponent
    methodName = methodName.ToLowerCase
    If SubExists(Module, methodName) = False Then Return Me
    Dim activated As BANanoObject = BANano.CallBack(Module, methodName, args)
    opt.Put("activated", activated)
    SetMethod(Module, methodName, args)
    Return Me
End Sub


'set deactivated
Sub SetDeActivated(Module As Object, methodName As String, args As List) As VueComponent
    methodName = methodName.ToLowerCase
    If SubExists(Module, methodName) = False Then Return Me
    Dim deactivated As BANanoObject = BANano.CallBack(Module, methodName, args)
    opt.Put("deactivated", deactivated)
    SetMethod(Module, methodName, args)
    Return Me
End Sub

Enjoy!

Mashiane · Jun 4, 2021

Helper Tool: BindVueElementBuilder

This tool is helpful to bind your elements after load-layout.

Download here

Mashiane · Jun 4, 2021

A New Awesome Template is also now available for you to download an put in your Internal B4J Libraries. This is the final recommended template and replaces all other BVAD3 templates.

Get it here, https://github.com/Mashiane/BANanoVuetifyAD3/blob/main/Templates/BVAD3EDS.b4xtemplate

Mashiane · Jun 4, 2021

TIPS

The pgIndex code module is used to set up the skeleton shell of your application. Here you create the AppBar, NavDrawer, Footer and the Router View.
You can have an app without a Drawer or AppBar or Footer.
Your App has to have a VApp and VMain elements, this is compulsory and should be the first 2 elements in your app.
If your app will have multiple "pages", use the router view inside vmain
The BVADEDS B4xtemplate has the skeleton template to create a new app with a drawer, app bar, vmain and router views.
The Router View shows other pages in your application when you navigate to it.
Each page is treated as a separate vue component i.e. vue instance.
Each page is defined inside a code module, this is done inside the .Initialize subroutine. There you load your page layout, specify events etc.
Each element is created on an abstract designer and that is loaded inside a component.
Each element for your layout should be .BindVueElement after loadlayout so that VueComponent knows about its events and state bindings.
You can initialize state binding data for your app by creating a .SetCreated method that will be called each time one navigates to the page. This can be used to load data to combo-boxes and other data bound elements like trees etc.
The value of an element is bound to the v-model, each v-model should be unique per element that is on your component.
To change and get the values at runtime, you use <element>.SetValue(<component>, <newvalue>) and to get a value use, <element>.GetValue(<component>)
To hide and show elements, you need to specify the v-show state variable first, then you will be able to run <element>.UpdateVisible for each element.
If elements have the same v-model or v-show, each time you change those with .SetValue and .UpdateVisible, all the elements that share the same state variable names will be affected.
Most elements have events, use Generate Members from the abstract designer to generate events. The callbacks are built internally by BVAD3 as soon as it detects that the event signature exists in your component.
To enable and disable an element at runtime, call .UpdateDisabled(?, ?), you can pass this true / false.
Your Webapp can only have 1 VAPP and 1 VMain component. This is compulsory.

Mashiane · Jun 4, 2021

TIP: Page Transitions

In the kitchen sink, the router-view sits inside a VTransition component. This is an optional matter as you can just have a router-view sitting inside v-main.
This has been added because of page transitions. You can change how the pages transition during navigation by changing the transition choice from the dropdown.

Mashiane · Jun 4, 2021

Version 5.18 is now available with additional elements to the Kitchen Sink

Download Here

Mashiane · Jun 5, 2021

Version 5.20 is out, it brings with it the Cloud Inventory Dashboard Clone, done purely with the Enhanced Design System.

These are just some tests of how stable the EDS is becoming.

Check the EDS Demos folder and redownload the External Libraries for BVAD3.

Mashiane · Jun 6, 2021

TIP: BANanoMySQL usage

Check this out on examples of how to use the BANanoMYSQLE class. This is already built into BVAD3, so dont recopy.

[BANanoConnect] BANanoSQL+SQLite+MySQL+MSSQL Library

Ola For a while I have been exploring backend connectivity using BANano for BANanoSQL, SQLite, MSSQL and MySQL. The purpose of this lib is for a one place for all your connectivity with these backends. This library as a couple of class utilities for connecting to BANAnoSQL, SQLite, MSSQL and...

www.b4x.com

Mashiane · Jun 7, 2021

BANanoVuetifyAD3 Version 5.25 is now available.

This comes with the New Awesome Kitchen Sink WebApp where one can explore all the elements created purely with the abstract designer. This is more than 60 pages demonstrating each element from the power of the library. Just like you would a normal b4x app, you use the abstract designer, generate events and you are good to go in creating your awesome webapp.

As a bonus, this also comes with a new dashboard, the Cloud Inventory Dashboard Clone, as discussed above to help anyone learn along

We have made some simple notes here too

Enjoy and have fun and thanks for supporting this project!!!

Mashy!

PS: Also an eBook for those in a hurry was written to create CRUD based WebApps, find it here:

[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 · Jun 10, 2021

Check this out:::

Create Amazing Vuetify WebApps using BANanoVuetifyAD3 — Part 1

A year or so ago I started using the Vuetify CDN. I was awed at its power and how one can just use HTML element attributes or properties…

mbanga-anele.medium.com

Mashiane · Jun 11, 2021

Check this out:::

Create Amazing Vuetify WebApps using BANanoVuetifyAD3 — Part 1

A year or so ago I started using the Vuetify CDN. I was awed at its power and how one can just use HTML element attributes or properties…

mbanga-anele.medium.com

Mashiane · Jun 14, 2021

The New Awesome Kitchen Sink WebApp has been launched on github, https://mashiane.github.io/BANanoVuetifyAD3-Enhanced-Design-System/#/

Mashiane · Jun 14, 2021

The New Awesome Kitchen Sink WebApp has been launched on github, https://mashiane.github.io/BANanoVuetifyAD3-Enhanced-Design-System/#/

Mashiane · Jun 14, 2021

TIP: Detecting changes on AutoComplete/Combo/Select components in a data-table.

When you define a column as autocomplete, combo or select in a data-table, you can detect changes made to it. For example, in this spippet, our table is called, datasource. It sources content from a saved state list.

During runtime we want to detect changes made on that column so that we can perform other actions.

Adding the column to tha data-table

B4X:

tablecrud.AddColumn("datasource", "ForeignTable")
    tablecrud.SetAutoComplete("datasource", True, "tables", "tablename", "tablename")

B4X:

'the data source has been changed
Private Sub tablecrud_datasource_Change (item As String)
    'selected table
    item = item.trim
    If item = "" Then Return
    tablecrud.UpdateLoading(True)
    'get the active database
    activeDB = vuetify.GetData("database")
    sdatabasename = activeDB.Get("databasename")
    
    Dim rsFields As BANanoMySQLE 
    rsFields.Initialize("bvad3crud", "fieldnames", "fieldid", "fieldid") 
    'add field types 
    rsFields.SchemaAddInt(Array("tableid"))
    '
    Dim sw As Map = CreateMap()
    sw.Put("databasename", sdatabasename)
    sw.Put("tablename", item)
    '
    rsFields.SelectWhere(Array("fieldname"), sw, Array("=", "="), Array("fieldname")) 
    rsFields.JSON = banano.CallInlinePHPWait(rsFields.MethodName, rsFields.Build) 
    rsFields.FromJSON 
    Select Case rsFields.OK 
    Case False 
        Dim strError As String = rsFields.Error 
        Log(strError) 
    End Select 
    home.SetData("fieldnames", rsFields.result)
    tablecrud.UpdateLoading(False) 
End Sub

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads