JavaFX CSS format
This article explains how to use the JavaFX CSS format in the context of the J661 Server. See also JavaFX Look and Feel and the associated JavaFX CSS reference in the JavaFX API documentation.
Base JavaFX building blocks
Every graphical element which compose an ARINC 661 widget
(including the widget itself) are JavaFX "Nodes". For example, an
will be implemented by a
All the Nodes which compose an ARINC 661 Layer
will be implemnted as a Node tree which wil correspond to the ARINC 661 widget tree
J661 JavaFX implementation uses the JavaFX platform CSS format
, which is derived from the CSS 2.1 Web standard
The base of the CSS specification is to define style properties values for Style Classes
in a ".css" file. The definition of the Look for all the JavaFX "Nodes" is specified in such a CSS file for all the ARINC 661 JavaFX Server (which means all the Layers). In J661 the StyleClass of the Node corresponding to a widget and all its children will be automatically defined with the association of:
- The Widget type (for example:
- The Widget StyleSet (for example:
1 for a StyleSet value of 1)
For example the Style Class for the
widget will be
if the StyleSet of the PushButton has the value 1.
−fx−padding: 3 6 6 6;
−fx−background−color: linear−gradient(#00a2b1, #005058);
Mapping from ARINC 661 StyleSets to CSS Style Classes
As explained above, ARINC 661 StyleSets are modeled as CSS StyleClasses.
The algorithm used by J661 is that for all widgets:
- The JavaFX Node corresponding to the widget will have the StyleClass associated with the StyleSet specified for the widget
- The JavaFX Nodes corresponding to all the widget Node children (recursively and stopping when we find another widgets) will have this same StyleClass associated with the same StyleSet
For example for a PushButton:
The algorithm to set the same parent StyleClass to the children Nodes stops when finding another widget in the hierachy. For example, in the following example, the
Node has the same StyleClass as the parent
, but the StyleClass of the
is not applied to the
Controlling the CSS Style Classes mapping
In some cases, you would want to control which child Node will share the StyleClass of its parent widget. For example, you may want the color of the
widget legend to be different from the color of the numeric value, but if you simply define the −fx−text−fill
property in the CSS like that:
Both the legend and the numeric value (which are implemented by different
children Nodes) will share the same color:
To avoid this and control the mapping of the parent widget Style Classes for their children components, you can specify a JavaFX Component structure configuration
XML File to control how the JavaFX widgets StyleSets are applied on the widgets child Nodes.
Pseudo−classes allow to define properties which depend on the interaction state of the Node (for example if the Node is selected). For example:
It is possible to specify in the CSS file that the property for a Node must have the value of its parent Node. For example:
Specifies that the text color of the Node with the "legendInherit" StyleClass will be identical to the text color of its parent Node.
It is possible to define constants for colors in the ".root" default StyleClass, and reuse the associated color names in any color property. For Example:
These constants can be used whenever the associated colors are needed. For example:
CSS properties types
See JavaFX CSS properties types
Importing CSS files
It is possible to import a CSS file into another. For example:
Fonts used in the CSS configuration are defined by their font family. Therefore if you want to use a font which is not installed on the platform in the CSS configuation file, you will have to define it in the Graphics configuration to perform the binding.
See resolving fonts used in the Look and Feel
to know how to perform this binding.
- JavaFX Look and Feel: The JavaFX Look and Feel is configurable through a CSS configuration file, and is only available when using the JavaFX UI framework
- JavaFX CSS properties types: This article explains a few useful CSS proerties type for the JavaFX CSS configuration
- JavaFX Component structure: The JavaFX Component structure configuration allow to control how the JavaFX widgets StyleSets are applied on the widgets child Nodes