B4J Question Radius of Btn resets when background color is changed

[aminoacid]

I created a Button in designer and set the radius to 18 so that the button is round. At run time, I want to set the background color of the button to RED, so I use the following statement:

btnR1.Style = "-fx-background-color: Red;"

which works but it also resets the radius to 0 and the button shape is now rectangular.

Is there a more direct way to change the background color of a button without affecting anything else?

Thanks!

 

[emexes]

Try:

Log(Button1.Style)
Button1.Style = "-fx-background-color: Red; " & Button1.Style
'''Button1.Style = Button1.Style & " -fx-background-color: Red;"    'or maybe this way around
Log(Button1.Style)

Both give a red button retaining the round ends, but looks somewhat stark.

 

[aminoacid]

That is a neat "trick".
It works. Thanks!

 

[emexes]

Try using -fx-base: Red;
instead of -fx-background-color: Red;

Seems to help it retain some of its buttonness...

 

[emexes]

This post here:

https://www.b4x.com/android/forum/threads/styling-buttons-with-css.50679/#post-522781

looks good too. But could be dangerous, in terms of soaking up programming time playing around with all the effects...

;-)

 

[aminoacid]

This post here:

https://www.b4x.com/android/forum/threads/styling-buttons-with-css.50679/#post-522781

looks good too. But could be dangerous, in terms of soaking up programming time playing around with all the effects...

;-)

Looks messy to me just to do something so simple. Your fix was elegant and smart! Thanks again.

 

[aminoacid]

Strange thing is that I can set the background color to red:

Button1.Style = "-fx-background-color: Red; " & Button1.Style

But then later if I try to set it to, say blue:

Button1.Style = "-fx-background-color: Blue; " & Button1.Style

It does not work and stays Red. Same thing using "-fx-base".

It seem like once you change the background color, you cannot go back and change it again.

 

[aminoacid]

I got it to work using a somewhat convoluted method …...

I set the initial button style to a global temporary string variable in "AppStart":

OriginalStyle=Button1.Style

Then, whenever I want to change the background color, I have to do this:

Button1.style=OriginalStyle
Button1.Style = "-fx-background-color: Blue; " & Button1.Style

It works fine … but there has to be a more direct and simpler way to do this.

 

[emexes]

It seem like once you change the background color, you cannot go back and change it again.

What is actually happening is that each time another color command is added at the front of the style, all the old color commands are still also in the style, after it, and the button simply stays whatever the end color command is.

Eg, after adding five colors of the rainbow, the style would look like:

"-fx-background-color: Blue; -fx-background-color: Green; -fx-background-color: Yellow; -fx-background-color: Orange; -fx-background-color: Red; "

and the button color would be Red, regardless of any new color command added to the start of the style.

 

[emexes]

I got it to work using a somewhat convoluted method …...

and that is the way I would have done it too... great minds think alike!!!

It works fine …

but there has to be a more direct and simpler way to do this.

Yeah, you would think there would just be a color property of the button, like there is in B4A.

The kludgy way would be to add new color commands to the end of the string (where they will override earlier color commands) rather than to the beginning, eg:

Button1.Style = Button1.Style & " -fx-background-color: Blue;"

but then the Style property string will get longer and longer and longer and... boom!

Another approach is: if life gives you lemons, make lemonade. You could write a Sub that adds or modifies a field within Button.Style, eg, if the color command was already present, it would change it from -fx-background-color: Red; to -fx-background-color: Blue; rather than adding a new color command. But you've already got the button color change working, and putting effort into writing that Sub isn't going to make the color change any better than it already is, so... perhaps save writing that Sub for a rainy day when you don't have better things to do

 

[aminoacid]

Makes sense... thanks for the feedback!

 

[Erel]

Never set the Style property directly. Use CSSUtils.SetStyleProperty instead.

 

[aminoacid]

Never set the Style property directly. Use CSSUtils.SetStyleProperty instead.

OK, so I saw that there was a SetBackgroundColor Property so I tried this:

CSSUtils.SetBackgroundColor(Button1,fx.Colors.Red)

and it worked. The color was set to RED. But later in the code I try to change it to BLUE:

CSSUtils.SetBackgroundColor(Button1,fx.Colors.Blue)

But it changes it back to the original color set at the Designer.
​

 

[emexes]

OK, so I saw that there was a SetBackgroundColor Property so I tried this:

1/ re: giving CSSUtils a try; I should have realised that the lemons-to-lemonade Sub proposal had already been done, given the number of times I've found myself eating Erel's dust recently whilst stumbling down paths he has travelled before.

2/ Log Button1.Style before and after the CSSUtils call, to see what change it has made - that may well point you to a solution.

 

[emexes]

But it changes it back to the original color set at the Designer.

I am not getting the problem here, ie it changes color between Red and Blue no problem. Have a closer look at your code, and if that doesn't fix it, post the lines here - that's guaranteed to fix it

Sub Button1_Click

    Log(Button1.Style)
    CSSUtils.SetBackgroundColor(Button1, fx.Colors.Red)
    Log(Button1.Style)
  
End Sub

Sub Button2_Click    'changes color of Button1 (not Button2)
  
    Log(Button1.Style)
    CSSUtils.SetBackgroundColor(Button1, fx.Colors.Blue)
    Log(Button1.Style)
  
End Sub

 

[Erel]

given the number of times I've found myself eating Erel's dust recently whilst stumbling down paths he has travelled before.

The dust has already settled by now
CSSUtils was written on 2015.

 

[aminoacid]

OK... I'm going to get to the bottom of this …. sorry for stirring up the dust again

 

[aminoacid]

I found the problem... as emexes suggested … it was in my code. I had so many test code fragments trying to get the Style property to work that one statement was left uncommented out and was affecting the SetBackground color statement. Thanks Guys for your time helping out. And yes Erel, I have been meaning to look into XUI …. so much to learn ….. so little time <sigh>