Handler ButtonTest Type RUIHandler
{ children = [ui], cssFile = "buttontest/coolblue.css" }
.EglRuiGridTable
{ border: 3px solid black; }
.EglRuiGridHeader
{ color:yellow;
background-color:red; }
.EglRuiGridCell
{ color:black;
background-color:aqua; }
cssFile プロパティーと includeFile プロパティー (次に説明) の両方を指定した場合は、cssFile プロパティーで参照している CSS のコンテンツが優先されます。
Handler ButtonTest Type RUIHandler
{ children = [ui], includeFile = "buttontest/coolblue.css" }
このオプションについて詳しくは、『Rich UI ハンドラー・パーツ』を参照してください。
EglRuiWidgetTypeName
この規則の目的は、ユーザーが複数アプリケーション間で整合性を確保できるように、Web 設計者がウィジェットのタイプごとにスタイルを設定できるようにすることです。
特定のウィジェットのソースで追加のクラス名を参照できます。Firefox ブラウザーを使用している場合は、Firebug を使用して、表示されたウィジェットのスタイルを調べることもできます。
loginBox Box { numColumns=2, class="NormalBoxStyle" };
.NormalBoxStyle
{ color:black;
background-color:aqua; }
指定されたクラスのすべてのスタイルがウィジェットで有効になります。これらのスタイルは、後で説明するように、ウィジェットがスタイルをオーバーライドした場合を除き、包含されているすべてのウィジェットで継承されます。
loginBox Box
{ numColumns=2,
style="background-color:lightgreen;border-style:solid;" };
loginBox Box
{ columns=2,
backgroundColor="lightgreen",
borderStyle="solid" };
以下に、EGL のスタイル関連プロパティーを示します。
background、backgroundColor、borderStyle、cursor、font、および visibility (それぞれ、型 STRING の値を取ります) を除き、各プロパティーは、型 INT の値を取り、計測単位としてピクセルを使用します。
スタイルを指定しない場合は、ブラウザーのデフォルト設定によって、線幅、ウィジェット間の余白、およびテキスト・フォントなどの特性が決まります。
Rich UI プロジェクトは、会社が 2 つのタスク (EGL 開発者によって処理されるユーザー・インターフェースのレイアウト設定と、Web 設計者によって処理されるインターフェースのルック・アンド・フィールの作成) の責務を分割する場合に最もよい結果を出す可能性が高くなります。この分業を可能にするには、外部のスタイル・シートを使用することをお勧めします。EglRuiTextField などのデフォルトのクラス名を使用できます。または、特定のウィジェットの class プロパティーに値を割り当てることによって、独自のクラス名を割り当てることもできます。
document.body.removeChildren();
document.body.removeChild(myBox);
本書の記述時点では、この Web サイトの左側にはいくつかのリンクがあり、Rich UI では、見出し『CSS Basic』の下にある選択項目が特に有益です。右側にあるサイト検索も役立ちます。
カスケーディング・スタイル・シートの完全な説明については、Meyer 著の「CSS: The Definitive Guide」(O'Reilly Media, Inc.、2006 年 11 月) を参照してください。