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

Web ページ上の多くのエレメントと同様、JSF コンポーネントには、 class 属性を持つスタイル・クラスを割り当てることができます。スタイル・クラスは、 Java™ クラスと混同しないようにしていただきたいのですが、Web ページ上のエレメントの外観を記述する、ゼロから多数までのコマンドのグループです。スタイル・クラスは、 カスケーディング・スタイル・シート (CSS) 言語 (Web ページの外観のさまざまな特徴を制御できる言語) で定義されます。

Faces JSP ファイルの JSF コンポーネントのスタイル・クラスは、あるクラスから別のクラスへと変更することができます。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 変数を使用して、 setStyleClass 関数で JSF コンポーネントのスタイル・クラスを設定する。 例えば、テキスト・フィールドを errorField というスタイル・クラスに設定するには、 次のコードを追加します。
    text1.setStyleClass("errorField");
    このコードが実行されると、 入力フィールドのスタイル・クラスが変更されます。この例では、 ブラウザーに表示される HTML コードは次のようになります。
    <input id="form1:text1" type="text" name="form1:text1" class="errorField" />
フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.