CWT User Interface Design Handbook

Styles can be inherited from other styles which can be used to create advanced structures where styles can be built from other styles.

This can be useful for example when basic properties like size shall be applied to all buttons in the whole user interface although it should be possible to define more specific styles for different types of buttons such as Reject buttons, Accept buttons, etc.

This can be accomplished by defining a base style called ButtonStyle that is inherited by more specific styles like RejectButtonStyle, AcceptButtonStyle, etc. The properties that shall be common to all buttons are then only defined in the ButtonStyle but can be inherited by the more specific styles.

The example below creates two styles. A first base style for buttons with the name “ButtonStyle“ and a more specific style for all reject buttons with the name “RejectButtonStyle”:

<Style def:Name='ButtonStyle'>
  <StyleProperties>
    <PropertyStyle Size='120, 45'/>
    <PropertyStyle Font='Arial, 14pt, style=Bold'/>
  </StyleProperties>
</Style>
 
<Style def:Name='RejectButtonStyle' BasedOn='{ButtonStyle}'>
  <StyleProperties>
    <PropertyStyle Name='RejectButton'/>
    <PropertyStyle Location='25, 305'/>
      <PropertyStyle ForeColor='Black'/>
      <PropertyStyle BackColor='Red'/>
    <PropertyStyle Click='OnReject'/>
  </StyleProperties>
</Style>

Note the BasedOn property in the definition of ”RejectButtonStyle”. This property tells the terminal’s software that RejectButtonStyle shall be based on the ButtonStyle and automatically include all properties defined in ButtonStyle. In this case both the Font and Size properties defined in ButtonStyle will be used by the RejectButtonStyle.

A definition of a reject button with a reference to RejectButtonStyle will get the properties and values shown in the table below:

If all styles for all buttons are based on ButtonStyle it will be possible to adjust all button sizes in the whole user interface in one place, that is, in the ButtonStyle.