B4J Library [class] CSS Utils

Discussion in 'B4J Libraries & Classes' started by Erel, Dec 30, 2015.

  1. Erel

    Erel Administrator Staff Member Licensed User

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


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

    CSSUtils.SetBackgroundColor(Pane1, fx.Colors.Yellow)

    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.

    Attached Files:

    Last edited: Aug 23, 2017
  2. LucaMs

    LucaMs Expert Licensed User


    Thank you, Erel
  3. tdocs2

    tdocs2 Well-Known Member Licensed User

    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.

  4. tdocs2

    tdocs2 Well-Known Member Licensed User

    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
    "1"'Load the layout file.
        CSSUtils.SetBackgroundColor(Pane1, fx.Colors.Yellow)
    For i=1 To 20
    "Item # "&i)
        CSSUtils.SetStyleProperty (ListView1, 
        CSSUtils.SetStyleProperty (ListView1, 

    End Sub
    Any help is welcomed.

  5. LucaMs

    LucaMs Expert Licensed User

    Considering this Erel's answer:
    and this log for a ListView:

    ListView1 style:

    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.
    Last edited: Dec 31, 2015
    tdocs2 likes this.
  6. LucaMs

    LucaMs Expert Licensed User

    This bad example works:
    For i = 0 To 9
    Dim Item As TextArea
        Item.Text = 
    "Item #" & i
        Item.Style = 
    "-fx-text-fill: Blue;"
    For i = 0 To 9 Step 2
    Dim Item As TextArea = ListView1.Items.Get(i)
    tdocs2 and Ed Brown like this.
  7. tdocs2

    tdocs2 Well-Known Member Licensed User


    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.

    LucaMs likes this.
  8. Erel

    Erel Administrator Staff Member Licensed User

    CSSUtils v1.10 is attached to the first post. Adds more useful methods.
    ellpopeb4a and LucaMs like this.
  9. ivanomonti

    ivanomonti Well-Known Member Licensed User

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

    Erel Administrator Staff Member Licensed User

    Not with CSSUtils. Please start a new thread for this in the questions forum.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice