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:
SkinFile.skin (see below)
StyleSheet.css (see below)
This document covers the following topics:
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"/> |
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.