ウィジェット・スタイル

個々のウィジェットの表示特性の多くは、スタイルを含めるかどうかによって異なります。以下に規則を示します。
  • カスケーディング・スタイル・シート (CSS) に保存されたスタイル・クラスを参照できます。
    • すべての Rich UI アプリケーションが、Rich UI システム・プロジェクトにある CSS ファイルのスタイルにアクセスします。この説明では、プロジェクト名は com.ibm.egl.rui です。その CSS ファイルにアクセスするには、WebContent フォルダーおよび css サブフォルダーを展開します。このファイルを更新すると、やがて保守に関する問題が発生しかねないため、このファイルはそのままにすることをお勧めします。
    • 独自の CSS ファイルを保守することにより、提供されているスタイルをオーバーライドしたり、補完したりできます。このファイルは、次の 2 とおりの方法のいずれによっても Rich UI ハンドラー・パーツで使用できるようになります。
      • パーツ・プロパティー cssFile を設定できます。 このプロパティーは、WebContent ディレクトリーへの相対パスを受け入れます。
        以下に設定例を示します。
        Handler ButtonTest Type RUIHandler 
           { children = [ui], cssFile = "buttontest/coolblue.css" }
        以下に CSS ファイルの例を示します。
        .EglRuiGridTable 
        { border: 3px solid black; }  
        
        .EglRuiGridHeader 
        { color:yellow; 	
          background-color:red;	 }  
        
        .EglRuiGridCell 
        { color:black; 	
          background-color:aqua; } 

        cssFile プロパティーと includeFile プロパティー (次に説明) の両方を指定した場合は、cssFile プロパティーで参照している CSS のコンテンツが優先されます。

      • パーツ・プロパティー includeFile を設定できます。 このプロパティーも、WebContent ディレクトリーへの相対パスを受け入れます。
        以下に設定例を示します。
        Handler ButtonTest Type RUIHandler 
           { children = [ui], includeFile = "buttontest/coolblue.css" }

        このオプションについて詳しくは、『Rich UI ハンドラー・パーツ』を参照してください。

  • Rich UI に用意されているそれぞれのウィジェット・タイプは、CSS に組み込むためのスタイル・クラスに名前を付けます。クラス名には次のようなパターンがあります。 WidgetTypeName は TextArea などのウィジェット・タイプ名です。
    EglRuiWidgetTypeName

    この規則の目的は、ユーザーが複数アプリケーション間で整合性を確保できるように、Web 設計者がウィジェットのタイプごとにスタイルを設定できるようにすることです。

    一部のウィジェットでは、追加のクラス名を参照します。
    • グリッド・ウィジェットは、スタイル・クラス EglRuiGridTable (グリッドの境界線のスタイル全般を設定)、EglRuiGridHeader (ヘッダー・セルの特性を設定)、および EglRuiGridCell (本体セルの特性を設定) を参照する子を含みます。
    • textField ウィジェットが読み取り専用の場合、このウィジェットでは、スタイル・クラス EglRuiTextFieldReadOnly を参照します。
    • passwordTextField ウィジェットが読み取り専用の場合、このウィジェットでは、スタイル・クラス EglRuiPasswordTextFieldReadOnly を参照します。

    特定のウィジェットのソースで追加のクラス名を参照できます。Firefox ブラウザーを使用している場合は、Firebug を使用して、表示されたウィジェットのスタイルを調べることもできます。

  • 以下に示すようにウィジェット・プロパティー class を設定することによって、スタイル・クラスをオーバーライドできます。
    loginBox	Box { numColumns=2, class="NormalBoxStyle" };
    次に、CSS ファイル内の関連コンテンツの例を示します。
    .NormalBoxStyle 
       {  color:black; 	
          background-color:aqua; } 

    指定されたクラスのすべてのスタイルがウィジェットで有効になります。これらのスタイルは、後で説明するように、ウィジェットがスタイルをオーバーライドした場合を除き、包含されているすべてのウィジェットで継承されます。

  • スタイル (またはスタイルのセット) は、style プロパティーで指定できます。 次に例を示します。この例には、CSS ファイルで使用される構文が (プロパティー値に) 含まれています。
    loginBox	Box 
       { numColumns=2,
         style="background-color:lightgreen;border-style:solid;" };      
    style プロパティーを使用する場合は、すべての CSS スタイルを使用できます。 ただし、ほとんどの目的においては、個別のスタイル関連プロパティーに値を 代入できます。以下の宣言は、上記の宣言と同等ですが、CSS 構文を含みません。
    loginBox	Box 
       { columns=2,
         backgroundColor="lightgreen",
         borderStyle="solid" };      

    以下に、EGL のスタイル関連プロパティーを示します。

    • background
    • backgroundColor
    • borderStyle またはサブセット borderLeftStyleborderRightStyleborderTopStyleborderBottomStyle の 1 つ
    • borderWidth またはサブセット borderLeftWidthborderRightWidthborderTopWidthborderBottomWidth の 1 つ
    • color
    • cursor
    • font
    • fontSize
    • fontWeight
    • height
    • margin またはサブセット marginLeftmarginRightmarginTopmarginBottom の 1 つ
    • opacity
    • padding またはサブセット paddingLeftpaddingRightpaddingToppaddingBottom の 1 つ
    • pixelHeight
    • pixelWidth
    • position
    • visibility
    • width

    backgroundbackgroundColorborderStylecursorfont、および visibility (それぞれ、型 STRING の値を取ります) を除き、各プロパティーは、型 INT の値を取り、計測単位としてピクセルを使用します。

  • 特定のウィジェットで有効になっているスタイルは、クラスで指定されたスタイルとスタイル仕様の合計です。ほとんどの場合、ウィジェットに適用されるスタイルによって、内包されているウィジェットから継承された同一のスタイルがオーバーライドされます。また、リストで以前に指定された同等のスタイルがある場合は、そのスタイルは、ウィジェット・プロパティーのリストに指定されている最後のスタイルによってオーバーライドされます。
  • ウィジェットの定義時に、 style プロパティーまたは同等のプロパティー (特定のスタイルを指定するため) と class プロパティー (同じスタイルを含むクラスを参照するため) の両方を使用する場合は、ほとんどの場合、style プロパティーの値が優先されます。

スタイルを指定しない場合は、ブラウザーのデフォルト設定によって、線幅、ウィジェット間の余白、およびテキスト・フォントなどの特性が決まります。

スタイルのベスト・プラクティス

Rich UI プロジェクトは、会社が 2 つのタスク (EGL 開発者によって処理されるユーザー・インターフェースのレイアウト設定と、Web 設計者によって処理されるインターフェースのルック・アンド・フィールの作成) の責務を分割する場合に最もよい結果を出す可能性が高くなります。この分業を可能にするには、外部のスタイル・シートを使用することをお勧めします。EglRuiTextField などのデフォルトのクラス名を使用できます。または、特定のウィジェットの class プロパティーに値を割り当てることによって、独自のクラス名を割り当てることもできます。

文書本体からすべての子を削除した場合の影響

次のステートメントについて考えます。
   document.body.removeChildren();
次の 2 つの影響があります。
  • すべての子ウィジェットが Web ページから削除されます。
  • 外部スタイル・シートへのアクセスがある場合は削除されます。
外部スタイル・シートへのアクセスを削除することなく文書本体から子を削除するには、次のステートメントのように、個別の子を削除します。
   document.body.removeChild(myBox);

追加情報のソース

カスケーディング・スタイル・シートの詳細については、以下の Web サイトを参照してください。

   http://www.w3schools.com/css

本書の記述時点では、この Web サイトの左側にはいくつかのリンクがあり、Rich UI では、見出し『CSS Basic』の下にある選択項目が特に有益です。右側にあるサイト検索も役立ちます。

カスケーディング・スタイル・シートの完全な説明については、Meyer 著の「CSS: The Definitive Guide」(O'Reilly Media, Inc.、2006 年 11 月) を参照してください。