Motive für die Verwendung mit der Rich-UI-Anwendung

Motive stellen eine einheitliche Gestaltung für alle Dojo-Widgets in Ihrer Rich-UI-Anwendung bereit.

Sie können entweder das Motiv Claro oder das Motiv Tundra angeben. Der Standardwert ist Claro. Wenn Sie eine Anwendung codieren, die Dojo-Widgets enthält, sind außerdem die Motive Nihilo und Soria verfügbar, jedoch betrifft diese Angabe nur die Dojo-Widgets. Wenn ein Widget kein Motiv hat, ist die Darstellung für das Widget spezifisch.

In den folgenden Beispielen werden die einzelnen Motive gezeigt.
Claro
Beispiel für das Motiv Claro
Nihilo
Beispiel für das Motiv Nihilo
Soria
Beispiel für das Motiv Soria
Tundra
Beispiel für das Motiv Tundra

Motiv definieren

Zur Festlegung eines Motivs codieren Sie die Eigenschaft theme des Rich-UI-Handlerabschnitts der höchsten Ebene. Diese Eigenschaft definiert das Motiv für die gesamte Anwendung.

Die folgenden Funktionen gehören ebenfalls zur Verwaltung von Motiven:
  • ruiLib.setTheme()
  • ruiLib.getTheme()
Zur Verwendung eines Motivs müssen Sie Anweisungen codieren, durch die die erforderlichen CSS-Dateien in Ihre CSS-Datei importiert werden. Sie können mehrere Motive auf diese Weise importieren.
  • Für Rich-UI-Widgets:
    Codieren Sie den entsprechenden Import in der Datei com.ibm.eg.rui_2.0.0.css, die sich im Verzeichnis com.ibm.egl.rui_2.0.0/WebContent/css befindet.
    @import url("motivname/motivname.css");
    Dabei ist motivname der Name des gewünschten Motivs. Für das Motiv Claro sähe die Anweisung zum Beispiel wie folgt aus:
    @import url("claro/claro.css");
  • Für Dojo-Widgets:
    Codieren Sie die entsprechende Gruppe aus zwei Link-Anweisungen in der Datei includeDojo.html, die sich im Verzeichnis com.ibm.eg.rui.dojo.runtime.<laufzeit>_1.5/WebContent/config befindet.
    <link href="dijit/themes/motivname/motivname.css" type="text/css" rel="stylesheet" media="screen" id="EGLDOJOTheme_CSS" />
    <link href="dojox/grid/resources/motivnameGrid.css" type="text/css" rel="stylesheet" media="screen" id="EGLDOJOGridTheme_CSS" />
    Dabei ist motivname der Name des gewünschten Motivs. Für das Motiv Claro würden Sie zum Beispiel die folgenden Anweisungen codieren:
    <link href="dijit/themes/claro/claro.css" type="text/css" rel="stylesheet" media="screen" id="EGLDOJOTheme_CSS" />
    <link href="dojox/grid/resources/claroGrid.css" type="text/css" rel="stylesheet" media="screen" id="EGLDOJOGridTheme_CSS" />

Bei IBM® Rational Business Developer Version 7.5.1 wurde das Motiv für ein Widget bzw. eine Gruppe von Widgets mithilfe der Eigenschaft class festgelegt. Sie können das Motiv auch weiterhin mit dieser Methode festlegen. Wenn Sie diese Methode verwenden, müssen die entsprechenden CSS-Dateien für das Motiv importiert werden, um ordnungsgemäß angewendet werden zu können.


Feedback