Example 1: An “About” Dialog Box
The first sample XML resource file creates an “About MyApp” dialog:
<?xml version="1.0" ?>
<Dialog name="aboutDialog" title="About MyApp"
height="150" width="400" layout="vertical">
<ComponentContainer layout="vertical" alignment="center">
<Static name="credit"
title="Brought to you by the Information Technology group"
themeClass="csLblFnt csThmClr csAbtTxt" />
<!-- Add a 10px space in between two Static components -->
<Spacer />
<Static name="company"
title="Copyright 2003 Your company name here."
themeClass="clsIbar" />
<Spacer />
</ComponentContainer>
<!-- Add another ComponentContainer to have the button aligned in
the center -->
<ComponentContainer layout="horizontal" alignment="center">
<!--If button text is less than 7-8 characters, add width="70" -->
<Button name="ok" title="OK" />
</ComponentContainer>
<!-- Add 10px margin from bottom -->
<Spacer />
</Dialog>
- The dialog box shown in the Image below has a height of 150 pixels and a width of 400 pixels. The elements contained in this dialog are to be stacked vertically (layout="vertical"). If the width or height of a spacer is not specified, the default is 10 pixels in height and 10 pixels in width.
- The first ComponentContainer contains a credit statement (Static) and a company/copyright statement (Static).
- The two Static components are stacked vertically (layout="vertical") and aligned in the center (alignment="center").
- Some CSS classes are applied to the Static components. The theme classes are described in the Presenting Data chapter in the Developer's Guide.
- The second ComponentContainer contains a Button. In order to align the button in the center, it needs to be in its own ComponentContainer or it will align on the left with the two Static components.
Example 2: A Confirmation Dialog Box
The second sample XML resource file creates a confirmation dialog:
The XML code that produces the above dialog is as follows
<?xml version="1.0" ?>
<Dialog name="myDialog" title="Confirmation" modal="true"
height="140" width="400" layout="vertical">
<!-- Add 10px margin from top -->
<Spacer />
<!-- Need a horizontal layout in the main area in order to add 20px
margin on each side -->
<ComponentContainer layout="horizontal">
<!-- Add 20px margin on left side -->
<Spacer width="20" />
<!-- CONTENT AREA-->
<StaticImage ImageURL="/SalesApp/Images/logo.gif" />
<Spacer width="10" />
<Static name="credit"
title="Do you want to apply the change?"
themeClass="csLblFnt csThmClr csAbtTxt" />
<!-- Add 20px margin on right side -->
<Spacer width="20" />
</ComponentContainer>
<!-- Add 10px margin between content area and buttons -->
<Spacer />
<ComponentContainer name="buttonContainer" layout="horizontal"
alignment="right">
<!--If button text is less than 7-8 characters, add width="70" -->
<Button name="ok" title="Yes" width="70" />
<!-- Add 5px margin between buttons -->
<Spacer width="5" />
<Button name="cancel" title="Cancel" width="70" />
<!-- Add 20px margin on right side, matching main content area -->
<!-- Only put this in if there is equivalent or greater margin on the
left already -->
<Spacer width="20" />
</ComponentContainer>
<!-- Add 10px margin from bottom -->
<Spacer />
</Dialog>
- The dialog box has a height of 150 pixels and a width of 400 pixels. The elements contained in this dialog are to be stacked vertically (layout="vertical").
- A ComponentContainer is added to include a logo (StaticImage)
and text (Static).
- The ComponentContainer’s layout is set to horizontal so components inside this container are stacked from left to right.
- Some CSS classes are applied to the components. The theme classes are described in the Presenting Data chapter in the Developer's Guide.
- Another ComponentContainer is added to contain two buttons ( Button components). The two buttons are right aligned (alignement="right") with 10 pixels at the end to add some space before the border.
