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

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:
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Tip: Adding Dynamic BreadCrumbs

Whilst you are able to add breadcrumbs that can remain static, you can also add breadcrumbs that are dependent on content that changes at runtime.

On Initialize of the component, we create a empty breadcrumb item. The variable has been defined as a global variable

B4X: 
'we add a container
Dim contApps As VueElement = vuetify.AddContainer(Me, appusers.Here, "contappusers", True)
    appusers.BindVueElement(contApps)
    contApps.AddRows1.AddColumns12
    contApps.AddRows1.AddColumns5.AddColumns2.AddColumns5
    contApps.BuildGrid
    
'get the r1c1 element and add a toolbar
    Dim r1c1 As VueElement = contApps.Cell(1, 1)
    'add a toolbar
    Dim tbl1 As VueElement = r1c1.AddToolbar("tblappusers", "", Null)
    tbl1.Flat = True
    'add breadcrumbs
    appuserbc = tbl1.AddBreadCrumbs("appusersbc")
    appuserbc.Large = True
    appusers.BindVueElement(appuserbc)
    '
    tbl1.AddSpacer
    'when the page shows, executes the onshow subroutine
    appusers.SetMounted(Me, "onshow", Null)
    'add the component as a router
    vuetify.AddRoute(appusers)

The onshow subroutine, we define a few items we need to build our breadcrumbs

B4X: 
Sub onshow            'ignoreDeadCode
    'get the active app
    Dim activeapp As Map = vuetify.GetData("activeapp")
    Dim sapkname As String = activeapp.GetDefault("apkname", "")
    Dim sapkversion As String = activeapp.GetDefault("apkversion", "")
    Log(activeapp)
    'update the breadcrumbs
    appuserbc.ClearItems
    'add all breadcrumbs
    appuserbc.AddBreadCrumbItem("Home", "/", True, "", True, False)
    appuserbc.AddBreadCrumbItem("Apps", "/apps", True, "", True, False)
    appuserbc.AddBreadCrumbItem($"${sapkname} Version: ${sapkversion}"$, "", True, "", True, False)
    appuserbc.AddBreadCrumbItem("Users", "", True, "", True, False)
    appuserbc.RefreshItems(appusers)
End Sub

Output. As an example in this page we want to show all users for the Preventa... app

1614072038890.png
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
To add static breadcrumbs, you do them on the initialize call of the component route.

For example, ouput,

1614072285277.png


B4X: 
'add a container to hold the user groups
    Dim contUserGroup As VueElement = vuetify.AddContainer(Me, usergroups.Here, "contUserGroup", True)
    contUserGroup.AddRows2.AddColumns12
    contUserGroup.BuildGrid
    '
    'add breadcrumbs
    Dim appsbc As VueElement = contUserGroup.MatrixElement(1, 1).AddBreadCrumbs("ugbc")
    appsbc.Large = True
    appsbc.AddBreadCrumbItem("Home", "/", True, "", True, False)
    appsbc.AddBreadCrumbItem("User Groups", usergroups.Path, True, "", True, False)
    usergroups.BindVueElement(appsbc)

Now when you click Home, the home page will be opened. Clicking user groups will not have an effect here as you are on the same page.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Tip: Blurring Elements

If you don't want an element to be clear you can blur it.

1614114778174.png


1. We have created a container component, we set the blurring state variable. By fault, its false after you bind the vue element

B4X: 
Dim contUsers As VueElement = vuetify.AddContainer(Me, users.Here, "contusers", True)
    contUsers.Blurred = "contusersblurred"
    users.BindVueElement(contUsers)
    contUsers.AddRows2.AddColumns12
    contUsers.BuildGrid

To change the blurring state at runtime, turning it on / off.

B4X: 
users.SetData("contusersblurred", True)
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Tip: Implementing SSL for laragon

Using laragon with SSL for your development.

[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 www.b4x.com

1614275766278.png
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Tip: Using the global store to control state - more like Vuex

Whilst one is able to vuetify.SetData("blurred", true) and vuetify.GetData("blurred") to set and get global state in any component, making these "variables" work with component state is only available with the "store"

The store in BVAD3 works like VueX

Its seems with the latest release of VueJS 3, the use of Vuex is something that is rather built in. I read an article about whether it was feasible and necessary to change to VueJS3, well, time will tell, at the moment there is no real need to ad BVAD3 has been working without issues and has been able to outperform both the 1st and 2nd iterations as it has been developed differently.

Anyway. To be able to set states that can be assigned to element properties, one is able to use the BVAD3 store.

For example, to set and get state, one executes vuetify.SetStore("blurred", true) and to get execute vuetify.GetStore("blurred").

To demonstrate lets look at this gif.

QAnalysisPerRegion.gif


1. On the top right of the navbar we have a switch.

B4X: 
'   Dim appblur As VueElement = appbar.AddSwitch("appblur", "blurred", "Blur", Null, Null, vuetify.COLOR_GREEN, True, Null)
    vuetify.BindVueElement(appblur)

We then set the initial values and then set the store value on .Initialize

B4X: 
vuetify.SetData("blurred", False)
    vuetify.SetStore("blurred", False)

2. We want to detect and apply blurring each time the switch changes, so we trap the change event. What this does is to update the "store" variable, blurred.

B4X: 
Sub appblur_change(value As Object)
    'get the value
    vuetify.SetStore("blurred", value)
End Sub

3. Now, in each route component, we want to ensure that the blurring is applied. So when we create the master container in each component, we tell it that the blurred state should be obtained from the store.

B4X: 
Dim contHouse As VueElement = vuetify.AddContainer(Me, rdp.Here, "contcountbyregion", True)
    contHouse.Blurred = "$store.blurred"
    contHouse.AddRows1.AddColumns12 
    contHouse.BuildGrid

So what this does is to ensure that each time the switch changes, the store is changed and this filters to each component we have set.

This has been possible with the use of the Vue.Observable method.

Ta!
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Check this out...

Qualitative & Quantitative Analysis for RDP Houses South Africa

Ola What is an RDP House? RDP houses are part of a government-funded social housing project in South Africa. They are classified as government property, with no beneficiaries attached. The houses are allocated to homeless families, low-income families, and people with disabilities. For you to...
www.b4x.com www.b4x.com
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Part 49: Section 1

With part 49, section 1, we do things a little differently. I have been inspired and then worked on the drawer a little bit to do more. We add containers, lists, cards etc to the drawer. With some color coding it appears a little nice.

Download

ApplicantsDashboard.png


By default, when adding columns, the columns for small devices are always set to 12. We did not need these, so we have removed those attributes. This ensures that the drawer resizes itself well even in small devices

B4X: 
drwcont.Cell(1, 1).RemoveAttr("xs")
    drwcont.Cell(1, 1).RemoveAttr("cols")
    '
    drwcont.Cell(1, 2).RemoveAttr("xs")
    drwcont.Cell(1, 2).RemoveAttr("cols")

Ta!
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
Share My Creation BANano File Sharer Dashboard
Replies
2
Views
2K
Mashiane
Mashiane
Mashiane
  • Article
B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano
16 17 18
Replies
351
Views
61K
NGUYEN TUAN ANH
NGUYEN TUAN ANH
Mashiane
  • Article
Share My Creation [BANanoWebix] An OpenSource Webix UX Wrapper for BANano
2 3
Replies
58
Views
20K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [BANano] WebSites, WebApps, Frameworks Created with BANano
2 3
Replies
43
Views
7K
Mashiane
Mashiane
alwaysbusy
  • Article
B4J Tutorial [BANano] v2: (2) B4J Abstract Designer
Replies
0
Views
5K
alwaysbusy
alwaysbusy
Top