The Java FX Journey

Purpose: To show how to style nodes with CSS.

End Result:

Code Download

A big feature of JavaFX is the high integration with major Web technologies. One such web technology is CSS – which is often used to stylize the look and feel of a website. With JavaFX, you can actually use CSS files to style nodes within your application. This allows you to create a generic applet which can be distributed to multiple web sites – with each site having a unique look and feel that matches the hosting environment.

The good news is that it is incredibly easy to use style sheets with your JavaFX application. The following is a bare bones tutorial that shows you the basics of implementing CSS in your applications.

In order to use CSS within your application, you need to learn about a couple new classes. They are the Control and Skin classes. A Control object is a child of the CustomNode class – so it is essentially just a Node. It is meant to define the behavior of that node.

A Control object will then have a Skin attached to it. The Skin defines the look of that Control object. To explain, I have made an extremely simple Control class below:

public class MyControl extends Control
{
    init { skin = MySkin {} };
}

On the initialization of a ‘MyControl’ object, the class will set the skin attribute (which is inherited from the parent) to a MySkin object. This specific ‘MyControl’ object has no behavior (simply for the sake of keeping this example simple). The Skin for this can be defined as:

public class MySkin extends Skin
{
    public var nodeWidth:Number = 50;
    public var nodeHeight:Number = 50;
    public var nodeColor:Color = Color.RED;

    init
    {
        scene = Rectangle {
                      x: 10,
                      y: 10
                      width: bind nodeWidth,
                      height: bind nodeHeight
                      fill: bind nodeColor
        }
    }
}

The ‘MySkin’ class inherits a Scene attribute from the Skin superclass. We set that scene attribute to be a node (or set of them…) that defines a certain look. At this point, if I were to add a MyControl object to a Scene, it would look like a standard 50 pixel x 50 pixel red rectangle. However, the point of this is to get CSS to style the Node.

Well, CSS doesn’t actually style the ‘node’…it can style the Skin attached to a Control object. In the previous class we had three attributes: nodeWidth, nodeHeight and nodeColor. Those values are bound to there respective attributes on the Rectangle object. Those attributes can be changed in the Cascading Style Sheet that we specify. Let me state that again: public variables can be overridden in a cascading style sheet to change the look and feel of a Skin.

In order to stylize the Skin, we need a CSS file. The file I used is the following:

"MyControl"
{
  nodeColor: cyan;
}

"MyControl"#id1
{
  nodeColor: red;
  nodeWidth: 100;
}

"MyControl"#id2
{
  nodeColor: blue;
  nodeWidth: 150;
  nodeHeight: 20;
}

I specify three different control objects here. The first “MyControl” object sets the default nodeColor for ALL MyControl objects to cyan.

The second value (“MyControl”#id1) sets the color and width for any “MyControl” object whose id value is ‘id1′. Similarly, the last value in the CSS file sets the color, width and height for any “MyControl” object whose id value is ‘id2′. If a value is not specified in a CSS file, it uses the default value specified in the skin.

Lastly, the Stage (in your Main.fx file probably) is what ties all these elements together.

Stage {
  title: "Application title"
  width: 200
  height: 200
  scene: Scene {
    content: [MyControl {},
        MyControl {id: "id1", translateY: 60},
        MyControl {id: "id2", translateY: 120}]
      stylesheets: ["http://piliq.com/javafx/tutorials/css/style.css"];
  }
}

This scene has three ‘MyControl’ objects…a generic one, and then two with the id’s specified in the Style Sheet. The other thing to note is that you also have to specify the ’stylesheets’ attribute in the Scene. You can have several style sheets if you would like. One issue I had was that the stylesheet had to be accessible via an http:// type address. Simply using a file:// address resulted in a null pointer. Once you do this, the style sheet will override the base attributes you defined in your skin.

I stated in the beginning part of this tutorial that you could have a single applet deployed to multiple websites and inherit their look and feel. However, this example does not accomplish this…it always goes to http://piliq.com/… for the style sheet. You could change the stylesheet to say:

stylesheets: [ "{__Dir__}/style.css", "http://piliq.com/javafx/tutorials/css/style.css"]';

This would look in the current directory for a style sheet names ’style.css’ and if it did not find it, would use the second value.

Conclusion
Styling nodes within your application can provide a new level of portability for your JavaFX applications. You can style them for the web host, the runtime environment (mobile, application, applet, etc…) or for another multitude of reasons. This tutorial hopefully provided you with the down and dirty basics to styling your applications. Good luck!!!