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

Ola

Download Additional Libraries
Download BANanoVuetifyAD3Core Library OR Download BANanoVuetifyAD3 Library
Download Kitchen Sink WebApp (Optional - useful for Learning how this works)
Download BVAD3Builder (Optional - useful to trim your final package)

Full Install Instructions on Github

What's New

To use this free and open source B4J library, you need BANano.

IMPORTANT: BANano License

Join Us

Telegram: https://t.me/bananovuematerial
Twitter: https://twitter.com/mashymbanga
Discord: https://discord.gg/ys8stGgWCU
YouTube: Mashy Teaches Video Series
B4x Blog: Mashy Teaches BVAD3 - New Series
Full Demo: New Awesome Kitchen Sink

Notable Forum Members Contributions

@Erel : Obviously
@alwaysbusy : valuable advice etc, BANano (incl. adjustments that support BVAD3)
@LJG : BANanoServer jRDC2, best overall bug finder
@aeric: Recommendations & Enhancements etc
@Star-Dust : Small solutions to development hitches etc
More...


What's Next?

You will find the most up to date content from this post onwards

Testing DataBase Connectivity (PHP)

The kitchen sink now has connectity testing for the various backends. To ensure that your app will work, you can check if your back-end is accessible.

MySQL
SQLite
MSSQL

WebServers You Can Use

Laragon - publish to c:\laragon\www



USBWebServer
IIS - Publish to C:\inetpub\wwwroot
XAMPP - change your publish folder to use // instead of \

You can find more information here related to IDE Setup

Enjoy

PS: Log Warnings & Compilation Errors

1. Please check the pre-run logs. In most cases modules with warnings will have an underline. Warning, 9, 10, 11, 12 are normal, don't be scared.

1625825241311.png


2. manifext.txt file not found - Download the library source code and RUN to recompile on your PC. "Do not Compile to Library"
3. Do a HARD REFRESH of your browser.[/B]
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Explaining VForm.Compute

In any VField on your VForm, you can indicate the method/sub to execute before a record is saved to the database.

VForm.Compute will get all the specified computations and execute them. Below we have given a "ComputeData" method to the Save button defined with a VField. You can define and use any method name

1628661857281.png


1st. We registered the method in our route page


B4X:
home.SetMethod(Me, "ComputeData", Null)

2ndly, we defined the method

B4X:
'data to be computed for the form
Sub ComputeData                'ignoreDeadCode
    'get the form data
    Dim formdata As Map = contactform.GetData(home)
    'compute the full name
    Dim sfullname As String = BANanoShared.JoinKeys(formdata, " ", Array("firstname","lastname"))
    formdata.Put("fullname", sfullname)
    'update the form data
    contactform.SetData(home, formdata)
End Sub

Now, when executing the save code..

B4X:
Private Sub btnSave_Click (e As BANanoEvent)
    'execute computations
    contactform.Compute(home)

.Compute will find all registered methods specified with the "Compute b4 Save" VField property and execute them.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
You can build a Desktop App with BVAD3, we did it with Electron

Check this out!!!

 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
IMPORTANT NOTIFICATION

Please be advised that the best way to create easier to maintain and cleaner VueJS WebApps with BVAD3 is to use custom components / own tags. This is why we will update the BVADEDS template to use such. The navbar and drawer will be moved out of the baselayout so that they are separate concerns. Creating custom components was discussed on the Mashy Teaches thread.


 

Mashiane

Expert
Licensed User
Longtime User
IMPORTANT INFORMATION

 

Mashiane

Expert
Licensed User
Longtime User
IMPORTANT NOTIFICATIONS

1. Whilst everything about BANanoVuetifyAD3 is based on the VueElement as the root element, it is no longer recommended to build layouts using the VueElement in the abstract designer.

That approach was used because it was the only abstract designer element then. Most elements are now available as individual elements as separate concerns.
So, please DO NOT use the VueElement in the abstract designer anymore.


1629388477236.png


2. This goes with creating your layouts via code. It is no longer an optimal way of coding BVAD3 WebApps. Whilst these will work (for backward compatibility purposes), we just don't recommend doing so anymore.

B4X:
Dim el as VueElement
el.Initialize(?, ?, ?)

Rather use other means to create your components etc.

3. Building Grid based layouts

The VForm and VField approach is available for this. This covers all input controls and some display elements. You can however always use the v-container, v-row and v-col for grids. The VForm and VField approach works better and faster.
 

Mashiane

Expert
Licensed User
Longtime User
IMPORTANT NOTIFICATION - (V-Show & UpdateVisible)

To hide and show and VueJS elements at runtime, BVAD3 uses the v-show VueJS directive/attribute. This attribute has been active during the development of the BVAD3 library and developments of your apps and the visibility has been turned on / off each time you executed .UpdateVisible(?, True/False)

By active we mean the attribute and its state binding was active whether you used the attribute / not during runtime. This is no longer the case because after careful consideration and due to the "expensive" nature of this directive/attribute, each element now has a "Hidden" property in the property bag. When you check hidden in the property bag, the v-show attribute will be added, if not, it will not be added to the HTML build up process.

If in your app you will make elements visible/hidden during runtime, you need to check "Hidden" in the property bag. You can then call .UpdateVisible after LoadLayout or anywhere on our code to show/hide the element.

There is also a v-if directive, when this is used, the HTML of your app will only be added to the DOM is the v-if binding is true, if false that part of the code will not be added to the DOM.

Ta
 

Mashiane

Expert
Licensed User
Longtime User
OnApp Feature - for pgIndex defined elements

After creating your UI using the Abstract Designer, you call the BANano.LoadLayout usually in the Initialize sub of your module.

To link element states, methods for activities that happen at runtime, one needs to call .BindState (for elements inside a VueComponent) and .BindStateOnApp (for elements inside the pgIndex)

B4X:
Sub BindState(C As VueComponent)
    VC = c
    Dim mbindings As Map = VElement.bindings
    Dim mmethods As Map = VElement.methods
    'apply the binding for the control
    For Each k As String In mbindings.Keys
        Dim v As Object = mbindings.Get(k)
        Select Case k
        Case "key"
        Case Else
            C.SetData(k, v)
        End Select
    Next
    'apply the events
    For Each k As String In mmethods.Keys
        Dim cb As BANanoObject = mmethods.Get(k)
        C.SetCallBack(k, cb)
    Next
End Sub

or

B4X:
Sub BindStateOnApp(c As VuetifyApp)
    Dim mbindings As Map = VElement.bindings
    Dim mmethods As Map = VElement.methods
    'apply the binding for the control
    For Each k As String In mbindings.Keys
        Dim v As Object = mbindings.Get(k)
        Select Case k
        Case "key"
        Case Else
            C.SetData(k, v)
        End Select
    Next
    'apply the events
    For Each k As String In mmethods.Keys
        Dim cb As BANanoObject = mmethods.Get(k)
        C.SetCallBack(k, cb)
    Next
End Sub

BindState expects the VueComponent to be passed and BindStateOnApp expects the vuetifyapp type.

We have extended this to handle all types of events going forward, e.g. UpdateVisible and UpdateVisibleOnApp by adding the OnApp feauture so that elements can work well with the pgIndex module.

The OnApp feature is useful for elements that are created to be used in the pgIndex module. For elements created to be loaded in route components i.e. pages, use the normal BindState.

As an example. Some methods here are just normal for VueComponent and those with OnApp should be used in pgIndex to link and use the right state binding.

1629809542949.png


At the same time, it is recommended that the use of a lot of elements in the pgIndex module is not recommended. These are added for ease of use.

Ta!

NB: The adding of the OnApp features is to post-pone the need to learn and implement custom controls on your app. Whilst cleaner and more easier to maintain. It is the recommended way to create VueJS applications.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Did you know?

The VAutoComplete now features functionality for you to add profile avatars to the list items, these are also shown as chips when selected.

B4X:
VAutocomplete6.Clear(about)
    VAutocomplete6.AddPerson("p1", "Person 1", "./assets/img1.png")
    VAutocomplete6.AddPerson("p2", "Person 2", "./assets/img2.png")
    VAutocomplete6.AddPerson("p3", "Person 3", "./assets/img3.png")
    VAutocomplete6.AddPerson("p4", "Person 4", "./assets/img4.png")
    VAutocomplete6.AddPerson("p5", "Person 5", "./assets/img5.png")
    VAutocomplete6.AddPerson("p6", "Person 6", "./assets/img6.png")
    VAutocomplete6.AddPerson("p7", "Person 7", "./assets/img7.png")
    VAutocomplete6.AddPerson("p8", "Person 8", "./assets/img8.png")
    VAutocomplete6.AddPerson("p9", "Person 9", "./assets/img9.png")
    VAutocomplete6.Refresh(about)

1629817260465.png
 
Top