How-To's > How do I create custom skins?

You can customize the look of your application in the following ways:

• You can use CSS to define the theme of the UI controls. CSS style sheets are linked by using the stylesheets variable in the javafx.scene.Scene class. See the topic How do I use CSS to style my UI?
• You can import JPG, GIF, or PNG graphics to use as skins.

Applying Cascading Style Sheets

JavaFX CSS supports a unique and powerful feature - the ability to specify properties on the root or a branch of the scene and then to apply those properties to nodes deeper in the tree. For example, there is a set of properties applied to the entire scene. By specifying a new rule in the CSS file that applies to the scene style class, you can alter the look of all the controls within your application in a uniform manner.

Consider an application that uses UI controls of different types. When no styles are applied, the application looks like the following.

You can apply CSS style to set a skin for the user interface of this application. Create a CSS files called controlStyle.css and add the following code to it. Save the .css in the same package as the main class of your application.

.scene{
    -fx-font: 14pt "Comic Sans MS Bold";
    -fx-color: #e79423;
    -fx-background: #67644e
}

 

After that, you need to make the JavaFX application aware of the newly added custom style sheet. To do so, initialize the stylesheets variable of the Scene class to point to your custom style sheets.

stylesheets: "{__DIR__}controlStyle.css";

When you application is complied and run, the following window is shown.

See also Using JavaFX UI Controls for more information about applying CSS styles.

Refer to the samples that use CSS styles:

• Sudoku
• Style Editor

Using Custom Skins

The set of built-in UI controls inherits the skin variable from the class javafx.scene.control.Control. The skin variable defines a scene graph of nodes to represent the skin.

You can use any prefabricated graphics of JPG, GIF, or PNG formats or JavaFX graphics exported from Production Suite for built-in skins using syntax such as the following:

Button { 
    skin: FXDSkin { url: "{__DIR__}myskin.fxz" }
}

Using custom skins is particularly helpful when you need to create virtual devices such as media players with exchangeable skins. You can most efficiently design the scene by using tools like Adobe Illustrator or Photoshop, then export to JavaFX format by using JavaFX Production Suite. For an example of a media player with exchangeable skins, see the following link.

• Media Player
  This example shows how to make changes to the graphic objects while minimizing the impact on the application code.

API Documentation

• Control
• Skin
• stylesheets in the javafx.scene.Scene class

Related How-To Topics

• How do I load and manipulate Production Suite graphics?
  This topic contains information about how to load and display Production Suite graphics.

Last Updated: May 2010
[Return to How-To's Home]

---