JavaFX CSS Reference Guide

The JavaFX CSS Reference Guide is available

JavaFX Style Sheet with my custom component

Because my custom component doesn’t have a Mac look and feel (the rounded corners of the TextBox) and because I don’t want to change the code of my component, I decided to create a Mac Style Sheet.

Now, let us study the Mac style sheet and the code to use this style sheet

the Mac style sheet - mac.css

.searchTextBox {corner-radius: 25;padding-left: 10}

To have a rounded corners of the textbox, I use the CSS attribute corner-radius and to move the position of the input cursor (because of the rounded corners), I use the CSS attribute padding-left

To use this CSS just set the style sheets attribute of your Scene with the location of your CSS file.

    scene: Scene {
        stylesheets : ["{__DIR__}resources/mac.css"]

The code of the demo (the code of the custom component doesn’t change)

resources\mac.css

/* 
    Document   : style
    Created on : 3 oct. 2009, 00:34:05
    Author     : paddy
    Description:
        Purpose of the stylesheet follows.
*/

.searchTextBox {corner-radius: 25;padding-left: 10}
.searchTextBoxRed{corner-radius: 25;padding-left: 10;border-fill:#FF0000;}

Main.fx

/*
 * Main.fx
 *
 * Created on 3 oct. 2009, 00:44:05
 */

package customcomponentcssdemo;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.control.Button;
import javafx.scene.control.RadioButton;

import javafx.scene.control.ToggleGroup;

/**
 * @author Patrick
 */

class ExtRadioButton extends RadioButton {
    public var action:function();

    override public var selected on replace {
        if (selected) {
            action();
        }
    }
}

def macStyleSheet="{__DIR__}resources/mac.css";
var stylesheets:String = macStyleSheet;

Stage {
    title: "Application title"
    width: 250
    height: 200

    var cssToggleGroup = ToggleGroup {};

    scene: Scene {
        //stylesheets : ["{__DIR__}resources/mac.css"]
        stylesheets : bind stylesheets
        content: [
            Text {
                font : Font {
                    size : 16
                }
                x: 10
                y: 30
                content: "Search "
            }
            SearchTextBox {
                    //styleClass : "searchTextBoxRed"
                    translateX :10
                    translateY :40
                    

                    onResetSearch:function(){
                        println("reset !");
                    }
                    onSearch:function(s: String){
                        println("Search of : {s}");
                    }
            }
            Button {
                    text: "just a button to change focus"
                    translateX :10
                    translateY :80
                    action: function() {
                        println("Hello !")
                   }
            }

            ExtRadioButton {
                            text: "do not use the CSS"
                            translateX :10
                            translateY :110
                            toggleGroup: cssToggleGroup
                           // selected: true

                            action: function() {
                                stylesheets = " ";
                            }
            }

            ExtRadioButton {
                            text: "use the CSS"
                            translateX :10
                            translateY :130
                            toggleGroup: cssToggleGroup
                            selected: true

                            action: function() {
                                stylesheets = macStyleSheet;
                            }
            }
        ]
    }
}