B4J Question [BANanoVuetifyAD3] How to change color on text in a VLabel ?

[Christian75]

Hi I'm trying to change attributes on a VLabel that is made in Abstract manager after it has been bound.
I have manage to change the text using {{ artnumber }} in Caption field but what if I want to change the color for example ?

Private Sub Icon_Image_Click (e As BANanoEvent)
    'This works to change the text and not the color
    vuetify.SetData("artnumber", "Bulle")

    'These do not work:
    vuetify.SetData("artnumber.color", "#ff0000")
    vuetify.SetData("VLabel7.color", "#ff0000")
    VLabel7.VElement.TextColor = "red"
End Sub

Any ideas to solve this ?

 

[Mashiane]

At Design Time, the same approach used here to change the color of the ToolBarTitle and Hamburger should apply.

 

[Mashiane]

VLabel7.VElement.

Please note that changing stuff with .VElement like this SHOULD BE DONE only on .Initialize after BANano.LoadLayout as it only affects DESIGN TIME attributes, styles and classes. IT WILL NEVER WORK at runtime.

To change anything at RUNTIME you need to use any call that starts with .Update???

I hope this is clear.

 

[Christian75]

Ok it is clear!

Yes that is what I'm trying to get my head around and to understand how to do things right.
But in the video then the color is changed in the abstract designer.
I now understand that I need to use .UpdateXX and if the VLabel7 in my case is bound under vuetify how can I change the text color in runtime with .UpdateXX ?
I have added VLabel7 in the abstract designer.

can I use vuetify.UpdateVueElement(VLabel7, a, b, c, d) ?
And what should a, b, c and d be in that case, I guess c should be the Caption ?

or is it vuetify.UpdateColor(eIID, "red")
I tried a lot of different names for eIID but are not able to change the color to red

For example if you would like to change the appbar color in your video when you click the hamburger button how would you do that in a code example ?

Private Sub hamburger_ClickStop (e As BANanoEvent)
    'click stop propagation
    appdrawer.ToggleOnApp(vuetify)
    'Here change appbar to black, is it possible? and how
    ...
End Sub

Sorry for asking these trivial questions.

 

[Christian75]

Or should I use the V-Bind in the abstract designer ?
And if that is the case how do I add a V-Bind for the TextColor, what do I type in the V-Bind text field ?

 

[Mashiane]

Please don't ever hesitate to ask questions. I welcome them.

As per video above, the background color is set via the color attribute.

For now what you can do is to create a binding for the color attribute after BANano.LoadLayout like this

appbar.Bind("color", "appbarcolor")
appbar.SetData("appbarcolor", vuetify.COLOR_RED)

Remember, you can also create the binding via the abstract designer like this (multiple attributes can be separated with semicolon (

So this translates to <v-app-bar :color="appbarcolor"><v-app-bar> or <v-app-bar v-bind:color="appbarcolor"><v-app-bar>

Then at runtime

Private Sub hamburger_ClickStop (e As BANanoEvent)
    'click stop propagation
    appdrawer.ToggleOnApp(vuetify)
    'Here change appbar to black, is it possible? and how
    vuetify.SetData("appbarcolor", vuetify.COLOR_BLACK)
End Sub

I have not tested this though.

Just a heads up, at the current moment, we are implementing most runtime related updates like changing text-colors, applying styling, toggling classes to components at runtime (because Vuetify works differently to BANano e.g. changing things at runtime needs to be done via binding). This was not default added features sadly and were in the pipe-line. As an example, below we are changing the label caption and styling at runtime with a v-bind:class="theclass" kinda methodology.

Will keep you posted.

 

[Mashiane]

Just to expand on changing attributes at runtime.

On the Vuetify docs, when you explore the API, lets say for example the v-app-bar API, you have these attributes, https://vuetifyjs.com/en/api/v-app-bar/

This methodology applies to all the elements as per API documentation. Assuming that for example, you want to change the dark property at runtime. The same principle applies as indicated above.

After BANAno.LoadLayout, create the binding to the element you want to change at run-time.

appbar.Bind("dark", "appbardark")
appbar.SetData("appbardark", false)

Then at run-time, you can execute

vuetify.setdata("appbardark", true)

To change it to whatever value you want.

IMPORTANT

Binding styles and classes though works the same way. I am however building the changing of styles and classes to be internal to BVAD3. For the API attributes per elements, the developer will just have to use the methodology indicated here.

TA!

 

[Christian75]

Ok now I got it to work!

Almost what you wrote. I got it to work like this:

    VLabel7.VElement.Bind("style", "arttextcolor")

Important as @Mashiane says it needs to be after LoadLayout but also before BindStateOnApp.
Also not that a small typo on @Mashiane code you need the .VElement before .Bind
And so far I only got it to work when using style as attribute as in the code above.

The you can set the color attribute on click like this (this will toggle the color between red and black):

Private Sub gskImage_Click (e As BANanoEvent)
    Dim test_string As String
    
    test_string = vuetify.GetData("arttextcolor")
    If test_string = "color:red" Then
        vuetify.SetData("arttextcolor", "color:black")
    Else
        vuetify.SetData("arttextcolor", "color:red")
    End If
End Sub

Thanks for the help @Mashiane!
Now my little project can move on a bit further, I think there will be more questions later!

 

[Mashiane]

Interesting: As per GIF above, this has already been implemented. All you will have to do is:

VLabel7.UpdateColor(vuetify.COLOR_RED) or VLabel7.UpdateTextColor(vuetify.COLOR_BLACK)

See this post: https://www.b4x.com/android/forum/t...bsites-webapps-with-banano.124548/post-849642

 

[Christian75]

I cannot do that ?!

Those two are the only Update??? I have to choose from

These are the libraries I use:

I'm missing any library that these are functions are in ?
But when I read you post above it says that it is an upcoming update, so have you released it or is it next release ?