The same user interface hierarchy as created above for the STN display is here created for the TFT display. In the example below a reference is also created to a software DLL file, but the reference does not point to the same DLL file as used for the STN display. The reason is that the TFT presentation layer is differentiated from the STN presentation layer.
The TFT form also has a load property in the same way as the STN form. Loading the TFT application requires that a background panel is defined in the TFT main form. This panel is usually used as a generic background to all other panels that are created with smaller size and are displayed centred on top of the background panel. The background can also be an empty panel if it is not required in the user interface. In the example below it is just a panel with the size 640 by 480 pixels that is not displayed as a background to all other panels, but it has to be declared.
Example
<?xml version='1.0' encoding='utf-8'?>
<MyXaml xmlns='MyXaml.Extensions'
xmlns:def='Definition'
xmlns:ref='Reference'
xmlns:SM='CdsApplLib.ServiceMode, cdsappllib'
xmlns:CT='CdsTests, cdstests'
xmlns:WF='System.Windows.Forms'
xmlns:TFT='CdsApplLib.TftControls, cdsappllib'
xmlns:SMGUI='TftServiceMode, cdsapplcodebehind'
xmlns:Stn='CdsApplLib.LcdControls, cdsappllib'
xmlns:LMGUI='LcdServiceMode, cdsappllcdcodebehind'
xmlns:LCDTSTGUI='CdsTestsLcd, cdstestslcd'>
<def:CodeBehind Src=''>
<reference assembly='cdsapplcodebehind.dll'/>
</def:CodeBehind>
<TFT:Form def:Name='TftMainForm' Load='onLoad'>
<Controls>
<TFT:Panel def:Name='Background' Size='640,480' Location='0,0'>
</TFT:Panel>
<TFT:Panel Name='ArticlePanel'
BackColor='White' Size='640,480' Location='0,0'>
<Controls>
<TFT:Label Name='SimpleLabel'
FormattedText='This is the ArticlePanel'
Size='150,20' Location='200,50'/>
</Controls>
</TFT:Panel>
</Controls>
</TFT:Form>
</MyXaml>
This example for the TFT user interface has the same user interface structure as the STN example in STN display. Note that in this example the background panel will not be presented. Therefore it is created as an empty panel without any sub-controls because it must be defined anyhow.
The article panel is given a light blue background by setting BackColor=”White”. Size=“640, 480” makes the panel fill the whole display. In the article panel, the label named “SimpleLabel” shall display the text “This is the ArticlePanel” according to the FormattedText property definition.
“SimpleLabel” have a defined size of 150 pixels width and 20 pixels height and is indented 200 pixels from the left display border and 50 pixels from the top border.
Figure 10 below illustrates what the example article panel should look like.
Figure 19. TFT article panel, example.
To add another text to the article panel a new label must be declared and its properties should be adapted in the XML code.
In this case a label named ”SimpleLabel2” shall be added to display the text “Another Label in ArticlePanel”. The size must be adjusted to fit the text of the new label. To make both labels visible at the same time in the display they must be at different positions. Therefore, the position 200 pixels from the left border and 200 pixels from the top border is specified for the label SimpleLabel2.
Example
<TFT:Label Name='SimpleLabel2'
FormattedText='Another Label in ArticlePanel'
Size='150,20' Location='200,200'
The XML code should now look like this with both labels SimpleLabel and SimpleLabel2 declared:
Example
<?xml version='1.0' encoding='utf-8'?>
<MyXaml xmlns='MyXaml.Extensions'
xmlns:def='Definition'
xmlns:ref='Reference'
xmlns:SM='CdsApplLib.ServiceMode, cdsappllib'
xmlns:CT='CdsTests, cdstests'
xmlns:WF='System.Windows.Forms'
xmlns:TFT='CdsApplLib.TftControls, cdsappllib'
xmlns:SMGUI='TftServiceMode, cdsapplcodebehind'
xmlns:Stn='CdsApplLib.LcdControls, cdsappllib'
xmlns:LMGUI='LcdServiceMode, cdsappllcdcodebehind'
xmlns:LCDTSTGUI='CdsTestsLcd, cdstestslcd'>
<def:CodeBehind Src=''>
<reference assembly='cdsapplcodebehind.dll'/>
</def:CodeBehind>
<TFT:Form def:Name='TftMainForm' Load='onLoad'>
<Controls>
<TFT:Panel def:Name='Background' Size='640,480' Location='0,0'/>
<TFT:Panel Name='ArticlePanel' BackColor='LightBlue' Size='640,480' Location='0,0'>
<Controls>
<TFT:Label Name='SimpleLabel'
FormattedText='This is the ArticlePanel'
Size='150,20' Location='200,50'/>
<TFT:Label Name='SimpleLabel2'
FormattedText='Another Label in ArticlePanel'
Size='150,20' Location='200,200'/>
</Controls>
<TFT:Panel>
</Controls>
</TFT:Form>
</MyXaml>
The article panel should now look like this when displayed in the terminal:
Figure 20. TFT article panel, example.
In this way all panels are built up with content defined as different controls. Details about all available controls are listed in TFT Controls.
