Access Keys:
Skip to content (Access Key - 0)
CSS API to support custom UI Controls
Attachments: • Added by 22398, last edited by Brian Beck on Feb 21, 2013  (view change)
Labels
  • None

Overview

CSS is an integral part of JavaFX. By using the classes in this package in the manner prescribed in this document, CSS styling can be added to any Node. Making a property styleable or adding pseudo-class state in JavaFX requires some coding, but is fairly straight-forward.

Use Case

Say a contributor wished to develop a Watermark control which could overlay a region with copyright information. The Watermark API has a DoubleProperty that controls then angle at which the copyright text is displayed. The contributor wishes to make this copyrightAngle styleable through CSS. The contributor also wants to be able to modify some visual aspect of the Watermark once the copyright has been viewed; perhaps making the Watermark more transparent. The contributor wants to use a 'viewed' pseudo-class state to achieve this.

Making copyrightAngle styleable

First, the copyrightAngle is made styleable by having it extend one of the StyleableProperty classes; in this case, StyleableDoubleProperty. The code shown here follows the typical pattern. Notice that the only difference between a DoubleProperty and the StyleableDoubleProperty is the addition of the getCssMetaData method which links the copyrightAngle property to its corresponding CssMetaData instance.

The CssMetaData instance provides information about the CSS style and some methods that allow CSS to set the property's value. The convention is to instantiate the CssMetaData as a singleton (note that this example code is not thread safe, but is sufficient). Here, the CSS property name is "-my-copyright-angle" and the initial value of 45 degrees with the default value of the copyrightAngle property.

In order for the CSS engine to know about the styleable properties of Watermark, the methods getClassCssMetaData() and getCssMetaData() need to be implemented. The first is a static method that returns the CssMetaData of the Watermark class and of its super class; in Watermark's case, the super class is Control. The second method returns the same value but is implemented as an instance method so that it is not necessary to use reflection to call getClassCssMetaData(). These methods are called quite frequently; for efficiency, the List<CssMetaData> is only created once. The following code shows a typical implementation.

At this point, the copyrightAngle can be styled through CSS. For example, to display the copyright from lower left to upper right:

Making 'viewed' a pseudo-class

The 'viewed' pseudo-class will be implemented as a BooleanProperty. Although BooleanProperty is most commonly used for pseudo-class state, any property type can be a pseudo-class, even a Styleable*Property. When the 'viewed' property changes value, the code needs to notify CSS that the state has changed. The place to do this is in the invalidated() method of the property which calls the pseudoClassStateChanged method, passing it the PseudoClass of the pseudo-class that changed state and whether or not the pseudo-class is "active". Again, this code follows the typical pattern of implementing a property. Note that a "simple" property could be used here, but the invalidated method would still need to be overridden. Since the anonymous class will be created anyway, the few bytes needed for the bean and name will be saved by using BooleanPropertyBase instead of SimpleBooleanProperty.

The call to pseudoClassStateChanged() will cause CSS styles to be updated if the pseudo-class is used by selectors that match this Node.

With this framework in place, the following style can be used to make the watermark more transparent if it has been viewed.

Design Goals

  • The primary goal is to create an API that allows CSS styling to be applied to a JavaFX property and to support the use of pseudo-class state in the open-software environment.
  • The API should support the following javafx.beans.property types: BooleanProperty, FloatProperty, DoubleProperty, IntegerProperty, LongProperty, and StringProperty. Support for ObjectProperty is desired but would, possibly, require additional hooks into the parser or public API to convert a parsed value to the parameterized type which may not be feasible at this time. However, the ability to style an ObjectProperty with a parameterized type such as Insets or Paint is essential. Likewise, ObjectProperty<MyEnumType> presents challenges, particularly in parsing and converting, that make support for this type of property impracticable at this time.
  • A secondary goal is to make the API such that an IDEs whould be able to automatically generate much of the necessary code. It is not a goal, however, to create the IDE boilerplate.
  • While it is possible to have classes other than instances of Node be styleable through CSS, this support requires an additional interface which exists in private implementation. Including this interface in the public API is not a goal.
  • The current implementation of CSS in JavaFX is only a small portion of the W3C standards and is only partially compliant with those standards. It is beyond the scope of this API implementation to rectify differences between the W3C standards and the current JavaFX implementation.

Architecture

There are two main pieces to the styleable property architecture. First is a CssMetaData whose value can be represented syntactically in a .css file. A CssMetaData encapsulates the CSS property name, the type into which the string value is converted, and the default value of the property. Second is the JavaFX property to which the parsed CssMetaData value applies. Any JavaFX property that supports this styling is a StyleableProperty. A StyleableProperty also incorporates additional logic to ensure that values set by the user through calls to set methods are not overridden by styles in a user agent stylesheet.

There is a one-to-one correspondence between a CssMetaData and a StyleableProperty. A CssMetaData is scoped to a class whereas a StyleableProperty is an attribute of a class instance. Typically, a node will assume the CssMetaData of its ancestors. During CSS processing, the CSS engine iterates over a List<CssMetaData> (particular to the node) and looks up the parsed value of each CssMetaData in turn. If the CssMetaData has a parsed value, the parsed value is converted to the type of the StyleableProperty and the StyleableProperty is set.

Making a property styleable, then, consist of:

  1. defining the javafx.beans.property as a StyleableProperty
  2. creating a corresponding CssMetaData
  3. ensuring the CssMetaData is returned in the List<CssMetaData>

Pseudo-class state support consists of notifying CSS of a pseudo-class state change via the invalidated() method of a property.

API

StyleableProperty

StyleableProperty is an interface that is implemented by various classes that extend from javafx.beans.property properties; for example,

.

StyleableProperty.java

The getCssMetaData method is useful for getting from a StyleableProperty to the corresponding CssMetaData, which is useful for tooling and unit testing. For example, one can get the CssMetaData of the fillProperty of a Rectangle:

There is an implementing classes for each of the javafx.beans.property.*PropertyBase types and for each of the javafx.beans.property.Simple*Property types. The developer should choose the simple variety unless there is some method that needs to be overridden (but even then, it is a matter of choice).

public class StyleableBooleanProperty extends BooleanPropertyBase implements StyleableProperty<Boolean>
public class StyleableFloatProperty extends FloatPropertyBase implements StyleableProperty<Float>
public class StyleableDoubleProperty extends DoublePropertyBase implements StyleableProperty<Double>
public class StyleableIntegerProperty extends IntegerPropertyBase implements StyleableProperty<Integer>
public class StyleableLongProperty extends LongPropertyBase implements StyleableProperty<Long>
public class StyleableStringProperty extends StringPropertyBase implements StyleableProperty<String>
public class StyleableObjectProperty<T> extends ObjectPropertyBase<T> implements StyleableProperty<T>

Each of the classes have a constructor taking a CssMetaData arg and another taking a CssMetaData arg and an initial value. For example, StyleableBooleanProperty has the following constructors:

public class SimpleStyleableBooleanProperty extends SimpleBooleanProperty implements StyleableProperty<Boolean>
public class SimpleStyleableFloatProperty extends SimpleFloatProperty implements StyleableProperty<Float>
public class SimpleStyleableDoubleProperty extends SimpleDoubleProperty implements StyleableProperty<Double>
public class SimpleStyleableIntegerProperty extends SimpleIntegerProperty implements StyleableProperty<Integer>
public class SimpleStyleableLongProperty extends SimpleLongProperty implements StyleableProperty<Long>
public class SimpleStyleableStringProperty extends SimpleStringProperty implements StyleableProperty<String>
public class SimpleStyleableObjectProperty<T> extends SimpleObjectProperty<T> implements StyleableProperty<T>

Each of these simple classes have a constructor taking an Object which is the property bean and a String which is the property name in combination with a CssMetaData arg and another taking a CssMetaData arg and an initial value. For example, SimpleStyleableBooleanProperty has the following constructors:

Issues:
In the future, StyleableProperty may need to incorporate support for attribute selectors and animations.

CssMetaData

CssMetaData encapsulates the data needed to lookup a value and apply that value to a StyleableProperty. This includes the CSS property name, the default property value, and a link back to the corresponding StyleableProperty. The class is abstract and it is necessary to implement two methods which are invoked from the CSS engine:

The implementation of these methods is fairly consistent throughout the code. Notice the need to cast the return value of getStyleableProperty since cornerProperty() returns a StringProperty.

Note that isSettable should be implemented in a way that does not cause the expansion of the property. The isSettable check is performed before the CSS value is looked up. If the property is not settable, then no further CSS processing is done for that property (on any given pulse). The getStyleableProperty method is invoked only if there is a CSS value to apply. Thus, if the property is not settable or there is no CSS value, the property is not expanded[#1].

The CSS engine does not call setValue directly on the StyleableProperty. Rather, the code calls a set method on the CssMetaData which, in turn, calls applyStyle on the StyleableProperty. This level of indirection allows a CssMetaData to intercept the value before the calculated style value is applied (in other words, before setValue is called on the corresponding property). This is used primarily for Number based properties where the parameterized type is Number but the actual type might be Integer and so the value's intValue() method needs to be invoked.

The parameterization of CssMetaData is that it requires a Node since Node is the visible element of the scene graph. The V parameter is the type of the property's value, for example Boolean.

StyleConverter

A StyleConverter takes a value from the parser (a ParsedValue) and converts it to the corresponding java type. So, for example, a ColorConverter would convert a ParsedValue representing a Color into a Color. If possible, the parser performs the conversion. But this is not always possible such as when converting an em size to an absolute pixel value.

StyleConverter and ParsedValue are tightly coupled and there are a number of StyleConverter implementations. The StyleConverter class contains static methods that return instances of these implementations.

ParsedValue

This class must exist in the public API for use in the StyleConverter API. The parser creates ParsedValue instances.

StyleOrigin

Additional Node API.

List<CssMetaData> getCssMetaData()
static List<CssMetaData> getClassCssMetaData()

These methods return a List of CssMetaData supported by the node. The list should include not only the properties of this node, but the properties of the node's super-class(es) as well. This method is called frequently and, by convention, it returns a static list. Since this static list may be used by other node classes, the convention is to provide a public static method that returns the static list: public static List<CssMetaData> getClassCssMetaData(). The getCssMetaData() method is used by the CSS engine to avoid reflection. A typical implementation would be:

Pseudo-class

The pattern for handling pseudo-class state is to override the invalidated method of the property in order to invoke pseudoClassStateChanged which sets or removes a PseudoClass from a Set<PseudoClass>. The addition or removal of a PseudoClass from this Set may cause CSS to apply new styles to the node, depending on whether or not the pseudo-class is used in a matching selector.

The node's current pseudo-class state can be gotten by calling getPseudoClassStates(), which returns an unmodifiable Set<PseudoClass>.

PseudoClass

PseudoClass is an immutable object that represents one pseudo-class state. A pseudo-class state is unique according to the string value of the pseudo-class that might appear in a CSS file. In other words, there is only one PseudoClass for "hover", even if the "hover" pseudo-class is found in more than one class. Care must be exercised when choosing names for pseudo-classes so they do not conflict with other pseudo-classes.

Typical usage is:

Node#pseudoClassStateChanged(PseudoClass, boolean)

Node#getPseudoClassStates()

Oh, snap!

In some cases, pseudo-class state may need to be initialized. For example, a ScrollBar can be horizontal or vertical. The default orientation of a ScrollBar is Orientation.HORIZONTAL and it is necessary to initialize the pseudo-class state to ensure the correct styles are selected. This is done simply by calling the pseudoClassStateChanged method from the ScrollBar constructor:

Calling pseudoClassStateChanged(HORIZONTAL_PSEUDOCLASS_STATE, true) does not set the VERTICAL_PSEUDOCLASS_STATE to false. In the orientation property's invalidated method, pseudoClassStateChanged is called for each orientation state:

Node#getPseudoClassStates returns an unmodifiable list which can be useful for seeing what pseudo-class states are active. For example,

gives the output

The pseudoClassStates are the active states and the trigger states are the states that might, in some combination, cause CSS to be updated.


Footnotes

  1. Further explanation of property expansion. Consider something like opacityProperty which starts out null. If nothing ever touches it, it stays null. CSS wants to know if opacity can be set before it goes off looking for styles. If it can't be set, then it is skipped. If it can, and no styles for it are found, then opacityProperty should still be null, otherwise every time CSS touches a property it would be expanded - not a good thing. So the isSettable check basically says, the property is settable if it is null or isn't bound. The only time the property is expanded is if there is actually a style for it.