B4J Question CSSUtils: How to reset node?

[Mashiane]

Hi there

I want to reset the border of a node to its original format, how can I achieve this after I set it with CssUtils.SetBorder?

Thanks a lot

 

[Erel]

I'm not sure what you mean with original format. You can set the width to 0 to remove the border.

You can also reset the Style property to remove all custom styling:

Node.Style = ""

 

[Mashiane]

Sadly this removes the border that was added in the PropertyBag via the Designer. Usually the nodes have a light gray border sized 1 i think, when I change the border and radius via code to red, radius 2, size 2, I also want to revert back to original light gray size 1. I thought there was an easier way I could quickly do so.

 

[udg]

Can't you save the component's style before applying your changes and restore it when you need to revert back to its original style?
Am I missing something?

 

[Mashiane]

I understand that to set the border, one calls this method as per cssutils module...

Public Sub SetBorder(Node As Node, Width As Double, Color As Paint, CornerRadius As Double)
    SetStyleProperty(Node, "-fx-border-color", ColorToHex(Color))
    SetStyleProperty(Node, "-fx-border-width", Width)
    SetStyleProperty(Node, "-fx-border-radius", CornerRadius)
    SetStyleProperty(Node, "-fx-background-radius", CornerRadius)
End Sub

So I tried...

Public Sub GetBorderColor(Node As Node) As String
    Return GetStyleProperty(Node,"-fx-border-color")
End Sub

buts its returning blank when I run it before I set the border on any of my views in the page..

Public Sub GetStyleProperty (Node As Node, Key As String) As String
    Dim m As Matcher = Regex.Matcher($"${Key}([^;]+;):"$, Node.Style)
    If m.Find Then
        Return m.Group(1)
    Else
        Return ""
    End If
End Sub

 

[inakigarm]

Sadly this removes the border that was added in the PropertyBag via the Designer. Usually the nodes have a light gray border sized 1 i think, when I change the border and radius via code to red, radius 2, size 2, I also want to revert back to original light gray size 1. I thought there was an easier way I could quickly do so.

You can retrieve the button_width with

CSSUtils.GetStyleProperty(Button1,"-fx-border-width")

, save it, and restore it from this point every time

(the border width of a button is 0 at the designer)

 

[Mashiane]

This is my original screen as per designer, nothing changed. I am looping through the controls one control at a time when I press the arrow buttons > < and I use cssutils to change the border to red with size 2 and radius 2, this works perfectly.

CSSUtils.SetBorder(txtGridLastRow,2,fx.Colors.Red,2)

Now, when I move to another control to border it, radius 2, border width 2, I need to reset the previous one to the original design, i.e. without the red border, with size px

1. I am in txtGridLastRow, (originally grey and things) I run the above setborder script, now I want to apply same for btn5+7, so I execute..
2. SetBorder(btnGrid5p7, 2, fx.Colors.Ref, 2)... but now I need to leave txtGridLastRow without the red border so that only btnGrid5p7 is bordered red.

 

[Daestrum]

Maybe

CSSUtils.SetStyleProperty(Button1,"-fx-focus-color","red")

 

[Mashiane]

Maybe

CSSUtils.SetStyleProperty(Button1,"-fx-focus-color","red")

The 'red' works, I need a way to reset it back to orinal design... thanks anyway...

 

[Daestrum]

When you leave the button it will revert to its original border color.
(it also works for textfields etc)

 

[Mashiane]

Perhaps I should ask this question


What are the default styles for the border for a textbox and button? border color, border size, border radius?

 

[Mashiane]

When you leave the button it will revert to its original border color.
(it also works for textfields etc)

I am setting the border style, color, radius, width via code for each control i.e. red. I want to toggle this via code between the new set style and the default set styles, this code, inside the CSSUtils module does what I want when I set my border etc..

Public Sub SetBorder(NodeAsNode, Width As Double, Color AsPaint, CornerRadius As Double)
SetStyleProperty(Node, "-fx-border-color", ColorToHex(Color))
SetStyleProperty(Node, "-fx-border-width", Width)
SetStyleProperty(Node, "-fx-border-radius", CornerRadius)
SetStyleProperty(Node, "-fx-background-radius", CornerRadius)
End Sub

 

[Daestrum]

You can find the default styles if you dig through the jre

lib/ext/jfxrt.jar -> /com/sun/javafx/scene/control/skin/ <- here are the css files ->

eg, for a button in Caspian it's :

.button {
  -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  -fx-background-radius: 5, 5, 4, 3;
  -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
  -fx-text-fill: -fx-text-base-color;
  -fx-alignment: CENTER;
  -fx-content-display: LEFT;
}

 

[Mashiane]

Cool thanks, let me do that,, for now I have used CSSUtils.SetBorder(control,0,fx.Colors.LightGray,2)