Natural Web I/O Style Sheets

#### Search Results

Search

# Natural Web I/O Style Sheets

This document covers the following topics:

- Name and Location of the Style Sheets

- Editing the Style Sheets

- Modifying the Position of the Main Output and of the PF Keys

- Modifying the Font Size

- Modifying the Font Type

- Defining Underlined and Blinking Text

- Defining Italic Text

- Defining Bold Text

- Defining Different Styles for Output Fields

- Modifying the Natural Windows

- Modifying the Message Line

- Modifying the Background Color

- Modifying the Color Attributes

- Modifying the Style of the PF Key Buttons

- JavaScript and XSLT Files

## Name and Location of the Style Sheets

Several aspects on a page (such as font, font style or color) are controlled by a style sheet (CSS file).

Natural for Ajax is delivered with a number of predefined style sheets. The default style sheet is natural.css . If you would like to see the same colors in the output window as in the map editor, you can use the style sheet natural_mapeditor.css instead of the default style sheet.

The location of the style sheet s depends on the application server that you are using.

Note
For more information on style sheets, see http://www.w3.org/Style/CSS/ .

## Editing the Style Sheets

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

1. delete the browser's cache, and

2. restart the session.

## Modifying the Position of the Main Output and of the PF Keys

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%; }

## Modifying the Font Size

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

## Modifying the Font Type

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;
    }

Use the CSS at-rule `@font-face` to specify a custom font with which to display text.

For example, Arabic fonts to be used with `InputFields` for the presentation of "Arabic-Indic numerals" instead of "European numerals":

    @font-face {
    font-family: CustomFont;
    src: url( CustomFont.woff );
    }

## Defining Underlined and Blinking Text

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.

## Defining Italic Text

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;}

## Defining Bold Text

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;}

## Defining Different Styles for Output Fields

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.

## Modifying the Natural Windows

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.

## Modifying the Message Line

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.

## Modifying the Background Color

The background color is defined in the `body` element.

Example:

    body {
          background-color: #F3F5F0;
          font-family: Lucida Console;
    }

## Modifying the Color Attributes

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;}

## Modifying the Style of the PF Key Buttons

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.

## JavaScript and XSLT Files

###

In addition to the CSS files described above, Natural for Ajax 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 HTML also contains calls to JavaScript. For Web I/O screens the following conversion is done:

- 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.

The conversion is done at runtime by the following product files of your web application:

1. <mywebapp>/WEB-INF/transuni.xsl

2. <mywebapp>/scripts/natuniscript.js

The XSLT file transuni.xsl is only read once when the server is started.

Important
Do not change the above files. Software AG may change the functionality of these files in new versions or service packs of the product, which would overwrite your changes.

### Customizing JavaScript

You can copy your own JavaScript file with extended JavaScript functionality into the directory <mywebapp>/scripts. This file must have the name usernatunicscript.js. Define your new functionality in this JavaScript file.

If a usernatunicscript.js is found when the server is started, it is read additionally to the JavaScript file natunicscript.js.

For the new JavaScript functionality to be executed, you may also need to customize the XSLT file.

### Customizing XSLT

Make a copy of <mywebapp>/WEB-INF/transuni.xsl and save it as <mywebapp>/WEB-INF/usertransuni.xsl. Modify the XSL elements to your needs.

After making changes to usertransuni.xsl user file, you have to restart the server so that your changes become effective. If a usertransuni.xsl file is found when the server is started, it is read instead of the default XSLT file.

### Customizing Overwrite / Insert mode in Input fields

Up to NJX 9.1.1, Internet Explorer always used “overwrite” mode whereas all other browsers used “insert” mode. With NJX 9.1.2 this inconsistency was fixed. The default behavior is now “overwrite” mode for all browsers. This reflects the default behavior of Natural applications.

If you prefer "insert" mode, do the following:

1. Copy the file WEB-INF/transuni.xsl to WEB-INF/usertransuni.xsl – refer to the section customize the XSLT file above.

2. Open usertransuni.xsl in a text editor. Search for the following line:

   <xsl:attribute name="onkeypress">handleKeyPress(this.name, this);</xsl:attribute>

3. Remove this line and save the file.

### Packaging Customized Files in Natural for Ajax WAR Files

When using the Deployment Wizard for Web Applications of NaturalONE to deploy your Natural for Ajax .war file, you can automatically package a custom usertransuni.xsl in the .war file for deployment:

- Add a webconfig directory to your NaturalONE project as described in the documentation NaturalONE > Natural for Ajax > Deploying the Application > Content of the Sample webconfig Directory.

- Copy your usertransuni.xsl to the webconfig/web-inf folder of your NaturalONE project.

### On this page

- Name and Location of the Style Sheets
- Editing the Style Sheets
- Modifying the Position of the Main Output and of the PF Keys
- Modifying the Font Size
- Modifying the Font Type
- Defining Underlined and Blinking Text
- Defining Italic Text
- Defining Bold Text
- Defining Different Styles for Output Fields
- Modifying the Natural Windows
- Modifying the Message Line
- Modifying the Background Color
- Modifying the Color Attributes
- Modifying the Style of the PF Key Buttons
- JavaScript and XSLT Files