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.


    Methods:

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

    Code:
    CSSUtils.SetBackgroundColor(Pane1, fx.Colors.Yellow)
    CSSUtils.SetStyleProperty(Pane1, 
    "-fx-rotate""45")
    [​IMG]

    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

    V1.11 is attached.

    Starting from B4J v4.20, CSSUtils is included as a library. v1.11 of the library is attached. Note that you need to copy it to the internal libraries folder (not the additional folder).
     

    Attached Files:

    Last edited: Feb 17, 2016
    Kiffi, DonManfred, Ed Brown and 9 others like this.
  2. LucaMs

    LucaMs Expert Licensed User

    Great!

    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.

    Sandy
     
  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.

    Code:
    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
     
  5. LucaMs

    LucaMs Expert Licensed User

    Considering this Erel's answer:
    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.


    upload_2015-12-31_8-32-46.png

    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:
    Code:
    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 and Ed Brown like this.
  7. tdocs2

    tdocs2 Well-Known Member Licensed User

    @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
     
    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.
     
Loading...