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

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

 

Mashiane

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

For example, ouput,



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

Expert
Licensed User
Longtime User
Tip: Blurring Elements

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



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

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

 

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.



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

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
 

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



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

  • Article
Share My Creation BANano File Sharer Dashboard
Replies
2
Views
2K
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
  • Article
Share My Creation [BANanoWebix] An OpenSource Webix UX Wrapper for BANano
2 3
Replies
58
Views
20K
Mashiane
  • Article
Share My Creation [BANano] WebSites, WebApps, Frameworks Created with BANano
2 3
Replies
43
Views
7K
Mashiane
  • Article
B4J Tutorial [BANano] v2: (2) B4J Abstract Designer
Replies
0
Views
5K
alwaysbusy
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…