Rich UI アプリケーションで使用するテーマ

テーマは、Rich UI アプリケーション内のすべての Dojo ウィジェットに一貫性のある外観を備えます。

Claro テーマまたは Tundra テーマのいずれかを指定できます。デフォルト値は Claro です。Dojo ウィジェットを含むアプリケーションをコーディングする場合、Nihilo および Soria のテーマも使用できますが、その指定によって影響を受けるのは Dojo ウィジェットのみです。 ウィジェットにテーマがない場合、スタイルはウィジェット固有です。

以下の例で、各テーマを示します。
Claro
Claro テーマの例
Nihilo
Nihilo テーマの例
Soria
Soria テーマの例
Tundra
Tundra テーマの例

テーマの定義

テーマを設定するには、最上位の Rich UI ハンドラー・パーツの theme プロパティーをコーディングします。 このプロパティーは、アプリケーション全体のテーマを定義します。

以下の関数もテーマに関係しています。
  • ruiLib.setTheme()
  • ruiLib.getTheme()
テーマを使用するには、使用する CSS ファイルに必要な CSS ファイルをインポートするステートメントをコーディングする必要があります。 複数のテーマをこの方法でインポートすることができます。
  • Rich UI ウィジェットの場合:
    com.ibm.egl.rui_2.0.0/WebContent/css ディレクトリーにある com.ibm.eg.rui_2.0.0.css ファイルで適切な import をコーディングします。
    @import url("theme_name/theme_name.css");
    theme_name は必要なテーマの名前です。 例えば、Claro テーマを使用する場合、ステートメントは次のようになります。
    @import url("claro/claro.css");
  • Dojo ウィジェットの場合:
    com.ibm.eg.rui.dojo.runtime.<runtime>_1.5/WebContent/config にある includeDojo.html ファイルで 2 つの link ステートメントの適切なセットをコーディングします。
    <link href="dijit/themes/theme_name/theme_name.css" type="text/css" rel="stylesheet" media="screen" id="EGLDOJOTheme_CSS" />
    <link href="dojox/grid/resources/theme_nameGrid.css" type="text/css" rel="stylesheet" media="screen" id="EGLDOJOGridTheme_CSS" />
    theme_name は必要なテーマの名前です。 例えば、Claro テーマを使用する場合、以下のステートメントをコーディングします。
    <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" />

IBM® Rational® Business Developer バージョン 7.5.1 の場合、class プロパティーを使用して 1 つのウィジェットまたはウィジェットの集合に対してテーマが設定されました。現在もこの方式を使用してテーマを設定できます。この方式を使用する場合、テーマが正しく適用されるためには適切な CSS ファイルをインポートする必要があります。


フィードバック