Below follows a complete example of the simple user interface hierarchy described in Introduction to user interface concept containing a form, a panel and a label for the STN display. The new thing here is a reference to a software DLL file that shall be connected to the form and used when the application is running.
The reference is defined inside the CodeBehind element with a sub-element called reference where the software DLL file is referenced by name. This will usually be “cdsappllcdcodebehind.dll” for the STN display.
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='cdsappllcdcodebehind.dll'/>
</def:CodeBehind>
<Stn:Form def:Name='LcdMainForm' Load='onLoad'>
<Controls>
<Stn:Panel Name='ArticlePanel'>
<Controls>
<Stn:Label Name='SimpleLabel'
FormattedText='This is the ArticlePanel'
Location='50, 10' Width='150'/>
</Controls>
</Stn:Panel>
</Controls>
</Stn:Form>
</MyXaml>
With the example above the terminal will find LcdMainForm with a panel named "ArticlePanel" containing a label named “SimpleLabel”. The label is located at 50, 10 which means that it is positioned 50 pixels to the right of the left border of the display and 10 pixels down from the top border. The text to be displayed in the label is defined by FormattedText property set to “This is the ArticlePanel” in the label declared above.
When the terminal displays the text defined by ArticlePanel the text “This is the ArticlePanel” will be displayed like this:
Figure 17. Article panel, example.
To add another label with another text to the article panel a new label must be declared and adapted by its properties in the XML code. In this case a label with Name=”SimpleLabel2” shall be added to display the text “Another Label in ArticlePanel”. The width must be adjusted to fit the text for the new label. The different labels must be positioned at different locations so the customer can read both texts.
Another location (50 pixels from the left border and 60 pixels down from the top border) is specified for SimpleLabel2.
Example
<Stn:Label Name='SimpleLabel2'
FormattedText='Another Label in ArticlePanel'
Width='150' Location='50, 60' />
The XML code should now look like this with both 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='cdsappllcdcodebehind.dll'/>
</def:CodeBehind>
<Stn:Form def:Name='LcdMainForm' Load='onLoad'>
<Controls>
<Stn:Panel Name='ArticlePanel'>
<Controls>
<Stn:Label Name='SimpleLabel'
FormattedText='This is the ArticlePanel'
Location='50, 10' Width='150'/>
<Stn:Label Name='SimpleLabel2'
FormattedText='Another Label in ArticlePanel'
Location='50, 60' Width='150' />
</Controls>
</Stn:Panel>
</Controls>
</Stn:Form>
</MyXaml>
The article panel should look like this when presented in the terminal:
Figure 18. STN article panel, example.
All panels are built up in this way with content defined as different controls. Details about all the available controls are listed in STN controls.