JSF コンポーネントのスタイルの変更

EGL コードを使用して JSF コンポーネントの外観を変更する (テキストの色の変更など) ことができます。 スタイル・クラスの変更によってコンポーネントの外観を大幅に変更する場合は、 『JSF コンポーネントのスタイル・クラスの変更』を 参照してください。スタイルおよびスタイル・クラスについての詳細は、『Web サイトのページ・スタイルの定義 - 概要』を参照してください。

このタスクには次のような前提条件があります。詳しくは、 『pageHandler から JSF コンポーネントへのアクセス』を参照してください。
EGL pageHandler から JSF コンポーネントのスタイルを変更するには、 以下のステップを実行します。
  1. pageHandler の関数内のブランク行で、Ctrl + Shift + Z を押す。 ページ上の JSF コンポーネントを表示する「EGL ソース・アシスタント」ウィンドウが開きます。
  2. 「EGL ソース・アシスタント」ウィンドウで、アクセスしたい JSF コンポーネントを選択する。
  3. OK」をクリックする。
    EGL ソース・アシスタントが、 2 行の EGL コードを pageHandler に追加します。第 1 行では、選択した JSF コンポーネントに一致する型の EGL 変数が定義されます。第 2 行では、その変数が JSF コンポーネントに関連付けられます。 例えば、JSF 入力テキスト・コンポーネントにアクセスするコードは、 次のようになります。
    text1 HtmlInputText;
    text1 = myViewRoot.findComponent("form1:text1");
  4. ソース・アシスタントで作成した EGL 変数を使用して、 setStyle 関数で JSF コンポーネントのスタイルを変更する。例えば、 テキスト・フィールドのテキストを赤色に変更するには、次のコードを追加します。
    text1.setStyle("color : red");
    このコードが実行されると、入力フィールドのスタイル属性が変更されます。この例では、 ブラウザーに表示される HTML コードは次のようになります。
    <input id="form1:text1" type="text" name="form1:text1" style="color : red" />
    新規のスタイル属性は、それ以前のスタイル属性を上書きします。コンポーネントのスタイルに 複数の変更を加えるには、変更項目の間をセミコロン (;) で区切ります。例えば、色を赤に変更し、 サイズを 20 ポイントに変更するには、次のコードを使用します。
    text1.setStyle("color : red; font-size: 20pt");
以下に、コンポーネントのスタイルに対する他の変更例をいくつか挙げます。 すべてのスタイルが、すべての JSF コンポーネントと互換性があるわけではありません。
text1.setStyle("font-size : 20pt");
コンポーネントのフォント・サイズを 20 ポイントに設定します。
text1.setStyle("text-align: center");
コンポーネント内のテキストを中央に配置します。
text1.setStyle("border-style : solid; border-color : red");
コンポーネントの周囲に、実線の赤い枠を追加します。
text1.setStyle("font-weight : bold");
コンポーネント内のテキストを太字にします。
text1.setStyle("height : 50px");
コンポーネントの高さを 50 ピクセルにします。
フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.