FX

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

See the topic below that best fits the answer to your question:

• Custom Skins for Built-In UI Controls
• Skins for Custom UI Controls
• Skins for Applications

Custom Skins for Built-In UI Controls

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.

The JavaFX Script 1.2 programming language has limited support for the skin variable. The classes and variables associated with the Caspian default style, which can be overridden to specify the custom skin, have not been made public yet. Limited support is provided for defining buttons that use CSS stylesheets.

Although they are not fully implemented, you can use JavaFX graphics exported from Production Suite for built-in button skins using syntax such as the following:

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

The Sun Microsystems engineering lead for JavaFX Production Suite made the following comment about using this code: "The FXZ file contained graphics for all states supported by the skin (disabled, enabled, armed, and hover in our case). It worked reasonably well, although I believe we need to add more support to allow tweaking the state transitions (we used simple crossfade)."

The following documents provide more information about skins for built-in UI controls:

• Skinning Architecture in JavaFX
  This blog contains an excellent overview of the architecture of custom skins for built-in controls and the current capabilities in the JavaFX Script 1.2 programming language.
• JavaFX Skinnable Controls
  This blog shows how to customize some common features that change theme or the skin. However, it imports API classes in the javafx.scene.control.caspian package that have not been made public yet. Use this example at your own risk.
• Creating Custom Caspian Controls
  This blog contains more information about the default Caspian theme in the API.

Skins for Custom UI Controls

If you require more versatility with skins, you should consider building your own UI controls.

You can create skins for custom UI controls in the following ways:

• You can create shapes with color, text, and effects programmatically with the JavaFX Script programming language.
• You can use CSS to define the theme of the UI controls. CSS stylesheets are linked by using the stylesheets variable in the javafx.scene.Scene class.
• You can import JPG, GIF, or PNG graphics to use as skins and button states.
• You can design skins and button states in a tool such as Adobe Photoshop, Adobe Illustrator, or an SVG authoring tool, and export them to JavaFX format by using Production Suite. See the topic How do I load and manipulate Production Suite graphics?

The following links provide more information about skins for custom UI controls.

• JavaFX MediaBox Player For Streaming Video
  This sample contains many custom skins for the UI controls for the media box. The MediaSliderSkin.fx source file contains an example of a UI control with a custom skin that incorporates graphics.
• Sudoku with CSS
  All of the UI components in this sample, including the buttons, are formatted with CSS. One button enables the user to toggle between two different color themes. In this sample, the buttons are created by extending the customNode class, not by using the built-in UI controls.
• Side Menu
  This sample is included in JavaFX Production Suite installations in the /Samples folder. It demonstrates a sidebar menu developed in Adobe Illustrator, exported to JavaFX format, and imported into the application.

Skins for Applications

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 sample is included in JavaFX Production Suite installation in the /Samples folder. It demonstrates a media player designed in Adobe Illustrator with two custom skins, then exported with JavaFX Production Suite and imported into the application. You can change a skin to an other skin, even with buttons in different locations, by changing one line of code in the application.

API Documentation

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

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

---

Do you have comments about this article? We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.