Viele Anzeigemerkmale eines einzelnen Widgets hängen davon ab, ob Stile (Darstellungen) eingeschlossen
werden. Dabei gelten die folgenden Regeln:
- Sie können auf eine Stilklasse verweisen, die in einem Cascading Style Sheet (CSS) gespeichert ist:
- Jede Rich-UI-Anwendung greift auf die Stile in der CSS-Datei zu, die sich im Rich-UI-Systemprojekt
befindet. Zum Zeitpunkt der Abfassung dieses Abschnitts hat das Projekt den Namen 'com.ibm.egl.rui'. Für
den Zugriff auf diese CSS-Datei erweitern Sie den Ordner 'WebContent' und den Unterordner 'css'. Es wird
empfohlen, diese Datei nicht zu ändern, da eine Aktualisierung dieser Datei mit der Zeit wahrscheinlich
ein Wartungsproblem zur Folge hätte.
- Sie können die bereitgestellten Stile überschreiben und ergänzen, indem Sie eine eigene CSS-Datei
pflegen. Diese Datei können Sie für den Rich-UI-Handlerabschnitt auf zwei Arten verfügbar machen:
- Sie können die Abschnittseigenschaft cssFile festlegen, die
einen Pfad relativ zum Verzeichnis 'WebContent' akzeptiert.
Das folgende Beispiel zeigt eine solche Einstellung:
Handler ButtonTest Type RUIHandler
{ children = [ui], cssFile = "buttontest/coolblue.css" }
Das folgende Beispiel
zeigt eine mögliche CSS-Datei:
.EglRuiGridTable
{ border: 3px solid black; }
.EglRuiGridHeader
{ color:yellow;
background-color:red; }
.EglRuiGridCell
{ color:black;
background-color:aqua; }
Beachten Sie, dass bei Angabe sowohl der Eigenschaft
cssFile als auch der Eigenschaft includeFile (wie
nachfolgend beschrieben) der CSS-Inhalt Vorrang hat, der durch die Eigenschaft
cssFile referenziert wird.
- Sie können die Abschnittseigenschaft includeFile festlegen, die
ebenfalls einen Pfad relativ zum Verzeichnis 'WebContent' akzeptiert.
Das folgende Beispiel zeigt eine solche Einstellung:
Handler ButtonTest Type RUIHandler
{ children = [ui], includeFile = "buttontest/coolblue.css" }
Details zu dieser Option
finden Sie im Abschnitt Rich-UI-Handlerabschnitt.
- Jeder Widgettyp, der in Rich-UI bereitgestellt wird, benennt eine Stilklasse für
den Einschluss in das Cascading Style Sheet (CSS). Das Klassenname hat das folgende Muster, wobei
WidgetTypeName der Widgettypname ist, wie zum Beispiel 'TextArea':
EglRuiWidgetTypeName
Der Zweck dieser Konvention besteht darin, einem
Web-Designer die Möglichkeit zu geben, die Stile für jeden Typ von Widget festzulegen, sodass sich
eine anwendungsübergreifende Konsistenz realisieren lässt.
Einige Widgets verweisen auf zusätzliche Klassennamen:
- Das Widget 'Grid' enthält untergeordnete Elemente, die auf die Stilklasse 'EglRuiGridTable' zum
Festlegen des Rahmenstils für das Raster als Ganzes, auf die Stilklasse 'EglRuiGridHeader' zum Festlegen
der Merkmale von Überschriftszellen sowie auf die Stilklasse 'EglRuiGridCell' zum Festlegen der Merkmale von
Rasterzellen verweisen.
- Wenn ein Widget 'TextField' schreibgeschützt ist, referenziert es die Stilklasse 'EglRuiTextFieldReadOnly'.
- Wenn ein Widget 'PasswordTextField' schreibgeschützt ist, referenziert es die Stilklasse
'EglRuiPasswordTextFieldReadOnly'.
Die zusätzlichen Klassennamen können in der Quelle
für ein bestimmtes Widget eingesehen werden. Wenn Sie den Firefox-Browser verwenden, können Sie 'Firebug'
verwenden, um die Darstellung eines angezeigten Widgets zu untersuchen.
- Sie können eine Stilklasse überschreiben, indem Sie die Widgeteigenschaft class
wie im folgenden Beispiel gezeigt festlegen:
loginBox Box { numColumns=2, class="NormalBoxStyle" };
Das folgende Beispiel
zeigt den entsprechenden Inhalt in der CSS-Datei:
.NormalBoxStyle
{ color:black;
background-color:aqua; }
Alle Stile in der angegebenen Klasse sind im Widget
wirksam. Diese Stile werden in jedem eingeschlossenen Widget übernommen, außer wenn ein Widget einen Stil
überschreibt, wie dies später erläutert wird.
- Sie können einen Stil (oder eine Gruppe von Stilen) in der Eigenschaft style angeben.
Das folgende Beispiel zeigt, wie die Syntax, die in CSS-Dateien verwendet wird, in den Eigenschaftswert
eingefügt wird:
loginBox Box
{ numColumns=2,
style="background-color:lightgreen;border-style:solid;" };
Alle CSS-Stile sind verfügbar,
wenn Sie die Eigenschaft
style verwenden.
Allerdings können Sie für die meisten Zwecke Werte für Eigenschaften für einzelne Stile zuordnen. Die folgende
Deklaration ist äquivalent zur vorherigen und enthält keine CSS-Syntax:
loginBox Box
{ columns=2,
backgroundColor="lightgreen",
borderStyle="solid" };
Die folgenden Eigenschaften sind für EGL-Stile verfügbar:
- background
- backgroundColor
- borderStyle oder eine der folgenden Untergruppen:
borderLeftStyle, borderRightStyle,
borderTopStyle, borderBottomStyle
- borderWidth oder eine der folgenden Untergruppen:
borderLeftWidth, borderRightWidth,
borderTopWidth, borderBottomWidth
- color
- cursor
- font
- fontSize
- fontWeight
- height
- margin oder eine der folgenden Untergruppen:
marginLeft, marginRight,
marginTop, marginBottom
- opacity
- padding oder eine der folgenden Untergruppen:
paddingLeft, paddingRight,
paddingTop, paddingBottom
- pixelHeight
- pixelWidth
- position
- visibility
- width
Mit Ausnahme von background,
backgroundColor, borderStyle,
cursor, font und visibility
(die jeweils einen Wert vom Typ STRING akzeptieren) akzeptiert jede Eigenschaft einen Wert vom Typ INT und
verwendet die Einheit 'Pixel'.
- Die Stile, die für ein bestimmtes Widget wirksam sind, sind die Summe der Stile, die in Klassen- und
Stilspezifikationen angegeben sind. In den meisten Fällen überschreibt ein Stil, der auf ein Widget
angewendet wird, die gleichen Stile, die von enthaltenden Widgets übernommen werden, und der letzte in einer
Liste von Widgeteigenschaften angegebene Stil überschreibt einen äquivalenten Stil (sofern vorhanden), der
zuvor in der Liste angegeben wurde.
- Wenn Sie beim Definieren eines Widgets sowohl die Eigenschaft style oder eine
äquivalente Eigenschaft (zur Angabe eines bestimmten Stils) als auch die Eigenschaft
class (als Referenz auf eine Klasse, die denselben Stil enthält) verwenden, hat der
Wert in der Eigenschaft style in den meisten Fällen Vorrang.
Wenn Sie keine Stile angeben, legen die Standardeinstellungen des Browsers Merkmale wie die
Linienbreiten, die Abstände zwischen Widgets und die Schriftart fest.
Bewährte Verfahren für Stile
Rich-UI-Projekte sind wahrscheinlich dann am
erfolgreichsten, wenn Ihr Unternehmen die Verantwortung für die beiden Aufgabenbereiche aufteilt: einerseits
die Erstellung des Layouts für die Benutzerschnittstelle, wie sie durch einen EGL-Entwickler ausgeführt wird,
und andererseits die Erstellung der Darstellung und Funktionsweise der Schnittstelle, wie sie durch einen
Web-Designer ausgeführt wird. Zur Realisierung dieser Arbeitsteilung empfiehlt sich die Verwendung von
externen Style-Sheets. Sie können auf einen Standardklassennamen wie EglRuiTextField zurückgreifen. Alternativ
können Sie einen eigenen Klassennamen zuordnen, indem Sie der Eigenschaft class
für ein bestimmtes Widget einen Wert zuordnen.
Effekt des Entfernens aller untergeordneten Elemente aus dem Dokumenthauptteil
Betrachten
Sie die folgende Anweisung:
document.body.removeChildren();
Diese Anweisung hat zwei Effekte:
- Alle untergeordneten Widgets werden von der Webseite entfernt.
- Der Zugriff auf das externe Style-Sheet wird entfernt (sofern vorhanden).
Wenn Sie untergeordnete Elemente aus dem Dokumenthauptteil entfernen
wollen, ohne den Zugriff auf das externe Style-Sheet zu entfernen, entfernen Sie bestimmte untergeordnete Elemente,
wie in der folgenden Anweisung:
document.body.removeChild(myBox);
Quellen mit weiteren Informationen
Zum Zeitpunkt
der Abfassung dieser Informationen enthielt die linke Seite dieser Website verschiedene Links, wobei
die Optionen unter der Überschrift CSS Basic von besonderem Interesse in Bezug auf Rich-UI sind. Die Suchfunktion der Website auf der rechten Seite ist ebenfalls nützlich.
Eine vollständige Beschreibung
von Cascading Style Sheets enthält die Veröffentlichung CSS: The Definitive Guide von Meyer
(O'Reilly Media, Inc., November 2006).