B4J Library [class] CSS Utils

The CSSUtils code module makes it easier to update CSS properties at runtime.


Methods:

- SetBackgroundColor
- SetBackgroundImage
- SetBorder
- ColorToHex (this is a helper method for other methods that work with colors)
- SetStyleProperty
- GetStyleProperty

CSSUtils.SetBackgroundColor(Pane1, fx.Colors.Yellow)
CSSUtils.SetStyleProperty(Pane1, "-fx-rotate", "45")

Add CSSUtils to your project with Project - Add Existing Module.

The CSS properties are documented here: https://docs.oracle.com/cd/E17802_01/javafx/javafx/1.3/docs/api/javafx.scene/doc-files/cssref.html

Starting from B4J v4.20, CSSUtils is included as a library.

 

[LucaMs]

Great!

Thank you, Erel

 

[tdocs2]

Thank you, Erel.

The CSS utilities is truly a great addition to the B4J arsenal.

*******************

Questions to the experts:
I looked at the documentation from ORACLE (they never make anything easy), and I really could not figure out change the background color and text color of a listview. Also, how would I modify the scrollbar in a listview to make it behave more like Android?

Thank you in advance for your replies.

Sandy

 

[tdocs2]

Greetings, once more...

I modified Erel's Main to include a listview. I got as far as to set the background color f the listview, but once the items are added, the defaults set in. The text color was a pure guess which did not pan out.

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private Pane1 As Pane
    Private ListView1 As ListView
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.SetFormStyle("UNIFIED")
    MainForm.RootPane.LoadLayout("1") 'Load the layout file.
    MainForm.Show
    CSSUtils.SetBackgroundColor(Pane1, fx.Colors.Yellow)
    For i=1 To 20
        ListView1.Items.Add("Item # "&i)
    Next
    CSSUtils.SetStyleProperty (ListView1, "-fx-background-color", "yellow")
    CSSUtils.SetStyleProperty (ListView1, "-fx-text-color", "blue")

End Sub

Any help is welcomed.

Sandy

 

[LucaMs]

Considering this Erel's answer:

You can see what the designer adds with Log(Node.Style).

and this log for a ListView:

ListView1 style:
-fx-font-size:15,00;-fx-border-color:#000000;
-fx-border-width:0,00;

with this class you can modify this way font-size, border-color and border-width only, I think.

Picture above explains that you can add Nodes to a ListView (I don't know how); you could modify the style
of them (?)

P.S. to add a pane as item, simply use ListView1.Items.Add!



JavaFX CSS Reference Guide:
"fx-text-color" does not exist.

 

[LucaMs]

This bad example works:

For i = 0 To 9
    Dim Item As TextArea
    Item.Initialize("ListView1Node")
    Item.Text = "Item #" & i
    Item.Style = "-fx-text-fill: Blue;"
    ListView1.Items.Add(Item)
Next
  
For i = 0 To 9 Step 2
    Dim Item As TextArea = ListView1.Items.Get(i)
    CSSUtils.SetStyleProperty(Item, "fx-text-fill", "Red")
Next

 

[tdocs2]

@LucaMs

Thank you, Luca. Brilliant as usual!

Your replies gave me an opportunity to give you a double like - one for the lesson and the second one for the direct solution.

Grazie, mio amico.

Sandy

 

[Erel]

CSSUtils v1.10 is attached to the first post. Adds more useful methods.

 

[ivanomonti]

how can I get effect when the pointer moves over the object Thanks

 

[Erel]

Not with CSSUtils. Please start a new thread for this in the questions forum.