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

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

Faces JSP ファイルの JSF コントロールのスタイル・クラスは、あるクラスから別のクラスに変更することができます。JSF コントロールのスタイルに小規模な変更 (例えば、テキストの色の変更など) を行う 場合は、JSF コントロールのスタイルの変更を参照してください。

このタスクには、次のような前提条件があります。 これらの前提条件について詳しくは、ソース・アシスタントによる JSF コンポーネント・ツリーへのアクセスを参照してください。
EGL JSF ハンドラーから JSF コントロールのスタイル・クラスを変更するには、以下のステップを実行します。
  1. ハンドラーの関数内のブランク行で、Ctrl + Shift + Z を押す。 ページ上の JSF コントロールを表示する「EGL ソース・アシスタント」ウィンドウが開きます。
  2. 「EGL ソース・アシスタント」ウィンドウで、アクセスしたい JSF コントロールを選択する。
  3. 「OK」をクリックします。
    EGL ソース・アシスタントが、2 行の EGL コードを JSF ハンドラーに追加します。第 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" />

フィードバック