Using the setUserAgentStylesheet(String URL) Method

The first way to apply CSS style sheets is by invoking the static setUserAgentStylesheet() method on the JavaFX Application (javafx.application.Application) class. This static method styles every scene and all child nodes in a JavaFX application as shown here.

Application.setUserAgentStylesheet(url);

The setUserAgentStylesheet(String URL) method accepts a valid URL string representing the JavaFX CSS file. Typically, CSS files are bundled inside a JAR application; however they can reside on the local filesystem or a remote web server. When the CSS file is in the classpath, the call to the following method will find the CSS file and produce an URL string for accessing the file:

getClass().getResource("path/some_file.css").toExternalForm()

This assumes the resource is copied and collocated where the compiled classes are.

The following code snippet loads the sample.css file as the current look and feel for the JavaFX Application. The sample.css file in the code snippet is co-located where the current class is located. In other words, your Java class and your CSS file are in the same directory, so there is no need for a path in front of the filename.

Application.setUserAgentStylesheet(getClass().getResource("sample.css")
                                             .toExternalForm());

The setUserAgentStylesheet() method applies styling globally to all scenes owned by an application, such as context menus and child popup windows. JavaFX 8 currently contains two style sheets—Caspian and Modena—which serve as default cross-platform look and feel skins. Because the two style sheets are predefined, you can easily switch between them using the setUserAgentStylesheet() method. The following code shows how to switch between the Caspian and Modena look and feel style sheets.

// Switch to JavaFX 2.x's CASPIAN Look and Feel.
Application.setUserAgentStylesheet(STYLESHEET_CASPIAN);

// Switch to JavaFX 8's Modena Look and Feel.
Application.setUserAgentStylesheet(STYLESHEET_MODENA);

A great way to learn how the pros do it (creating skins) is to look at good examples. You can extract the CSS files (caspian.css and modena.css) from the jfxrt.jar file or view the JavaFX source code, located at http://openjdk.java.net . To obtain jfxrt.jar, you must be on the JDK prior to Java 9.

Since Java 9 no longer makes the jfxrt.jar available on the runtime or JDKs, you need to look for the jmods directory under JAVA_HOME. Part of project Jigsaw was also restructuring the runtime as modules. In the jmods directory you should find the module called javafx.controls.jmod. In order to get into the module file, you have to copy the module to some other temporary directory. Next, you should rename the copied module and end it with a .jar extension to be extracted. Lastly, you invoke jar xvf on the renamed module. Use your file explorer or Finder to locate the following file:

classes/com/sun/javafx/scene/control/skin/modena/modena.css

The modena.css file contains all the JavaFX CSS styling for the default look and feel. This file is where you can learn from the experts as to how they style every control on the JavaFX platform.

Using Scene’s getStylesheets().add(String URL) Method

The second way of applying a look and feel is by invoking a Scene object’s getStylesheets().add() method. Unlike the first method of applying a look and feel, the getStylesheets().add() method is used to style a single scene and its child nodes.

By calling the getStylesheets().add() method, you can style a single scene and its child nodes as shown:

Scene scene = ...
scene.getStylesheets().add(getClass().getResource("sample.css")
                                     .toExternalForm());

As in the previous call to setUserAgentStylesheet(), you pass in an URL string that represents a JavaFX CSS file. Later, you will see an example application that switches between different styles by using either the setUserAgentStylesheet() or the getStylesheets().add() method. If you decide to create an entire CSS to style an entire app, you maybe hesitant to start from scratch.

Creating an entire look and feel requires hundreds if not thousands of lines of code in order to style every UI control in JavaFX. So, it’s a good idea to start off with the default look and feel and then override styles using the getStylesheets().add() method.

I basically created very small look-and-feel style sheet files to demonstrate the ability to swap themes. The simple example CSS files have just a handful of CSS styles for a small amount of UI controls that would be styled. In other words, the example’s small CSS files are loaded via the getStylesheets().add() method, which styles only some of the nodes and not every node in the application.

Because the default style sheet (Modena.css) is loaded from the prior call via the setUserAgentStylesheet(null) method, the smaller custom CSS styling file can then “piggyback” onto the default style sheet. What’s nice is that you don’t have to start from scratch to create a new look and feel. The following snippet of code initially invokes the setUserAgentStylesheet() method with a null value, which loads Modena as the default look and feel. It then sets the scene’s additional styling by invoking the getStylesheets().add() method.

Application.setUserAgentStylesheet(null); // defaults to Modena

// apply custom look and feel to the scene.
scene.getStylesheets()
     .add(getClass().getResource("my_cool_skin.css")
                    .toExternalForm());

The Look N Feel Chooser Example Application Code

By loading the Look N Feel Chooser project into the NetBeans IDE, you can see that the source code consists of six files: LookNFeelChooser.java, lnf_demo.fxml, controlStyle1.css, controlStyle2.css, flatred.css, and sky.css. The .ttf files are TrueType fonts that are used in the Flat Red look and feel. Figure 15-10 shows the project structure in the NetBeans IDE.

Figure 15-10. The Look N Feel Chooser project structure in the NetBeans IDE

Looking at the project structure, you’ll notice the LookNFeelChooser.java file as the main driver application class. The lnf_demo.fxml file is an FXML-formatted file representing the center content, which contains the accordion UI control with other UI control elements. The FXML file was created by the Scene Builder tool. The rest of the files are JavaFX CSS style sheets that represent different look-and-feel themes: controlStyle1.css, controlStyle2.css, flatred.css, and sky.css.

Listing 15-2 shows the init() and start() methods of the LookNFeelChooser.java Application class. Remember that all JavaFX applications are first initialized via the init() method and then begin with the start() method. After you have examined Listing 15-2, you can read about how it all works.

Listing 15-2. The Look N Feel Chooser Project Source Code to Switch Between Look and Feel (JavaFX CSS) Style Sheets. (LookNFeelChooser.java)

    @Override public void init() {
        Font.loadFont(LookNFeelChooser.class
                                      .getResourceAsStream("Roboto-Thin.ttf"), 10)
                                      .getName();
        Font.loadFont(LookNFeelChooser.class
                                      .getResourceAsStream("Roboto-Light.ttf"), 10)
                                      .getName();
}
    @Override public void start(Stage primaryStage) throws IOException {
        BorderPane root    = new BorderPane();
        Parent     content = FXMLLoader.load(getClass().getResource("lnf_demo.fxml"));
        Scene      scene   = new Scene(root, 650, 550, Color.WHITE);
        root.setCenter(content);

        // Menu bar
        MenuBar menuBar = new MenuBar();

        // File menu
        Menu     fileMenu = new Menu("_File");

        MenuItem exitItem = new MenuItem("Exit");
        exitItem.setAccelerator(new KeyCodeCombination(KeyCode.X, KeyCombination.SHORTCUT_DOWN));
        exitItem.setOnAction(ae -> Platform.exit());

        fileMenu.getItems().add(exitItem);
        menuBar.getMenus().add(fileMenu);

        // Look and feel menu
        Menu lookNFeelMenu = new Menu("_Look 'N' Feel");
        lookNFeelMenu.setMnemonicParsing(true);
        menuBar.getMenus().add(lookNFeelMenu);
        root.setTop(menuBar);

        // Look and feel selection
        MenuItem caspianMenuItem = new MenuItem("Caspian");
        caspianMenuItem.setOnAction(ae -> {
            scene.getStylesheets().clear();
            setUserAgentStylesheet(null);
            setUserAgentStylesheet(STYLESHEET_CASPIAN);
        });

        MenuItem modenaMenuItem = new MenuItem("Modena");
        modenaMenuItem.setOnAction(ae -> {
            scene.getStylesheets().clear();
            setUserAgentStylesheet(null);
            setUserAgentStylesheet(STYLESHEET_MODENA);
        });

        MenuItem style1MenuItem = new MenuItem("Control Style 1");
        style1MenuItem.setOnAction(ae -> {
            scene.getStylesheets().clear();
            setUserAgentStylesheet(null);
            scene.getStylesheets()
                 .add(getClass().getResource("controlStyle1.css")
                                .toExternalForm());
        });

        MenuItem style2MenuItem = new MenuItem("Control Style 2");
        style2MenuItem.setOnAction(ae -> {
            scene.getStylesheets().clear();
            setUserAgentStylesheet(null);
            scene.getStylesheets()
                 .add(getClass().getResource("controlStyle2.css")
                                .toExternalForm());
        });

        MenuItem skyMenuItem = new MenuItem("Sky LnF");
        skyMenuItem.setOnAction(ae -> {
            scene.getStylesheets().clear();
            setUserAgentStylesheet(null);
            scene.getStylesheets()
                 .add(getClass().getResource("sky.css")
                                .toExternalForm());
        });

        MenuItem flatRedMenuItem = new MenuItem("FlatRed");
        flatRedMenuItem.setOnAction(ae -> {
            scene.getStylesheets().clear();
            setUserAgentStylesheet(null);
            scene.getStylesheets()
                 .add(getClass().getResource("flatred.css")
                                .toExternalForm());
        });

        lookNFeelMenu.getItems()
                     .addAll(caspianMenuItem,
                             modenaMenuItem,
                             style1MenuItem,
                             style2MenuItem,
                             skyMenuItem,
                             flatRedMenuItem);

            primaryStage.setTitle("Look N Feel Chooser");
            primaryStage.setScene(scene);
            primaryStage.show();
}

How It Works

The Look N Feel Chooser application is first initialized with the overloaded method init(), which loads the required fonts used for the Flat Red look-and-feel theme. After the init() method is executed, the JavaFX application lifecycle will invoke the start() method.

In the start() method, the code begins by creating a border pane layout, which then loads an FXML file to be placed as the center content region. FXML is an XML-based language to express JavaFX UIs. This provides a way to separate the presentation layer from the application logic layer. Typically, FXML is generated by a GUI builder tool, which allows a designer to drag and drop controls and create UIs graphically. The following line uses the FXMLLoader.load() method to unmarshall (deserialize) the center content. The center content pane is an AnchorPane layout containing an Accordion control holding other UI controls.

Parent content = FXMLLoader.load(getClass().getResource("lnf_demo.fxml"));

To learn more about the Scene Builder tool, see Chapter 5.

Continuing with the example code, you will notice the usual creation of a scene with a root node. Next, the code builds a menu bar with menu items. The first menu is the File menu, which allows users to exit the application. Notice that for a quick exit using a keyboard shortcut, the KeyCodeCombination instance allows the users to press the Ctrl+X key combo. To learn about menus and keyboard shortcuts, refer to Chapter 4.

The second menu option on the Look N Feel allows the users to select predefined look and feel CSS style sheet files. The menu items are set to invoke handler code (lambda expressions) that is triggered based on an onAction event. The following code snippet is a menu item that is responsible for switching the application’s look and feel with the Caspian CSS style:

MenuItem caspianMenuItem = new MenuItem("Caspian");
caspianMenuItem.setOnAction(ae -> {
     scene.getStylesheets().clear();
     setUserAgentStylesheet(STYLESHEET_CASPIAN);
});

Above the JavaFX API, the STYLESHEET_ CASPIAN and STYLESHEET_MODENA values are strings that represent the CSS files based on their location on the classpath.

Because the rest of the code is pretty similar, I’m going to fast-forward to the last look and feel menu option, which switches to the Flat Red look and feel. The other menu items are essentially identical and invoke the same methods to clear previously loaded CSS style sheet files. However, for the Flat Red look and feel, I used the getStylesheets().add() method to style only the current scene-level nodes.

The Flat Red look and feel styles a subset of UI controls that includes sliders, scroll bars, buttons, and progress controls. The code snippet shown next sets up a menu item to be selected that will skin the application with the Flat Red look and feel. The onAction code clears the scene’s style sheets and then sets the UserAgentStylesheet to null. Lastly, the flatred.css file is loaded to style the given scene.

MenuItem flatRedMenuItem = new MenuItem("FlatRed");
flatRedMenuItem.setOnAction(ae -> {
    scene.getStylesheets().clear();
    setUserAgentStylesheet(null);
    scene.getStylesheets()
         .add(getClass().getResource("flatred.css")
                        .toExternalForm());
});

CSS id Type Selectors

The id type selector is a unique string name assigned to a node. This means that no other node’s ID can be the same. When using id type selectors, you invoke the setId(String ID) method on a JavaFX node object. For example, to target a Button instance whose ID is my-button, you invoke the setId("my-button") method. To style the button with an ID of my-button, you create a CSS style definition block declared with an ID selector #my-button, as shown:

#my-button {
   -fx-text-fill: rgba(17, 145, 213, .90);
   -fx-border-color: rgba(255, 255, 255, .80);
   -fx-border-radius: 8;
   -fx-padding: 6 6 6 6;
   -fx-font: bold italic 20pt "LucidaBrightDemiBold";
}

This CSS styling block will be applied to a button with the unique ID of my-button. Thus no other node will be allowed to contain an ID of my-button. You will also notice that when you use ID selectors in styling blocks, the CSS selector name is prefixed with the # symbol, and when setting the id in Java code, the # symbol is not used.

CSS class Type Selectors

When using class type selectors, you will be invoking the getStyleClass().add(String styleClass) method to add a selector to a node. The method allows you to have multiple style classes for styling a node. Since the getStyleClass() method returns an ObservableList, you can add and remove style classes in an ad hoc fashion to update their appearance dynamically. For example, let’s target two buttons whose style classes (ObservableList) contain a class called num-button via the getStyleClass().add("num-button") method. The following is a CSS style definition block declared with a class selector .num-button:

.num-button {
   -fx-background-color: white, rgb(189,218,230), white;
   -fx-background-radius: 50%;
   -fx-background-insets: 0, 1, 2;
   -fx-font-family: "Helvetica";
   -fx-text-fill: black;
   -fx-font-size: 20px;
}

This CSS styling block will be applied to buttons with a style class num-button. You will notice that when using class selectors, the CSS selector name is prefixed with a dot (.), and when adding the selector in Java code, the (.) symbol is not present.

Selector Patterns

Up until now, you’ve seen only simple selectors; however, selectors can have patterns that traverse the Scene graph’s hierarchy of nodes from the root node to the child nodes. A full discussion of selector patterns is beyond the scope of this book, but I briefly mention common selector patterns and introduce pseudo-classes.

/* style all buttons who's parent is an HBox */
.hbox > .button {
   -fx-text-fill: black;
}

/* style all labels and text nodes */
.label, .text {
   -fx-font-size: 20px;
}

Pseudo-Class Selectors

Pseudo-class selectors are used to style nodes that have different states. An example is a Button node’s hover state. A button control has the following states: armed, disabled, focused, hover, pressed, and show-mnemonic. To specify selectors with pseudo-classes you must append a colon and the state (type) to the main selector name. The following code snippet shows two selector patterns for a button that has a class selector num-button:

.num-button {
    -fx-background-color: white, bluish-gray, white;
    -fx-background-radius: 50%;
    -fx-background-insets: 0, 1, 2;
    -fx-font-family: "Helvetica";
    -fx-text-fill: black;
}
.num-button:hover {
    -fx-background-color: black, white, black;
    -fx-text-fill: white;
}

In this CSS code, the first (.num-button) selector merely styles a button in its normal state. However, the second selector with the appended colon and state (hover) will change a subset of properties, altering them slightly. In this scenario, when a mouse cursor moves over (hovers) a button with the style class num-button:hover, the color of the button and the text’s fill color will be reversed. Figure 15-11 shows the pseudo-selector in action when the mouse is hovering over the number pad on button 3.

Figure 15-11. A selector with a pseudo-class of hover is used when the mouse cursor is on top of any number pad button

A Selector Styling Example

To demonstrate selectors using id and class type selectors, I created an application resembling a smartphone’s number pad, as shown in Figure 15-12.

Figure 15-12. An application to mimic a number pad from a smartphone.

In Figure 15-12, notice the 4 × 3 grid of round buttons for a number pad and a green rectangular button beneath it to make a phone call. Listing 15-3 is the main start() method containing the source code. Listing 15-4 then shows the contents of the CSS file mobile_buttons.css.

Listing 15-3. The JavaFX Source Code for the Number Pad Application

@Override
public void start(Stage primaryStage) {
    BorderPane root = new BorderPane();
    Scene scene = new Scene(root, 180, 250);
    scene.getStylesheets()
         .add(getClass().getResource("mobile_buttons.css")
                        .toExternalForm());
    String[] keys = {"1", "2", "3",
                     "4", "5", "6",
                     "7", "8", "9",
                     "*", "0", "#"};
    GridPane numPad = new GridPane();
    numPad.getStyleClass().add("num-pad");
    for (int i=0; i < 12; i++) {
        Button button = new Button(keys[i]);
        button.getStyleClass().add("num-button");
        numPad.add(button, i % 3, (int) Math.ceil(i/3) );
    }
    // Call button
    Button call = new Button("Call");
    call.setId("call-button");
    call.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    numPad.add(call, 0, 4);
    GridPane.setColumnSpan(call, 3);
    GridPane.setHgrow(call, Priority.ALWAYS);
    root.setCenter(numPad);
    primaryStage.setScene(scene);
    primaryStage.show();
}

The code in Listing 15-3 will load the mobile_button.css file that gets applied to the Scene graph. The CSS file’s contents are shown in Listing 15-4.

Listing 15-4. The Contents of the mobile_buttons.css CSS File

.root {
    -fx-background-color: white;
    -fx-font-size: 20px;
    bright-green: rgb(59,223, 86);
    bluish-gray: rgb(189,218,230);
}
.num-pad {
    -fx-padding: 15px, 15px, 15px, 15px;
    -fx-hgap: 10px;
    -fx-vgap: 8px;
}
.num-button {
    -fx-background-color: white, bluish-gray, white;
    -fx-background-radius: 50%;
    -fx-background-insets: 0, 1, 2;
    -fx-font-family: "Helvetica";
    -fx-text-fill: black;
}
.num-button:hover {
    -fx-background-color: black, white, black;
    -fx-text-fill: white;
}
#call-button {
   -fx-background-color: white, bright-green;
   -fx-background-radius: 2;
   -fx-background-insets: 0, 1;
   -fx-font-family: "Helvetica";
   -fx-text-fill: white;
}

#call-button:hover {
   -fx-background-color: bright-green, white;
   -fx-background-radius: 2;
   -fx-background-insets: 0, 1;
   -fx-font-family: "Helvetica";
   -fx-text-fill: bright-green;
}

How It Works

The code starts by creating a scene that has a BorderPane as a root node. After the scene is created, the code loads the CSS style sheet file mobile_buttons.css to style the current scene’s nodes. Next, the code simply creates a grid using the GridPane class and generates 12 buttons to be placed in each cell. Notice in the for loop that each button is set with the style class named num-button via the getStyleClass().add() method.

Last, the green call button will be added to the last row of the grid pane. Because the call button is unique, its id selector is set with call-button, and it is styled using the id selector, which means the selector named inside the CSS file will be prefixed with the # symbol. To see some amazing button styling, head over to the FXExperience.com’s blog entry on styling buttons at the following link:

http://fxexperience.com/2011/12/styling-fx-buttons-with-css

At FXExperience, the blog entry on styling FX buttons is by Jasper Potts (developer experience architect on client java at Oracle).

Styling a Node with a Selector Style Definition Block

A selector style definition block always begins with a selector name prefixed with a . or # symbol. The symbol determines the selector type as mentioned earlier. A selector will start a block with an open curly brace, followed by property or rule definitions. Each JavaFX theme property or rule will be prefixed with -fx- and its appropriate property name. A property name and value are separated by a : symbol, and the pair ends with a semicolon. To finish the styling block, you simply end the block with a closing curly brace. The syntax for a selector style definition block looks like this:

. or #<selector-name> <pattern>{
   -fx-<some-property> : <some-value>;
}

One last thing to mention is the ability to add comments to CSS styling definitions. To add comments, you use an opening slash asterisk /* and a closing asterisk slash */ (the same as adding comments in C/C++ and Java). Shown next is an example of using comments in a selector style block definition:

.num-button {
-fx-background-color: white, rgb(189,218,230), white;
  /* This is a comment.
     -fx-background-radius: 50%;
   */
   -fx-background-insets: 0, 1, 2;
   -fx-font-family: "Helvetica";
   -fx-text-fill: black;
   -fx-font-size: 20px;
}

Styling a Node by Inlining JavaFX CSS Styling Properties

While CSS selector blocks are the recommended way to style your JavaFX nodes, there might be situations where you will want to override styling properties. For example, you may want to enlarge a button and change its text color temporarily as a mouse cursor hovers (OnMouseEntered) over the specified button. When the mouse cursor is not hovering (OnMouseExited) the button’s inline style is removed, which then reverts the styling to the parent class or id selector styling blocks. To override a node’s styling property set from its ancestor (parent) id or class selector, you can invoke the node’s method setStyle().

To implement the prior example just mentioned, the following code snippet implements a button with handler code that responds to OnMouseEntered and OnMouseExited events and toggles the button’s text size and color.

Button button = new Button("Press Me");
button.getStyleClass()
      .add("my-default-style");

button.setOnMouseEntered(actionEvent ->
   button.setStyle("-fx-font-size: 30px; -fx-text-fill: green;"));

button.setOnMouseExited(actionEvent -> button.setStyle(""));

Styling Properties (Rules) Limitations

Because all graph nodes extend from the Node class, derived classes will be able to inherit styling properties from their ancestors. Knowing the inheritance hierarchy of node types is very important because the type of node will help determine the types of styling properties you can control. For instance, a Rectangle class extends from Shape, which extends from Node. Having said this, you will later see that some properties that you assumed would be on a node don’t exist. So how do you know what properties exist? The solution is to refer to the JavaFX CSS Reference Guide. Again, based on the type of node, there are limitations to the styles you are able to set.

Visualization Code

The javafx.scene.layout.Region node is a lightweight JavaFX container that can contain other nodes and be styled by CSS. By extending the Region node, the custom control will contain the logic of the control and also the visualization code. In the initGraphics() method shown in Listing 15-6, the code sets up the Scene graph for the control by creating the nodes that are needed and applying the appropriate CSS styles to them.

Listing 15-6. Setting Up the LED Control Scene Graph

private void initGraphics() {
    // Create the node for the metal socket
    frame = new Region();
    frame.getStyleClass().setAll("frame");
    frame.setOpacity(isFrameVisible() ? 1 : 0);
    // Create the node for the main LED plastic body
    led = new Region();
    led.getStyleClass().setAll("main");
    led.setStyle("-led-color: " + (getLedColor()).toString().replace("0x", "#") + ";");
    // Create the inner shadow effect for the main LED body
    innerShadow = new InnerShadow(BlurType.TWO_PASS_BOX,
                                  Color.rgb(0, 0, 0, 0.65),
                                  8, 0d, 0d, 0d);
    // Create the drop shadow effect for the main LED body (the glow effect)
    glow = new DropShadow(BlurType.TWO_PASS_BOX,
                          getLedColor(),
                          20, 0d, 0d, 0d);
    glow.setInput(innerShadow);
    // Create the node for the highlight effect on the main LED body
    highlight = new Region();
    highlight.getStyleClass().setAll("highlight");
    // Add all nodes to the Scene graph of this control
    getChildren().addAll(frame, led, highlight);
}

So far, the example has created each node that you need for the LED control and applied the appropriate style from the CSS file.

The LED Control CSS File

Each node that is created in the initGraphics() method gets its own CSS style class, which can be found in the led.css file. It looks like this:

/* The main led style class where the -led-color variable is defined */
.led {
    -led-color  : red;
    -frame-color: linear-gradient(from 14% 14% to 84% 84%,
                                  rgba(20, 20, 20, 0.64706) 0%,
                                  rgba(20, 20, 20, 0.64706) 15%,
                                  rgba(41, 41, 41, 0.64706) 26%,
                                  rgba(200, 200, 200, 0.40631) 85%,
                                  rgba(200, 200, 200, 0.3451) 100%);
}
/* The .frame sub-class, which defines the fill for the metal socket */
.led .frame {
    -fx-background-color : -frame-color;
    -fx-background-radius: 1024;
}
/* The .main sub-class, which defines the fill for the LED plastic body when it's off */
.led .main {
    -fx-background-color : linear-gradient(from 15% 15% to 83% 83%,
                                           derive(-led-color, -80%) 0%,
                                           derive(-led-color, -87%) 49%,
                                           derive(-led-color, -80) 100%);
    -fx-background-radius: 1024;
}
/* The .main sub class with pseudo-class :on that defines the fill for the LED plastic
   body when it's on
 */
.led:on .main {
    -fx-background-color: linear-gradient(from 15% 15% to 83% 83%,
                                          derive(-led-color, -23%) 0%,
                                          derive(-led-color, -50%) 49%,
                                          -led-color 100%);
}
/* The .highlight sub-class that defines the fill of the highlight effect */
.led .highlight {
    -fx-background-color : radial-gradient(center 15% 15%, radius 50%,
                                           white 0%,
    -fx-background-radius: 1024;
}

Because in CSS, you can use percentage to define positions in gradients, you don’t have worry about the real size of the control to calculate the start and stop positions of the gradients. That is a huge advantage compared to Java Swing, where you had to calculate all these values every time the size of the control changed. So all these calculations will be done automatically by JavaFX. That reduces the resizing code a lot, as you will see.

Resizing the LED Control

In JavaFX, the size of the layout container determines the size of its children, so you have to ensure that your control is resized by its layout container. That means if you put your LED control in a StackPane (which resizes its children relative to its own size), the LED will be sized the same as the StackPane. Therefore, you must hook up listeners to the widthProperty() and heightProperty() of the control in the registerListeners() method.

private void registerListeners() {
    widthProperty().addListener(observable -> resize());
    heightProperty().addListener(observable -> resize());
    frameVisibleProperty().addListener(observable ->
        frame.setOpacity(isFrameVisible() ? 1 : 0));
    onProperty().addListener(observable -> led.setEffect(isOn() ? glow : innerShadow));
    ledColorProperty().addListener(observable -> {
        led.setStyle("-led-color: " + (getLedColor()).toString().replace("0x", "#") + ";");
        resize();
    });
}

This method hooks up listeners to all properties that might have an effect on either visualization or size of the LED control. When the listeners for the width and height are triggered, they will call the resize() method, and that will take care of sizing all nodes in the control.

    private void resize() {
        size = getWidth() < getHeight() ? getWidth() : getHeight();
        if (size > 0) {
            if (getWidth() > getHeight()) {
                setTranslateX(0.5 * (getWidth() - size));
            } else if (getHeight() > getWidth()) {
                setTranslateY(0.5 * (getHeight() - size));
            }

            innerShadow.setRadius(0.07 * size);
            glow.setRadius(0.36 * size);
            glow.setColor(getLedColor());

            frame.setPrefSize(size, size);

            led.setPrefSize(0.72 * size, 0.72 * size);
            led.relocate(0.14 * size, 0.14 * size);
            led.setEffect(isOn() ? glow : innerShadow);

            highlight.setPrefSize(0.58 * size, 0.58 * size);
            highlight.relocate(0.21 * size, 0.21 * size);
        }
    }
}

As you can see, in the resize() method, the only thing you have to do for each node is calculate its size and relocate the node. So first you calculate the minimum dimension of the LED (because it’s square, you take the width if it’s less than the height or vice versa). In addition, you must make sure that the resizing will be done only if the current size is larger than 0.

How It Works

Now that you have all things in place, you can simply use the control like any other control, as shown here:

@Override public void start(Stage stage) {
    Led control = new Led();
    StackPane pane = new StackPane();
    pane.getChildren().add(control);
    Scene scene = new Scene(pane);
    stage.setTitle("JavaFX Led Control");
    stage.setScene(scene);
    stage.show();
    control.setBlinking(true);
}

Figure 15-17 shows the result.

Figure 15-17. The region-based custom LED control