Using Themes (IIS only)

This document covers the following topics:

General Information

The information in this chapter applies only to Microsoft Internet Information Services (IIS).

Themes are used to define the output style for the Natural application. Some themes are already delivered in the installation package.

Themes are standard functionality in ASP.NET 2.0. They must be contained in the App_Themes folder. For each theme, the App_Themes folder contains a subfolder. For example, the theme with the name "3270Thema" is contained in the folder 3270Theme.

Each subfolder which is provided for a theme must contain the following files:

  • SkinFile.skin (see below)

  • StyleSheet.css (see below)

The Skin File

The skin file (SkinFile.skin) contains entries for Natural elements (such as fields) in the following form: 

<asp:Label SkinId="Red" runat="server" forecolor="red"/>
<asp:Label SkinId="Green" runat="server" forecolor="green"/>
<asp:Label SkinId="Blue" runat="server" forecolor="blue" />
...

The table below shows the minimum settings that are required in the skin file to map the Natural screen in the Natural Web I/O Interface. This table contains the following columns:

  • Natural Attributes
    The attributes that can be set in Natural.

  • Output Fields
    The Natural output fields for text.

  • Input Fields
    The Natural fields in which you can enter data.

  • Read-only Input Fields
    When a window is displayed on a Natural screen, the input fields in the main screen are set to read-only. The input fields of the windows that are lying behind the top window are also displayed as read-only.

Natural Attributes Output Fields Input Fields Read-only Input Fields
Red <asp:Label runat="server" SkinId="Red"/> <asp:TextBox runat="server" SkinId="Red"/> <asp:TextBox runat="server" SkinId="RedReadonly"/>
Green <asp:Label runat="server" SkinId="Green"/> <asp:TextBox runat="server" SkinId="Green"/> <asp:TextBox runat="server" SkinId="GreenReadonly"/>
Blue <asp:Label runat="server" SkinId="Blue"/> <asp:TextBox runat="server" SkinId="Blue"/> <asp:TextBox runat="server" SkinId="BlueReadonly"/>
Pink <asp:Label runat="server" SkinId="Pink"/> <asp:TextBox runat="server" SkinId="Pink"/> <asp:TextBox runat="server" SkinId="PinkReadonly"/>
Yellow <asp:Label runat="server" SkinId="Yellow"/> <asp:TextBox runat="server" SkinId="Yellow"/> <asp:TextBox runat="server" SkinId="YellowReadonly"/>
Turquoise <asp:Label runat="server" SkinId="Turquoise"/> <asp:TextBox runat="server" SkinId="Turquoise"/> <asp:TextBox runat="server" SkinId="TurquoiseReadonly"/>
White <asp:Label runat="server" SkinId="White"/> <asp:TextBox runat="server" SkinId="White"/> <asp:TextBox runat="server" SkinId="WhiteReadonly"/>
Black <asp:Label runat="server" SkinId="Black"/> <asp:TextBox runat="server" SkinId="Black"/> <asp:TextBox runat="server" SkinId="BlackReadonly"/>
Intensified <asp:Label runat="server" SkinId="Intensified"/> <asp:TextBox runat="server" SkinId="Intensified"/> <asp:TextBox runat="server" SkinId="IntensifiedReadonly"/>
No attribute <asp:Label runat="server" SkinId="Normal"/> <asp:TextBox runat="server" SkinId="Normal"/> <asp:TextBox runat="server" SkinId="NormalReadonly"/>

The information in the cells of the above table shows the settings of the ASP.NET web server controls. ASP.NET defines a lot of web server controls. The attribute runat="server" indicates that the web controls are interpreted at the server site.

The following controls are used in the default skin files:

Control Description
asp:Label A text output field.
asp:TextBox A text input field.
asp:Table A table where the field elements are the PF key buttons.
asp:Button A PF key button.
asp:Image An image link.
asp:Panel A container for other web controls.

In addition to defining colors as shown above, the SkinId is also used to define the following:

Natural Element Description ASP.NET Skin File
Message line Information text line in the Natural screen. <asp:Label runat="server" SkinId="messageline"/>
Child window The child windows of a Natural application. <asp:Panel runat="server" SkinId="WindowPanel"/>
Child window title The title of a Natural child window. <asp:TextBox runat="server" SkinId="WindowTitle"/>
Child window shadow The child window is shown with a shadow. <asp:Panel runat="server" SkinId="WinShadow"/>
PF key table The row of PF key buttons is defined in a table. <asp:Table runat="server" SkinId="PFKeys"/>
PF key button The definition of the PF keys. <asp:Button runat="server" SkinId="Pfkey"/>
Head picture Picture displayed at the top of the page. <asp:Image runat="server" SkinId="headpic"/>

The Style Sheet

In the style sheet (StyleSheet.css), you can define styles according to the CSS standard. See http://www.w3.org/Style/CSS/.

The following is an example style sheet which defines the background color and font of the web page: 

body 
{
background-color: transparent;
font-family: Courier New, Monospace;
}

Note:
If you define the font size in a CSS file, this has no influence on the screen size. If the font size is changed, only smaller text is displayed.