The syntax is more or less the same for TFT and STN displays. All user interface objects such as forms, panels and other controls are all declared in XML with a prefix that is either “TFT:” or “Stn:”. A very simple label declaration looks like this for the STN display:
<Stn:Label Name='SimpleLabel'/>
The equivalent label definition for the TFT display would be:
<TFT:Label Name='SimpleLabel'/>
The user interface is then built up in hierarchies using this fundamental XML syntax where “Stn:” or “TFT:” is used as prefix followed by the control type name (Label above). This also applies to forms, panels and all other controls.
Everything is declared with standard XML formats where an element is created either with syntax <element> </element> or the shorter alternative <element />. Properties are added inside the element depending on what the control type supports.
One common property is Name that is supported for all controls. In the example above the name of the controls is “SimpleLabel” for both the TFT and the STN displays.
A lot of other properties are supported by the Label type. They are described in STN controls and TFT Controls for each one of the available controls.
The structures of forms, panels and other controls in the user interface are built up by elements and sub-elements in the <Controls> lists. A typical structure is the main Form definition containing a number of panels which, in turn, contain other controls such as labels and buttons.
In the sample below this basic structure is created with one Form element for the STN display with Name=”LcdMainForm” containing a Panel for the STN display with the name=“ArticlePanel”. This, in turn, contains a Label with Name=“SimpleLabel” for the STN display. The form has a property called Load which will be set to Load=”onLoad” which is a reference in the software to the function that shall be executed when the software has created the user interface. This also applies to a user interface for the TFT display:
Example
<Stn:Form def:Name='LcdMainForm' Load='onLoad'>
<Controls>
<Stn:Panel Name='ArticlePanel'>
<Controls>
<Stn:Label Name='SimpleLabel' />
</Controls>
</Stn:Panel>
</Controls>
</Stn:Form>
Several panels may be defined inside the form, but in this case only one is defined for the sake of clarity.
Stn:Panel also has a Controls sub-element that holds the definitions of all controls that shall be presented in “ArticlePanel”. In the example above only one label control, with the name “SimpleLabel”, is declared inside ArticlePanel. To add other controls to “ArticlePanel” they can be declared inside the Controls sub-element.
The Form Name is declared with def:Name=”LcdMainForm” which is required so the software can find and use the form that is the root of the user interface objects. The def: prefix is also used when declaring a TFT main form for the same reason.
More than one line in a label
Breaking texts in more than one line due to the text does not fit on one line should be done in the translation file.
In the User Interface file you should only use a line break for texts that will not change. I.e. you use only one language or the text is not translated in the translation file.
Commands
•To add a new line to the translation file, use the 
 command. Note that the command must be used in the Value part of the translation key.
•To add a new line character to a label in the User Interface, use the @E@ command between the part you want to display on 2 lines.
This will split both parts into separate keys in the translation file.
Example translation file:
Text in the translation file: "Insert card to check in or out
Insert coin to start purchase"
will be displayed as:
Insert card to check in or out Insert coin to start purchase |
Example User Interface file:
The following line in the user interface file:
<Stn:FormattedTextItem PayUnitsName="Coin_Card_CardCollector" Text="Insert card to check in or out@E@Insert coin to start purchase"/>
must have the following lines on the translation file:
<data key="Insert card to check in or out" value="Insert card to check in or out"/>
<data key="Insert coin to start purchase" value="Insert coin to start purchase"/>
