演習 1.1 では、EGL 変数を JSF コンポーネントにバインドすることにより、これらのフィールドの値 を EGL コードから実行時に変更できることを学習しました。 この演習では、これらのフィールドのスタイルを EGL コードから実行時に変更する方法を学習します。 これらのフィールドのスタイルを変更することで、コンポーネントの背景色の変更など、演習 1.2 で加え た変更の多くを設計時ではなく実行時に加えることができます。
この演習では、JSF コンポーネントのフォントの色を変更する EGL コードを追加します。 ユーザーが無効な情報を入力した場合や必須の入力フィールドを飛ばした場合は、 注意を促すためにコンポーネントのスタイルをこのように変更するとよいでしょう。
JSF コンポーネントの値とスタイルの変更のほかにも、EGL コードを使用して JSF コンポーネントに加 えることができる多くの変更があります。 詳しくは、『 pageHandler から JSF コンポーネントへのアクセス』というヘルプ・トピックを参照してください。
この方法で JSF コンポーネントにアクセスするには、EGL パッケージをプロジェクトに追加する必要が あります。 このパッケージには、JSF コンポーネントへのアクセスを可能にする EGL パーツが含まれています。 この作業は、JSF コンポーネントにアクセスする各 EGL Web プロジェクトについて 1 回のみ実行する必要 があります。
com.ibm.egl.jsf パッケージが、EGLWeb プロジェクトの EGLSource フォルダーに追加されます。 このパッケージには、JSF コンポーネントへのアクセスを可能にする EGL パーツが含まれています。
JSFStyleChange
プロパティー・ビューの左側は次のようになります。
コンポーネントの ID フィールドにニーモニックを入力すると、EGL コードからこのコンポーネント を参照しやすくなります。
ページは次の図のように表示されます。追加したコンポーネントの位置は、ページ上で これらを配置した場所に応じて多少異なることがあります。 このチュートリアルでは、正確な配置は重要ではありません。
通常どおりに、EGL ページ・コード・ファイルがエディターで開かれ、このファイルにはこのペー ジの pageHandler が含まれています。 JSF コンポーネント・インターフェースのサポートを追加したので、新しい pageHandler には以下の 3 つの EGL コードが追加されています。
inputColor string;
outputText string = "This is my output text.";
function changeColor()
end
EGL ソース・アシスタントが開きます。ソース・アシスタントでは、ページに追加した各コンポーネントが含まれた JSF コンポーネント・ツリーと、コンテナーの役割を果たす HtmlForm および HtmlScriptCollector コンポーネントが表示されます。
「EGL ソース・アシスタント」ウィンドウは次のイメージのように表示されます。 コンポーネントの正確な配置は、これらのコンポーネントをどのように作成したかによって異なります。
ソース・アシスタントは、次の 2 行のコードを pageHandler に追加します。
myOutputField HtmlOutputText;
myOutputField = viewRoot.findComponent("form1:myOutputField");
1 行目のコードは、JSF コンポーネントと互換性のある型の EGL 変数を作成します。 2 行目のコードは、JSF コンポーネント・ツリーを表す変数を参照点として使用して、この EGL 変数を JSF コンポーネントにリンクします。 この変数が作成されて JSF コンポーネントにリンクされたので、この変数を使用してこの JSF コンポーネ ントにアクセスできます。
myOutputField.setStyle("color: " + inputColor);
このコードは、JSF 出力フィールドにアクセスして、このフィールドに新しいテキストの色を割り
当てます。
この色は、ページ上の入力フィールドにバインドされる inputColor 変数で定義されていま
す。
changeColor() 関数は次のようになります。
演習 1.1 と同様に、次のステップでは、pageHandler 内で作成した EGL 変数および関数をページ上の JSF コンポーネントにバインドします。
ページは次のようになります。
色の名前 | 色の数値 |
---|---|
Red | #FF0000 |
Blue | #0000FF |
Green | #00FF00 |
Yellow | #FFFF00 |
Black | #000000 |
Orange | #FFA500 |
White | #FFFFFF |
ページは次のようになります。
この演習では、EGL コードから JSF コンポーネントの色を変更する方法を学習しました。 myOutputField.setStyle("color: " + inputColor); というコードは、 setStyle() 関数を使用してコンポーネントの色を変更します。 setStyle() 関数を使用すると、その他の多くの変更をコンポーネントに加えることができま す。 例えば、myOutputField.setStyle("border-style: solid; border-color: Green" ); というコードは、コンポーネントの周囲に緑色の枠線を作成します。 setStyle() 関数は、多くの種類の Cascading Style Sheet コマンドをサポートしています。
また、JSF コンポーネントをこのように操作できるその他の関数もあります。 各タイプの JSF コンポーネントは、それぞれ異なる関数をサポートしています。 例えば、上記のように EGL ソース・アシスタントを使用して入力コンポーネントにアクセスして、 setDisabled(yes); 関数を使用することにより、入力コンポーネントを使用不可にして、 ユーザーがこのコンポーネントに入力できないようにできます。 JSF コンポーネントに対して実行できる各種処理についての詳細は、『 pageHandler から JSF コンポーネントへのアクセス』というヘルプ・トピックを参照するか、EGLSource フォルダー 内の FacesHtmlComponent.egl ファイルを開いて、JSF コンポーネントとこれらの各コンポーネントがサポート している関数のリストを参照してください。
これで、「モジュール 2: 検索ページの作成」を開始する準備ができました。