FX

This sample demonstrates how to use CSS to reskin controls to create a new look for different sizes of view screens, branding, or just plain fun. To get started, you can select from a couple pre-built stylesheets or work with a custom one. Several controls are shown next to the CSS. You can change the individual CSS properties and see the changes in the application.

Understanding the Code

The key to re-skinning an entire application is using a custom stylesheet in your scene. A stylesheets property enables you to specify a sequence of CSS file URLs. These files are combined and cascade with the last file taking priority over the first, like CSS in your web browser.

Stage{
    scene: Scene{ 
        stylesheets: [ "{__DIR__}stylesheet/custom.css" ] 
    }
}

Code 1: Using a custom stylesheet

By changing the stylesheets and knowing which properties to adjust, you can change the look of a button, scrollbar, toolbar, or any other control. Behind the scenes a special stylesheet is applied to all scenes in JavaFX. The file is named caspian.css and is different for desktop, mobile, or TV. Your custom stylesheet will cascade and override values in this default stylesheet.

This sample uses a ChoiceBox to select different stylesheets. The selectedIndex is bound so that when it changes the editing area on the left loads the stylesheet source and the Scene.stylesheets variable for the sample is updated. The prebuilt stylesheets are included in the sample jar.

var stylesheetChoice:ChoiceBox = ChoiceBox{
    items: STYLESHEET_NAME
    layoutInfo: LayoutInfo{ hgrow: Priority.ALWAYS, hshrink: Priority.ALWAYS, hpos: HPos.RIGHT }
};
def selectedStylesheetIndex = bind stylesheetChoice.selectedIndex on replace{
    editArea.loadContent(STYLESHEET_FILE[selectedStylesheetIndex]);
    scene.stylesheets = ["{STYLESHEET_PATH[selectedStylesheetIndex]}"]
}


function run( args:String[] ){
    Stylesheet.createTempFile();
    Stage{
        title: "StyleEditor"
        scene: scene = Scene{
            stylesheets: ["{STYLESHEET_PATH[selectedStylesheetIndex]}"]
	....
}

Code 2: Bound loading and selection of stylesheet

You can also edit the stylesheet in the edit area. When you save a file it is stored in your platform's temporary file space and the Scene.stylesheets variable is changed to use it.

The view area on the right contains various visual components. There are also a handful of preview components which can be selected. The preview components are not finalized and are in various stages of completion.