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

EGL コードを使用して、JavaServer Faces (JSF) コントロールの外観の変更 (テキストの色の変更など) を行うことができます。スタイル・クラスの変更によってコントロールの外観を大幅に変更する場合は、 『JSF コントロールのスタイル・クラスの変更』を 参照してください。

このタスクには、次のような前提条件があります。 これらの前提条件について詳しくは、ソース・アシスタントによる JSF コンポーネント・ツリーへのアクセスを参照してください。
EGL JSF ハンドラーから JSF コントロールのスタイルを変更するには、 以下のステップを実行します。
  1. JSF ハンドラーの関数内のブランク行で、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 変数を使用して、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 ピクセルにします。

フィードバック