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

Ola

**************************************************
Feb 2024: BVAD3 RoadMap

[BANanoVuetifyAD3] 2024 RoadMap

Hi Fam BVAD3 is currently based on VueJS 2 and Vuetify 2. As you might be aware, VueJS 3 is now the standard and VueJS 2 has come to end of life when it comes to support. Vuetify 2 will also be coming to end of life when it comes to support. There has not been any upgrades to BVAD3 to work...

www.b4x.com

*************************************************

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

[WebApps] Using Laragon as your development web server

Ola I just ran into this link, https://www.keycdn.com/blog/web-development-tools And besides XAMPP, which I have been using for my personal web development projects, there is Laragon. With XAMPP, I remember I had to manually edit my php.ini file to locate the extension for SQLite3 to be...

www.b4x.com

[BANanoVuetifyAD3] Using a real device to debug your localhost running webapp

Hi there You are developing your app and want to see it running on your device instead of your machine from localhost. The easier method: 1. Enable hotspot on your phone. 2. Connect your PC to your phones hotspot. 3. Execute cmd > ipconfig > note the IP4 IP Address 4. Enter this IP address on...

www.b4x.com

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.

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]

 

[Mashiane]

Version 5.85 is now available.

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]

Mashy Teaches BANanoVuetifyAD3 Lesson 10 is out: New Form Builder (Creating Dialogs)

 

[Mashiane]

Mashy Teaches Lesson 11 is out - Live Code Swapping i.e. Hot Reload

 

[Mashiane]

Version 5.90 is available.

Fixes bugs with the treeview

 

[Mashiane]

I love the fact that you can create a mobile app easily with Banano Vuetify AD3.

We recently published an app on our domain as a showcase.

Top Stories

BVAD3 Design System

tgifzone.com

Enjoy!

 

[Mashiane]

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

1st. We registered the method in our route page

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

2ndly, we defined the method

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

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]

BVAD3 Version 5.91 is now available.

The BANAnoAnimeJS library has been unbundled and its properties removed from the VImg element.

Animating controls will be visited soon.

 

[sreeraj r s]

I got one console error.

 

[Mashiane]

Version 5.92 is available

Few bugs fixes..

 

[Mashiane]

Reminder: If you want to start your BVAD3 CRUD journey with PHP, start here:

[BANanoVuetifyAD] Server Maintenance Categories MySQL CRUD WebApp featuring the BANanoDataSource (PHP)

Ola NB: Please run the MySQL Connection Test first Attached is a fully working project developed with BVAD3 that showcases the new BANanoDataSource. Download Source Youw ill need the BVAD3 b4xlib, copy these to your external libraries folder These are the components we have used...

www.b4x.com

 

[Mashiane]

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

Check this out!!!

[BANanoElectron] Beginning Electron with BANano

Ola Download What is Electron? Electron is a desktop application frameworks powered by Node.js. It allow developers to create cross-platform desktop apps using HTML, CSS, and JavaScript. It offers web designers and developers a way to take their existing skills for crafting web apps and...

www.b4x.com

 

[Mashiane]

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

BANanoVuetifyAD3 Contact Manager WebApp using BANanoServer MySQL jRDC2: Source Code

Hi there Announcing our next project. A contact manager jRDC2 WebApp using the BANanoServer. The project is DonationWare and any donation is welcome. The paypal address is anele@mbangas.com. Featuring: MySQL BackEnd jRDC2 Connection BANanoDataSource Badges ListView Form Builder Custom...

www.b4x.com

 

[Mashiane]

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.

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

Good day 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) FOR A MORE DETAILED SETUP PROCESS...

www.b4x.com

 

[Mashiane]

IMPORTANT INFORMATION

[BANanoVuetifyAD3] Images in the Assets folder not getting updated

Hi, I am trying to learn BVAD3. I started with a new project. My first task is to replace few of the Icons/images with my own instead of the default Icons/Images. For eg I have replaced the following 5 images with my own Images and Ico BANano.Header.AddFavicon("./assets/favicon.ico", "16x16")...

www.b4x.com

 

[Mashiane]

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.

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.

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]

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]

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)

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

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.

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.

 

[Mashiane]

Version 5.95 is now available.

 

[Mashiane]

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.

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)

 

[Mashiane]

Did you know?

The VAutoComplete control can also be used as a color picker? You just check the ColorList property bag option and automatically your element is generated?

We have also decreased the sizes of the color indicators so they fit perfectly!