EGL コードを使用して、JavaServer Faces (JSF) コントロールの外観の変更 (テキストの色の変更など) を行うことができます。スタイル・クラスの変更によってコントロールの外観を大幅に変更する場合は、
『JSF コントロールのスタイル・クラスの変更』を
参照してください。
EGL JSF ハンドラーから JSF コントロールのスタイルを変更するには、
以下のステップを実行します。
- JSF ハンドラーの関数内のブランク行で、Ctrl+Shift+Z を押す。
ページ上の JSF コントロールを表示する「EGL ソース・アシスタント」ウィンドウが開きます。
- 「EGL ソース・アシスタント」ウィンドウで、アクセスしたい JSF コントロールを選択する。
- 「OK」をクリックします。
EGL ソース・アシスタントが、2 行の EGL コードを JSF ハンドラーに追加します。第 1 行では、選択した JSF コントロールに一致する型の EGL 変数が
定義されます。第 2 行では、その変数が JSF コントロールに関連付けられます。
例えば、JSF 入力テキスト・コントロールにアクセスするためのコードは、
次のようになります。
text1 HtmlInputText;
text1 = myViewRoot.findComponent("form1:text1");
- ソース・アシスタントで作成した 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 ピクセルにします。