B4J Tutorial [BANanoVuetifyAD] Vuetify WebSites & WebApps with BANano for Dummies

Mashiane

Expert
Licensed User
THIS IS VERY IMPORTANT:

 

Mashiane

Expert
Licensed User
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

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


Enjoy
 

Mashiane

Expert
Licensed User
Please follow the new designs on the Enhanced Design System Thread.


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

Mashiane

Expert
Licensed User
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!
 
  • Like
Reactions: LJG

Mashiane

Expert
Licensed User
TIPS

  1. 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.
  2. You can have an app without a Drawer or AppBar or Footer.
  3. Your App has to have a VApp and VMain elements, this is compulsory and should be the first 2 elements in your app.
  4. If your app will have multiple "pages", use the router view inside vmain
  5. The BVADEDS B4xtemplate has the skeleton template to create a new app with a drawer, app bar, vmain and router views.
  6. The Router View shows other pages in your application when you navigate to it.
  7. Each page is treated as a separate vue component i.e. vue instance.
  8. Each page is defined inside a code module, this is done inside the .Initialize subroutine. There you load your page layout, specify events etc.
  9. Each element is created on an abstract designer and that is loaded inside a component.
  10. Each element for your layout should be .BindVueElement after loadlayout so that VueComponent knows about its events and state bindings.
  11. 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.
  12. The value of an element is bound to the v-model, each v-model should be unique per element that is on your component.
  13. To change and get the values at runtime, you use <element>.SetValue(<component>, <newvalue>) and to get a value use, <element>.GetValue(<component>)
  14. 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.
  15. 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.
  16. 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.
  17. To enable and disable an element at runtime, call .UpdateDisabled(?, ?), you can pass this true / false.
  18. Your Webapp can only have 1 VAPP and 1 VMain component. This is compulsory.
 
Last edited:

Mashiane

Expert
Licensed User
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.

PageTransitions.jpg
 

Mashiane

Expert
Licensed User
TIP: BANanoMySQL usage

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

 

Mashiane

Expert
Licensed User
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:

 
Last edited:
Top