By Rakesh Menon on Jun 10, 2009
|JavaFX 1.3 introduces many new controls with CSS support. Please refer to UI Controls documentation, Style-Editor sample and Dean Iverson's Blog for quick start. Also refer to article Applying CSS to UI Controls.|
<script src="http://dl.javafx.com/1.2/dtfx.js"></script><script src="/rakeshmenonp/resource/ControlSkin/ControlSkin.js"></script>
For Applet mode, click on above image
The article on Node-Based Controls demonstrates its usage. So let me focus on how to update the skin of these controls.
skin attribute of Control class allows you to associate a Skin. The
Skin is responsible for implementing the user interface using on scene-graph nodes and defining the behavior of the control. The Behavior has the logic for handling key and mouse events.
JavaFX already has a default skin implementation - Caspian. Its in
com.sun.javafx.scene.control.caspian package. For each control, there is corresponding skin implementation. We can change few attributes of these skin implementations and customize the look of controls.
Example: To update skin of Button, we can customize the attributes of ButtonSkin implementation.
Similarly a TextBox can be customized as shown below:
Please note, all those attributes are instance of Paint, so we can assign instance of Color, LinearGradient or RadialGradient.
More attributes and implementation is available in the source.
Try it out and let me know feedback!