Synth2 Look and Feel configuration bindings

The specification of Styles for a widget uses two related XML elements;

• The "style" element defines the properties for each of the StyleSets for a widget. Note that this element does not define the widget name nor its associated Swing component, which will be specified in the consecutive "bind" element
• The "bind" element binds the style with its specified id to a component

Note that a Style must be defined only once, and binded once. It is not valid for example to define one "style" element, and bind it on several "bind" elements.

Style element

The "style" element contains only one "id" attribute which will be used by the next "bind" element^[1]

The effective binding between the style specified in the "style" element and the "bind" element will be preformed by this id

.

This element can contain both:

• A list of properties directly under the "style"
• A list of states

For example:

      <style id="readout">
         <insets top="0" left="4" bottom="-4" right="4"/>
         <state styleSet="0">
            <color value="transparent" type="BACKGROUND"/>
            <color value="GREEN" type="TEXT_FOREGROUND"/>
            <property key="Label.halo" type="boolean" value="false" />
            <font resource="DU1310SSmall" size="12.6" style="BOLD" />
         </state>
      </style>

State element

"state" elements represent the states of the component which is specified under the "style" element. States take into account:

• The StyleSet of the component
• The interaction state of the component^[2]
  It is similar to the CSS pseudo-classes, which define for example pseudo-classes like "hover", "selected", etc... for components

Note that:

• If the properties apply on all StyleSets and all interaction states, then a unique empty "state" element can be used, for example:

              <style id="togglebutton">
                 <state>
                    <insets top="9" left="10" bottom="9" right="12"/>
                    <color type="TEXT_FOREGROUND" value="WHITE"/>
                    <font resource="FontSmall" size="12.6" style="BOLD" />
                 </state>
  

• Else each state element will define both the StyleSet on which the children properties will apply, and also (if applicable) the interaction states on which these properties must be applied. For example:

              <state styleSet="0" value="PRESSED">
                 <imagePainter method="background" path="pictures/softkeyPressed.png"
              sourceInsets="10 12 8 9" paintCenter="true" stretch="true"/>
                 <insets top="10" left="12" bottom="8" right="9"/>
                 <color type="TEXT_FOREGROUND" value="WHITE"/>
                 <font resource="DU1310SSmall" size="12.6" style="BOLD" />
              </state>
  

StyleSets

The StyleSets for a "state" element are specified through the "styleSet" attribute. This attribute can either define only one StyleSet index or several StyleSet indexes separated by commas (",").

Interaction states

The interaction states for a "state" element are specified through the "value" attribute. The list of available interaction states in Synth2 is fixed. The following pseudo-states are available:

• PRESSED
• SELECTED
• ENABLED
• DISABLED
• FOCUSED
• MOUSE_OVER

Note that:

• If a list of properties correspond to a combination of interaction states (for example selected and pressed), you should use the "AND" keyword between the interaction states, for example: SELECTED AND PRESSED
• If you define a "state" without specifying the associated interaction states, it means that the associated properties will be used for all interaction states. You can also define properties for some specific interaction states, which will override these previous properties definitions. For example:

              <state styleSet="0">
                 <color type="TEXT_FOREGROUND" value="WHITE"/>
                 <font resource="DU1310SSmall" size="12.6" style="BOLD" />
              </state>
              <state styleSet="0" value="PRESSED">
                 <color type="TEXT_FOREGROUND" value="BLACK"/>
                 <font resource="DU1310SSmall" size="12.6" style="BOLD" />
              </state>
  

Bind element

The "bind" element bind a "style" element to a Swing component UI, and optionally an ARINC ID. For example:

      <style id="myButton">
         ...
      </style>
      <bind style="myButton" key="button"/>

      <style id="myPanel">
         ...
      </style>
      <bind style="myPanel" key="panel" arinc="A661_PANEL"/>

In this example:

• The "myButton" style definition apply to "button" UI elements
• The "myPanel" style definition apply to "panel" UI elements only for those which are implementations of the "A661_PANEL" widget

List of synth2 UI elements

See List of synth2 UI elements.

Properties types

Several properties can be defined under a style or a state element:

• "insets": specifies the insets of the component, for example:

              <insets top="0" left="4" bottom="-4" right="4"/>
  

• "font": specifies the font used by the component, for example:

              <font resource="MySmallFont" size="12.6" style="BOLD"/>
  

  The resource points to a resource defines globally in the synth2 XML file
• "color": specifies the color used by the component, for example:

              <color value="GREEN" type="TEXT_FOREGROUND"/>
  

  The color points to a constant defines globally in the synth2 XML file^[3]
  The "transparetn" color name will always point to a completely transparent color
  . Several color types can be used:
• "FOREGROUND": the foreground color of the component
• "BACKGROUND": the background color of the component
• "TEXT_FOREGROUND": the color of the text used in the component
• "imagePainter": specifies the usage of a painter which will use a texture rather than a plain color to paint the background or foreground of the component, for example:

           <imagePainter method="background" path="pictures/simpleSoftkey.png"
              sourceInsets="9 10 9 12" paintCenter="true" stretch="true"/>
  

• "imageIcon": specifies the path of icons used for the component in the following properties, for example:

              <imageIcon id="check_onCyan" path="pictures/checkButtonOnCyan.png"/>
  

• "property": specifies any property specified for the component, for example:

              <property key="CheckBox.icon" value="check_onCyan"/>
  

Example

      <style id="line">
         <state styleSet="0">
            <stroke width="2" endCap="CAP_ROUND" />
            <property key="graphicWidget.halo" type="boolean" value="false" />
            <property key="halo" type="string" value="supersmall" />
         </state>
      </style>
      <bind style="line" key="line"/>