Dieses Dokument behandelt die folgenden Themen:
Verschiedene Aspekte einer Seite (z. B. Schriftart, Schriftstil oder -farbe) werden durch eine als Stylesheet (CSS-Datei) bezeichnete Stilvorlage gesteuert.
Der Natural Web I/O Interface Client wird mit dem Stylesheet 3270.css ausgeliefert, das sich an folgendem Speicherort befindet:
../natuniapp.ear/natuniweb.war/resources
Anmerkung
Weitere Informationen zu Stylesheets finden Sie unter http://www.w3.org/Style/CSS/.
Sie sollten über grundlegende Kenntnisse von CSS-Dateien verfügen.
Sie können die vordefinierten Stylesheets bearbeiten oder eigene Stylesheets erstellen.
Es wird empfohlen, mit Sicherungskopien zu arbeiten. Wenn ein Problem mit Ihrem Stylesheet auftritt, können Sie so jederzeit zum ursprünglichen Zustand zurückkehren.
Um Ihre Änderungen im Browser zu sehen, müssen Sie
den Cache des Browsers löschen und
die Sitzung neu starten.
Gilt nur, wenn nur mit Namen belegte PF-Tasten angezeigt werden. Diese Funktion kann nicht verwendet werden, wenn alle PF-Tasten angezeigt werden, da diese immer an derselben Position angezeigt werden. Siehe auch Übersicht über die Session-Optionen .
Die folgenden Elemente sind verfügbar:
| Elementname | Beschreibung |
|---|---|
.mainlayer
|
Steuert die Position der Hauptausgabe im Ausgabefenster. Wird für Sprachen verwendet, die von links nach rechts geschrieben werden (LTR). |
.mainlayer_rtl
|
Steuert die Position der Hauptausgabe im Ausgabefenster. Wird für Sprachen verwendet, die von rechts nach links geschrieben werden (RTL). |
.pfkeydiv
|
Wird für Sprachen verwendet, die von links nach rechts geschrieben werden (LTR). |
.pfkeydiv_rtl
|
Steuert die Position der PF-Tasten im Ausgabefenster. Wird für Sprachen verwendet, die von rechts nach links geschrieben werden (RTL). |
Die *_rtl-Elemente werden nur verwendet, wenn Natural den
Web-Ein-/Ausgabe-Bildschirm mit einem Rechts-nach-links-Flag (SET CONTROL
'VON') sendet. Im Browser werden die Bildschirmelemente dann auf der rechten
Seite (anstelle der linken Seite) angezeigt.
Für Web-Ein-/Ausgabe in Anwendungen, in denen nur die Ausrichtung von links nach rechts
verwendet wird, sind die *_rtl-Elemente nicht
erforderlich.
Wenn die PF-Tasten unten angezeigt werden sollen, müssen Sie die Elemente wie im folgenden Beispiel gezeigt definieren:
/* 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%; }
Je nach Bildschirmauflösung wird zusätzlich zum Standard-Stylesheet eines der folgenden Stylesheets zur Definition der Schriftgröße verwendet:
model2.css
model3.css
model4.css
model5.css
Diese Stylesheets befinden sich im Unterverzeichnis tmallows des Verzeichnisses resources, in dem alle Stylesheets gespeichert sind.
Je nachdem, was dem Standard 3270 Screen Model am nächsten kommt, wird automatisch das entsprechende Stylesheet aus dem Unterverzeichnis tmodels verwendet. Die Auswahl erfolgt nach folgenden Kriterien:
| Standard 3270 Screen Model | Kriterien | Stylesheet |
|---|---|---|
| Model 2 (80x24) | 30 Zeilen oder weniger. | model2.css |
| Model 3 (80x32) | Zwischen 31 und 40 Zeilen. | model3.css |
| Model 4 (80x43) | 41 Zeilen oder mehr. | model4.css |
| Model 5 (132x27) | 30 Zeilen oder weniger und mehr als 100 Spalten. | model5.css |
Die Schriftgrößen in den oben genannten Stylesheets können angepasst werden. Beispiel für model4.css:
body { font-size: 10px; }
Die Standardschriftgrößen für die oben genannten 3270 Screen Models sind:
| Standard 3270 Screen Model | Standardschriftgröße |
|---|---|
| Model 2 | 16px |
| Model 3 | 14px |
| Model 4 | 10px |
| Model 5 | 12px |
Generell sollten Sie nur Monospace-Schriftarten wie Courier New oder Lucida Console verwenden. Bei diesen Schriftarten haben alle Zeichen die gleiche Breite. Bei Verwendung von Schriftarten mit variabler Breite erscheint die Ausgabe sonst verzerrt.
Wenn Sie eine anderen Schriftart definieren möchten, sollten Sie für den Textkörper, die Ausgabefelder und die Eingabefelder dieselbe Schriftart definieren, wie im folgenden Beispiel gezeigt:
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;
}
Verwenden Sie die CSS-at-rule @font-face, um eine
benutzerdefinierte Schriftart für die Anzeige von Text festzulegen.
Beispiel: Arabische Schriftarten, die mit InputFields
für die Darstellung von arabisch-indischen Ziffern anstelle von europäischen Ziffern
verwendet werden sollen:
@font-face {
font-family: CustomFont;
src: url( CustomFont.woff );
}
Die folgenden Elemente sind verfügbar:
| Elementname | Beschreibung |
|---|---|
.natTextDecoUnderline
|
Definiert unterstrichenen Text. |
.natTextDecoBlinking
|
Definiert blinkenden Text. |
.natTextDecoNormal
|
Definiert normalen Text (ohne Unterstreichung, ohne Blinken). |
Beispiel:
/* Text decoration */
.natTextDecoUnderline { text-decoration:underline; }
.natTextDecoBlinking {text-decoration:blink; }
.natTextDecoNormal {text-decoration:normal;}
Blinkender Text wird vom Internet Explorer nicht unterstützt.
Die folgenden Elemente sind verfügbar:
| Elementname | Beschreibung |
|---|---|
.natFontStyleItalic
|
Definiert kursiven Text. |
.natFontStyleNormal
|
Definiert normalen Text (nicht kursiv). |
Beispiel:
/* font style */
.natFontStyleItalic {font-style:italic;}
.natFontStyleNormal {font-style:normal;}
Die folgenden Elemente sind verfügbar:
| Elementname | Beschreibung |
|---|---|
.natFontWeightBold
|
Definiert fettgedruckten Text. |
.natFontWeightNormal
|
Definiert normalen Text (nicht fettgedruckt). |
/* Font weight */
.natFontWeightBold {font-weight:bolder;}
.natFontWeightNormal {font-weight:normal;}
Wenn Sie fettgedruckten Text ( {font-weight:bolder;} ) für die
Standardschriftart Courier New definieren, hat Ihr Text immer die gleiche Breite wie
normaler Text ( {font-weight:normal;} ).
Wenn Sie jedoch fettgedruckten Text für Courier oder Lucida Console definieren, ist der fettgedruckte Text breiter als der normale Text, sodass Ihre Ausgabe möglicherweise deformiert erscheint. Es wird daher empfohlen, fettgedruckten Text bei Courier und Lucida Console zu deaktivieren:
.natFontWeightBold {font-weight:normal;}
Die folgenden Elemente sind verfügbar:
| Elementname | Beschreibung |
|---|---|
.FieldVariableBased
|
Definiert den Stil für Ausgabefelder, die auf einer Variablen basieren. |
.FieldLiteralBased
|
Definiert den Stil für Ausgabefelder, die auf einem Literal basieren. |
Beispiel:
.FieldVariableBased {
/* font-style:italic; */
}
.FieldLiteralBased {
/* font-style:normal; */
}
Anmerkung
Im obigen Beispiel sowie in den vom Produkt gelieferten Standard-CSS-Dateien sind
die variablenbasierten Ausgabefelder als kursiv definiert, jedoch auskommentiert.
Die folgenden Elemente sind verfügbar:
| Elementname | Beschreibung |
|---|---|
.naturalwindow
|
Steuert die Darstellung der Natural-Fenster. |
.wintitle
|
Steuert die Darstellung der Titel der Natural-Fenster. |
Beispiel:
.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;
}
Anmerkung
In einer z/OS-Umgebung müssen Sie den Natural-Profilparameter
WEBIO entsprechend einstellen, um diese Funktion zu aktivieren.
Siehe WEBIO – Web I/O Interface
Rendering in der
Parameter-Referenz-Dokumentation für Natural for z/OS.
Die Darstellung der Meldungszeile wird durch das Element
.MessageLine gesteuert.
Beispiel:
.MessageLine {
color: blue;
}
Anmerkung
In einer z/OS-Umgebung müssen Sie den Natural-Profilparameter
WEBIO entsprechend einstellen, um diese Funktion zu aktivieren.
Siehe WEBIO – Web I/O Interface
Rendering in der
Parameter-Referenz-Dokumentation für Natural for z/OS.
Die Hintergrundfarbe wird im Element body definiert.
Beispiel:
body {
background-color: #F3F5F0;
font-family: Lucida Console;
}
Sie können für alle Natural-Farbattribute unterschiedliche Farben definieren. Diese sind:
Rot
Grün
Blau
Gelb
Weiß
Schwarz
Rosa
Türkis
Transparent
Sie können diese Farbattribute für Eingabe- und Ausgabefelder sowie für normale Ausgabe und inverse Anzeige definieren.
Die folgenden Beispiele zeigen, wie Sie das Farbattribut "Rot" definieren.
Definiert die Farbe für ein normales Ausgabefeld:
.natOutputRed {color: darkred;}
Definiert die Vordergrund- und Hintergrundfarben für ein Ausgabefeld mit inverser Anzeige:
.reverseOutputRed {background-color: darkred; color:#F3F5F0;}
Definiert die Farbe für ein normales Eingabefeld:
.natInputRed {color: darkred;}
Definiert die Vordergrund- und Hintergrundfarben für ein Eingabefeld mit inverser Anzeige:
.reverseInputRed {background-color: darkred; color:#F3F5F0;}
Die folgenden Elemente sind verfügbar:
| Elementname | Beschreibung |
|---|---|
.PFButton
|
Steuert den Stil für die normale Darstellung. |
.PFButton:hover
|
Steuert den Stil, der verwendet wird, wenn der Mauszeiger über eine PF-Taste bewegt wird. |
Beispiel:
.PFButton {
text-align: center;
width: 90px;
border-style: ridge;
border-width: 3px;
padding: 2px;
text-decoration: keiner;
font-family: Verdana;
font-size: 12px;
height: 22px;
}
.PFButton:hover {
color: #FFFF00;
background-color: #222222;
}
Anmerkung
In einer z/OS-Umgebung müssen Sie den Natural-Profilparameter
WEBIO entsprechend einstellen, um diese Funktion zu aktivieren.
Siehe WEBIO – Web I/O Interface
Rendering in der
Parameter-Referenz-Dokumentation für Natural for z/OS.
Zusätzlich zu den oben beschriebenen CSS-Dateien verwendet der Natural Web I/O Interface Client XSLT-Dateien mit bestimmten Namen, um die Natural Web I/O Interface-Bildschirme vom internen XML-Format in HTML zu konvertieren. Das HTML enthält auch Aufrufe an JavaScript. Für Web I/O-Bildschirme wird folgende Konvertierung durchgeführt:
Eingabetext wird in das HTML-Element <input>
eingefügt.
Ausgabetext wird in das HTML-Element <input>
(mit dem Attribut readonly="readonly") eingefügt.
Eine Meldungszeile wird in das HTML-Element
<span> eingefügt.
PF-Tasten werden in eine XML-Insel eingebettet und dann mit JavaScript gerendert.
Fensterelemente werden in eine XML-Insel eingebettet und dann mit JavaScript gerendert.
Die Konvertierung wird zur Laufzeit durch die folgenden Produktdateien Ihrer Webanwendung durchgeführt:
<mywebapp>/WEB-INF/transuni.xsl
<mywebapp>/scripts/natuniscript.js
Die XSLT-Datei transuni.xsl wird nur einmal beim Start des Servers gelesen.
Wichtig
Ändern Sie die oben genannten Dateien nicht. Die Funktionalität dieser
Dateien kann sich in neuen Versionen oder Service Packs des Produkts ändern, wodurch
Ihre Änderungen überschrieben würden.
Sie können Ihre eigene JavaScript-Datei mit erweiterter JavaScript-Funktionalität in das Verzeichnis <mywebapp>/scripts kopieren. Diese Datei muss den Namen usernatunicscript.js haben. Definieren Sie Ihre neue Funktionalität in dieser JavaScript-Datei.
Wenn beim Start des Servers eine Datei usernatunicscript.js gefunden wird, wird diese zusätzlich zur JavaScript-Datei natunicscript.js gelesen.
Damit die neuen JavaScript-Funktionen ausgeführt werden können, müssen Sie möglicherweise auch die XSLT-Datei anpassen.
Erstellen Sie eine Kopie von <mywebapp>/WEB-INF/transuni.xsl und speichern Sie sie unter <mywebapp>/WEB-INF/usertransuni.xsl. Passen Sie die XSL-Elemente an Ihre individuellen Anforderungen an.
Nachdem Sie Änderungen an der Benutzerdatei usertransuni.xsl vorgenommen haben, müssen Sie den Server neu starten, damit Ihre Änderungen wirksam werden. Wenn beim Starten des Servers eine Datei usertransuni.xsl gefunden wird, wird diese anstelle der standardmäßig vorhandenen XSLT-Datei gelesen.
Bis NJX 9.1.1 verwendete Internet Explorer immer den Überschreibmodus, während alle anderen Browser den Einfügemodus verwendeten. Mit NJX 9.1.2 wurde diese Inkonsistenz behoben. Das Standardverhalten ist nun für alle Browser der Überschreibmodus. Dies entspricht dem Standardverhalten von Natural-Anwendungen.
Wenn Sie den Einfügemodus bevorzugen, gehen Sie wie folgt vor:
Kopieren Sie die Datei WEB-INF/transuni.xsl nach WEB-INF/usertransuni.xsl – siehe Abschnitt XSLT anpassen oben.
Öffnen Sie usertransuni.xsl in einem Texteditor. Suchen Sie nach der folgenden Zeile:
<xsl:attribute name="onkeypress">handleKeyPress(this.name, this);</xsl:attribute>
Entfernen Sie diese Zeile und speichern Sie die Datei.
Wenn Sie den Deployment Wizard for Web Applications von NaturalONE zum Bereitstellen Ihrer Natural for Ajax .war-Datei verwenden, können Sie automatisch eine benutzerdefinierte usertransuni.xsl in die .war-Datei zum Bereitstellen packen:
Fügen Sie Ihrem NaturalONE-Projekt ein webconfig-Verzeichnis hinzu, siehe NaturalONE > Natural for Ajax > Deploying the Application > Content of the Sample webconfig Directory.
Kopieren Sie Ihre usertransuni.xsl in den Ordner webconfig/web-inf Ihres NaturalONE-Projekts.