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

Ola

Getting Started

NB: IT IS IMPORTANT THAT YOU PLEASE RUN THE BANANOVUETIFYAD3 LIBRARY ON YOUR OWN DEVICE (DO NOT USE THE COMPILED B4XLIB OUT OF THE BOX),THIS WILL GENERATE THE B4XLIB FOR YOUR DEVICE.

IMPORTANT ANNOUNCEMENT : BindState / BindVueElement DEPRECATED



Please read my Article on Medium

1. Download and Copy these files to your B4J External Libraries Folder.
NB: It is greatly recommended that you Download the Library Source Code and run it from your PC Directly
2. Download this b4x template and put it in your B4J Internal Libraries Folder
3. Download and run the Awesome Kitchen Sink WebApp
4. Learn from Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
5. We also have the BANanoServer (jetty) version of the Kitchen Sink. See this link also https://www.b4x.com/android/forum/t...bsites-webapps-with-banano.124548/post-845410
6. Download test.sql to import with phpMyAdmin

BANanoDataSource



Tools

BindVueElement Builder

You also can

Explore the Awesome Kitchen Sink WebApp Online hosted on GitHub
Mashy Teaches BANanoVuetifyAD3 YouTube PlayList

Creating a new Project

3. In B4J, click File > New > BVAD3EDS to create a new project

1624754308034.png


What's Next?

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

For MySQL Back-Ends

Run the Connection Tester WebApp
https://www.b4x.com/android/forum/threads/banano-bvad3-php-connection-tester.131014/page-2

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

BTW we are on Social Media

Join our Telegram: https://t.me/bananovuematerial
Twitter handle: @mashymbanga

Open Source Code (MIT License)

Here is the Library Source Code (THIS IS OPEN-SOURCE)
Here is the Source Code for the Extensions we have used

Freebies - BVAD3 Projects

Download

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

Mashiane

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

Mashiane

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

Check this out!!!

 

Mashiane

Expert
Licensed User
Reminder: If you want to start your BVAD3 jRDC CRUD journey, start here:

 

Mashiane

Expert
Licensed 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
IMPORTANT INFORMATION

 

Mashiane

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