Web ページ上の多くのエレメントと同様、JSF コンポーネントには、
class 属性を持つスタイル・クラスを割り当てることができます。スタイル・クラスは、
Java™ クラスと混同しないようにしていただきたいのですが、Web
ページ上のエレメントの外観を記述する、ゼロから多数までのコマンドのグループです。スタイル・クラスは、
カスケーディング・スタイル・シート (CSS) 言語 (Web ページの外観のさまざまな特徴を制御できる言語)
で定義されます。
Faces JSP ファイルの JSF
コンポーネントのスタイル・クラスは、あるクラスから別のクラスへと変更することができます。JSF
コンポーネントのスタイルを少しだけ変更する (例えば、テキストの色を変更するなど)
場合は、『JSF コンポーネントのスタイルの変更』を参照してください。スタイルおよびスタイル・クラスについての詳細は、『Web サイトのページ・スタイルの定義
- 概要』を参照してください。
このタスクには次のような前提条件があります。詳しくは、
『
pageHandler から JSF コンポーネントへのアクセス』を参照してください。
- ご使用の EGL Web プロジェクトに、JSF コンポーネント・インターフェースのサポートがなければなりません。
『EGL Web プロジェクトへの JSF コンポーネント・インターフェース・サポートの追加』を参照してください。
- Faces JSP のページ・コード・ファイルに次の import 文が含まれている必要があります。
import com.ibm.egl.jsf.*
- pageHandler 内で、UIViewRoot 型の変数を宣言する必要があります。
- pageHandler プロパティー viewRootVar で、UIViewRoot 変数の名前を指定する必要があります。
EGL pageHandler から JSF コンポーネントのスタイル・クラスを変更するには、
以下のステップを実行します。
- pageHandler の関数内のブランク行で、Ctrl + Shift + Z を押す。
ページ上の JSF コンポーネントを表示する「EGL ソース・アシスタント」ウィンドウが開きます。
- 「EGL ソース・アシスタント」ウィンドウで、アクセスしたい JSF コンポーネントを選択する。
- 「OK」をクリックする。
EGL ソース・アシスタントが、
2 行の EGL コードを pageHandler に追加します。第 1 行では、選択した JSF コンポーネントに一致する型の EGL 変数が
定義されます。第 2 行では、その変数が JSF コンポーネントに関連付けられます。
例えば、JSF 入力テキスト・コンポーネントにアクセスするコードは、
次のようになります。
text1 HtmlInputText;
text1 = myViewRoot.findComponent("form1:text1");
- ソース・アシスタントで作成した EGL 変数を使用して、
setStyleClass 関数で JSF コンポーネントのスタイル・クラスを設定する。
例えば、テキスト・フィールドを errorField というスタイル・クラスに設定するには、
次のコードを追加します。
text1.setStyleClass("errorField");
このコードが実行されると、
入力フィールドのスタイル・クラスが変更されます。この例では、
ブラウザーに表示される HTML コードは次のようになります。
<input id="form1:text1" type="text" name="form1:text1" class="errorField" />