B4J Question CSSUtils: How to reset node?

Mashiane

Expert
Licensed User
Longtime User
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.
 
Upvote 0

udg

Expert
Licensed User
Longtime User
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?
 
Upvote 0

Mashiane

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

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

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

B4X:
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
 
Upvote 0

inakigarm

Well-Known Member
Licensed User
Longtime User
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
B4X:
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)
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
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.

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

Original.png
 
Last edited:
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
Maybe
B4X:
CSSUtils.SetStyleProperty(Button1,"-fx-focus-color","red")
 
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
When you leave the button it will revert to its original border color.
(it also works for textfields etc)
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
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..

B4X:
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
 
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
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 :
B4X:
.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;
}
 
Last edited:
Upvote 0
Top