This document covers the following topics:
Several aspects on a page (such as font, font style or color) are controlled by a style sheet (CSS file).
The Natural Web I/O Interface client is delivered with the style sheet 3270.css, which is located in:
../natuniapp.ear/natuniweb.war/resources
Note:
For more information on style sheets, see
http://www.w3.org/Style/CSS/.
It is recommended that you have a basic understanding of CSS files.
You can edit the predefined style sheets or create your own style sheets.
It is recommended that you work with backup copies. When a problem occurs with your style sheet, you can thus always revert to the original state.
To see your changes in the browser, you have to
delete the browser's cache, and
restart the session.
Applies when only the named PF keys are displayed. This feature cannot be used when all PF keys are displayed, since they are always displayed at the same position. See also Overview of Session Options.
The following elements are available:
Element Name | Description |
---|---|
.mainlayer |
Controls the position of the main output in the output window. Used for languages that are written from left-to-right (LTR). |
.mainlayer_rtl |
Controls the position of the main output in the output window. Used for languages that are written from right-to-left (RTL). |
.pfkeydiv |
Controls the position of the PF keys in the output window. Used for languages that are written from left-to-right (LTR). |
.pfkeydiv_rtl |
Controls the position of the PF keys in the output window. Used for languages that are written from right-to-left (RTL). |
The *_rtl
elements are only used if Natural
sends the web I/O screen with a right-to-left flag (SET CONTROL
'VON'
). In the browser, the screen elements are then shown on the right
side (instead of the left side).
For web I/O in applications where only the left-to-right orientation is
used, the *_rtl
elements are not required.
If the PF keys are to appear at the bottom, define the elements as shown in the following example:
/* Defines the main screen position */ .mainlayer { top: 5px; left: 0px; height: 550px; } /* Defines the main screen position for right-to-left */ .mainlayer_rtl{ top: 5px; right: 30px; height: 550px; } /* Defines the PF keys screen position */ .pfkeydiv { height: 70px; left: 0px; top: 580px; width: 100%; } /* Defines the PF keys screen position for right-to-left */ .pfkeydiv_rtl { height: 70px; right: 30px; top: 580px; width: 100%; }
Depending on the screen resolution, one of the following style sheets for defining the font size is used in addition to the default style sheet:
model2.css
model3.css
model4.css
model5.css
These style sheets are located in the tmodels subdirectory of the resources directory in which all style sheets are located.
Depending on what comes closest to the standard 3270 screen model, the corresponding style sheet from the tmodels subdirectory is automatically used. It is selected according to the following criteria:
Standard 3270 Screen Model | Criteria | Style Sheet |
---|---|---|
Model 2 (80x24) | 30 rows or less. | model2.css |
Model 3 (80x32) | Between 31 and 40 rows. | model3.css |
Model 4 (80x43) | 41 rows or more. | model4.css |
Model 5 (132x27) | 30 rows or less, and more than 100 columns. | model5.css |
The font sizes in the above style sheets can be adjusted. Example for model4.css:
body { font-size: 10px; }
The default font sizes for the above 3270 screen models are:
Standard 3270 Screen Model | Default Font Size |
---|---|
Model 2 | 16px |
Model 3 | 14px |
Model 4 | 10px |
Model 5 | 12px |
As a rule, you should only use monospace fonts such as Courier New or Lucida Console. With these fonts, all characters have the same width. Otherwise, when using variable-width fonts, the output will appear deformed.
If you want to define a different font type, you should define the same font type for the body, the output fields and the input fields as shown in the following example:
body { background-color: #F3F5F0; font-family: Lucida Console; } .OutputField { white-space:pre; border-width:0; font-family: Lucida Console; font-size: 100%; } .InputField { background-color: white; font-family: Lucida Console; border-width: 1px; font-size: 100%; border-color: #A7A9AB; }
The following elements are available:
Element Name | Description |
---|---|
.natTextDecoUnderline |
Defines underlined text. |
.natTextDecoBlinking |
Defines blinking text. |
.natTextDecoNormal |
Defines normal text (no underline, no blinking). |
Example:
/* Text decoration */ .natTextDecoUnderline { text-decoration:underline; } .natTextDecoBlinking {text-decoration:blink; } .natTextDecoNormal {text-decoration:normal;}
Blinking text is not supported by the Internet Explorer.
The following elements are available:
Element Name | Description |
---|---|
.natFontStyleItalic |
Defines italic text. |
.natFontStyleNormal |
Defines normal text (no italics). |
Example:
/* font style */ .natFontStyleItalic {font-style:italic;} .natFontStyleNormal {font-style:normal;}
The following elements are available:
Element Name | Description |
---|---|
.natFontWeightBold |
Defines bold text. |
.natFontWeightNormal |
Defines normal text (not bold). |
/* Font weight */ .natFontWeightBold {font-weight:bolder;} .natFontWeightNormal {font-weight:normal;}
When you define bold text ({font-weight:bolder;}
) for the
default font Courier New, your text always has the same width as with normal
text ({font-weight:normal;}
).
However, when you define bold text for Courier or Lucida Console, the bold text will be wider than the normal text and your output may thus appear deformed. It is therefore recommended that you switch off bold text for Courier and Lucida Console:
.natFontWeightBold {font-weight:normal;}
The following elements are available:
Element Name | Description |
---|---|
.FieldVariableBased |
Defines the style for output fields that are based on a variable. |
.FieldLiteralBased |
Defines the style for output fields that are based on a literal. |
Example:
.FieldVariableBased { /* font-style:italic; */ } .FieldLiteralBased { /* font-style:normal; */ }
Note:
In the above example, as well as in the standard CSS files delivered
by Software AG, the variable-based output fields are defined as italic, but are
commented out.
The following elements are available:
Element Name | Description |
---|---|
.naturalwindow |
Controls the rendering of the Natural windows. |
.wintitle |
Controls the rendering of the titles of the Natural windows. |
Example:
.naturalwindow { border-style: solid; border-width: 1px; border-color: white; background-color: black; } .wintitle { left: 0px; top: 1px; height: 17px; width: 100%; color: black; font-size: 100%; font-weight: bold; background-color: white; text-align: center; font-family: Verdana; border-bottom-style: solid; border-bottom-width: 2px; }
Note:
In a mainframe environment, you have to set the Natural profile
parameter WEBIO
accordingly to enable this feature.
See WEBIO - Web I/O Interface Screen
Rendering in the Parameter Reference
which is provided with Natural for Mainframes.
The rendering of the message line is controlled by the
.MessageLine
element.
Example:
.MessageLine { color: blue; }
Note:
In a mainframe environment, you have to set the Natural profile
parameter WEBIO
accordingly to enable this feature.
See WEBIO - Web I/O Interface Screen
Rendering in the Parameter Reference
which is provided with Natural for Mainframes.
The background color is defined in the body
element.
Example:
body { background-color: #F3F5F0; font-family: Lucida Console; }
You can define different colors for all Natural color attributes. These are:
Red
Green
Blue
Yellow
White
Black
Pink
Turquoise
Transparent
You can define these color attributes for input fields and output fields, and for normal output and reverse video.
The following examples show how to define the color attribute "Red".
Define the color for a normal output field:
.natOutputRed {color: darkred;}
Define the foreground and background colors for an output field with reverse video:
.reverseOutputRed {background-color: darkred; color:#F3F5F0;}
Define the color for a normal input field:
.natInputRed {color: darkred;}
Define the foreground and background colors for an input field with reverse video:
.reverseInputRed {background-color: darkred; color:#F3F5F0;}
The following elements are available:
Element Name | Description |
---|---|
.PFButton |
Controls the style for normal rendering. |
.PFButton:hover |
Controls the style that is used when the mouse hovers over a PF key button. |
Example:
.PFButton { text-align: center; width: 90px; border-style: ridge; border-width: 3px; padding: 2px; text-decoration: none; font-family: Verdana; font-size: 12px; height: 22px; } .PFButton:hover { color: #FFFF00; background-color: #222222; }
Note:
In a mainframe environment, you have to set the Natural profile
parameter WEBIO
accordingly to enable this feature.
See WEBIO - Web I/O Interface Screen
Rendering in the Parameter Reference
which is provided with Natural for Mainframes.
In addition to the CSS files described above, the Natural Web I/O Interface client uses XSLT files with specific names for the conversion of the Natural Web I/O Interface screens from the internal XML format to HTML. The following elements are affected:
Input text is placed into the HTML element
<input>
.
Output text is placed into the HTML element
<input>
(with attribute
readonly="readonly"
).
A message line is placed into the HTML element
<span>
.
PF keys are embedded in an XML island and then rendered with JavaScript.
Window elements are embedded in an XML island and then rendered with JavaScript.
Note:
The JavaScript file which is part of the above conversion is
natunicscript.js. It is located in the
scripts directory which can be found in the
<installdir>/natuniweb
directory.
The name of the default XSLT file is:
transuni.xsl for all supported browsers.
The default XSLT file can be found in the following directory:
<installdir>/natuniweb/web-INF
The XSLT file is only read once when the server is started.
Important:
It is recommended that you do not change the above XSLT file.
Software AG may change or correct the original XSLT transformations in new
versions or service packs of the product.
You can copy your own XSLT file into the above directory. In this case, the file must have the following name:
usertransuni.xsl for all supported browsers.
If this user file can be found when the server is started, it is read instead of the default XSLT file.
When you make changes to this file, you have to restart the server so that your changes become effective.