Thursday, April 22, 2010

A Brief Introduction to Styling Controls in JavaFX 1.3

Support for styling the core controls using CSS has been greatly enhanced for JavaFX 1.3. In fact, the default skin for the core controls, called Caspian, is now written as a style sheet rather than in JavaFX Script code. Below is an example of a small JavaFX 1.3 style sheet that I wrote for Jim Weaver's 3D Calendar application:

.scene {
   /* default font for all content, inherited by all nodes */
   -fx-font: 16pt "Amble Cn";

   /* main color palette */
   -fx-base: #AEBBD2;
   -fx-accent: #385589;
   -fx-mark-color: #3E857C;
}

.text-box {
   -fx-effect: innershadow( two-pass-box, rgba(0,0,0,0.2), 10, 0.0, 0, 2 );
   -fx-text-fill: #385589
}

#title.text-box {
   -fx-font-size: 125%;
}

.button:strong {
   -fx-text-fill: #D3DAE9;
}

If you have used JavaFX's CSS support in previous versions, you will notice some changes in how style sheets are now written.

  • Where you used to write Scene, TextBox, and Button, you should now write .scene, .text-box, and .button. These are CSS class selectors, which kind of makes sense since you are selecting JavaFX control classes.
  • All JavaFX style attributes now start with the -fx extension in order to avoid conflicts with standard CSS attributes. For example, you should now write -fx-font rather than just font.
  • This style sheet also contains an example of one of the new features in JavaFX 1.3's style sheet support: the ability to an inner shadow effect. You can also specify a drop shadow using a similar syntax

Here is a table of some more new and fun attributes that can be set from style sheets.

Attribute Example Value(s) Works On Notes
-fx-cursor crosshair | default | hand | move | text | wait Nodes
-fx-opacity 0 .. 1.0 Nodes
-fx-rotate 0 .. 360 Nodes Defaults to 0. Not taken into account in layoutBounds
-fx-scale-x Number Nodes Defaults to 1. Not taken into account in layoutBounds
-fx-scale-y Number Nodes Defaults to 1. Not taken into account in layoutBounds
-fx-scale-z Number Nodes Defaults to 1. Not taken into account in layoutBounds
-fx-translate-x Number Nodes Defaults to 0. Not taken into account in layoutBounds
-fx-translate-y Number Nodes Defaults to 0. Not taken into account in layoutBounds
-fx-translate-z Number Nodes Defaults to 0. Not taken into account in layoutBounds
-fx-focus-color white | #FFEEDD | #FFF Controls Color of the focus outline
-fx-control-inner-background white | #FFEEDD | #FFF TextBox, PasswordBox, ListView
-fx-mark-color blue | #0000FF | #00F CheckBox, RadioButton, ScrollBar
-fx-echo-char "\u263A"; PasswordBox Make your password boxes friendly!

This is just a sample of some of the power of the new CSS support. I haven't even touched on linear and radial gradients, deriving colors using derive( pink, -20% ), the ladder function, or alternative ways of specifying colors: rgb(), rgba(), hsb(), and hsba(). So much left to cover!

9 comments:

  1. Dear Dean.
    Thanx a lot cause you are the only person who describe this question about new features of CSS in JavaFx 1.3

    My question is where I can find all javafx-css-proprties for each component and also I'd like to know more about pseudoclasses.
    Once again thanx a lot.

    ReplyDelete
  2. there is a file called caspian.css inside the javafx jars. Now I dont remember where exactly it is. I've searched it at Netbeans open type functionality by searching Caspian class. It is at the same package.

    ReplyDelete
  3. The caspian.css file is in /com/sun/javafx/scene/control/skin/caspian. Just unpack the jar file and take a look. Every core control is styled with this stylesheet so there are lots of examples of the available attributes. I'm sure Oracle will be releasing documentation soon, but in the mean time this is a great place to start.

    Dean

    ReplyDelete
  4. This is another good resource for exploring the styling capabilities:

    http://www.javafx.com/samples/StyleEditor/index.html

    ReplyDelete
  5. Great. Thank you to everyone.

    ReplyDelete
  6. What is the standard CSS that is supported by JavaFX 1.3 ? Web designers have been using CSS for web page design may accustom to using modern CSS, and they will likely to apply those experience for JavaFX code as well.

    It will be helpful to list the standard CSS that supported by JavaFX.

    ReplyDelete
  7. Is there a utility function for processing the CSS data?

    For JFXtras we would like to mimick Caspian on our components, so we need a way to get to a border or color or font that is defined on another component.

    ReplyDelete
  8. @GeekyCoder: I haven't played with the "standard" CSS attributes to see how they interact with the new -fx attributes. If you're used to CSS, it's pretty easy to pick up the JavaFX extended attributes.

    @Tom: Yes, I'm well aware of the issue. I still have to convert XEtchedButton and XPane. Don't worry, it is possible and I plan to post another article tonight explaining how to do this and much more with the new stlying support.

    ReplyDelete
  9. Use the JD-GUI decompiler to inspect lib/desktop/javafx-ui-common.jar and search for impl_cssSet. It describes the css properties involved.

    for instance,

    Rectangle > Shape > Node

    ReplyDelete

Please Note: All comments are moderated. That's why you won't see your comment appear right away. If it's not some stupid piece of spam, it will appear soon.

Note: Only a member of this blog may post a comment.