JSF コントロールのスタイルの変更
EGL コードを使用して、JavaServer Faces (JSF) コントロールの外観の変更 (テキストの色の変更など) を行うことができます。スタイル・クラスの変更によってコントロールの外観を大幅に変更する場合は、 『JSF コントロールのスタイル・クラスの変更』を 参照してください。
このタスクには、次のような前提条件があります。
- ご使用の EGL Web プロジェクトに、JSF コンポーネント・インターフェースのサポートがなければなりません。 EGL Web プロジェクトへの JSF コンポーネント・インターフェース・サポートの追加を参照してください。
- この Web ページに関連付けられている JSF ハンドラーには、次の import 文が含まれている必要があります。
import com.ibm.egl.jsf.* - UIViewRoot 型の変数を、JSF ハンドラー内で宣言する必要があります。
- JSF ハンドラー・プロパティー viewRootVar で、UIViewRoot 変数の名前を指定する必要があります。
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 ピクセルにします。