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 A661_GP_RECTANGLE will be implemented by a Rectangle Node.

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.

Style Class

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: A661_LABEL
• The Widget StyleSet (for example: 1 for a StyleSet value of 1)

For example the Style Class for the Button implementing the A661_PUSH_BUTTON widget will be A661_PUSH_BUTTON_Style1 if the StyleSet of the PushButton has the value 1.

For example:

      .A661_PUSH_BUTTON_Style1 {
      -fx-text-fill: black;
      -fx-font-weight: bold;
      -fx-padding: 3 6 6 6;
      -fx-background-radius: 10;
      -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 Text Node has the same StyleClass as the parent Button, but the StyleClass of the Pane is not applied to the Button.

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 A661_EDIT_BOX_NUMERIC 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:

      A661_EDIT_BOX_NUMERIC_Style1 {
      -fx-text-fill: yellow;
      -fx-background-color: null;
      }

Both the legend and the numeric value (which are implemented by different Text 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-class

Pseudo-classes allow to define properties which depend on the interaction state of the Node (for example if the Node is selected). For example:

      .A661_PUSH_BUTTON_Style1 {
      -fx-text-fill: blue;
      -fx-font-weight: regular;
      -fx-border-color: white;
      }
      .A661_PUSH_BUTTON_Style1:hover {
      -fx-text-fill: red;
      -fx-font-weight: bold;
      }

Inheriting properties

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:

      .legendInherit {
      -fx-text-fill: inherit;
      }

Specifies that the text color of the Node with the "legendInherit" StyleClass will be identical to the text color of its parent Node.

Defining constants

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:

      .root{
      -my-red: rgb(255,0,10);
      -my-amber: rgb(255,128,0);
      }

These constants can be used whenever the associated colors are needed. For example:

      -fx-stroke: -my-red;

CSS properties types

See JavaFX CSS properties types.

Importing CSS files

It is possible to import a CSS file into another. For example:

      @import "cssStyles.css"

Using fonts

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.