B4J Question CSSUtils: How to reset node?

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

Well-Known Member
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

Well-Known Member
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