ARINC661 JavaFX CSS format

This article explains how to use the JavaFX CSS format in the context of the J661 Server. See also ARINC661 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 implemented as a Node tree which will 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);
      }

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;

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.