Natural Web I/O Interface Version 1.1.4 (Server)
 —  Natural Web I/O Interface  —

Using Themes (IIS only)

The information in this document 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:

This document covers the following topics:


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 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"/>

Top of page

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.

Top of page