この演習では、入力値を受け取り、ユーザーがボタンをクリックすればその値を出力フィールドに表示する Web ページを作成します。このページでは非常に単純な関数を実行しますが、JSF 入力/出力コンポーネントへの EGL データのバインドの概念は、このチュートリアルの後半で説明されるより複雑なページで適用されます。
JavaServer Faces (JSF) は、Java テクノロジーに基づく Web アプリケーションを対象とするサーバー・サイド・ユーザー・インターフェース・コンポーネント・フレームワークです。JSF は、Web アプリケーション開発のためのツールおよび事前に構築された標準の Web ページ・コンポーネントのセットです。JSF コンポーネントは、ドラッグ・アンド・ドロップ開発で、非プロシージャー型のプロパティー設定 (宣言型開発) と併せて実装します。
JSF フレームワークは、サーバー要求全体にわたってユーザー・インターフェースの状態を管理し、Model/View/Controller (MVC) フレームワークに基づく動的 Web ページ開発のための簡略なモデルを提供します。このチュートリアルにおける JavaServer Faces コンポーネントとは、このフレームワークのビューのことです。つまり、JSF コンポーネントによってアプリケーションのためのインターフェースが作成されますが、JSF コンポーネントはビジネス・ロジックには直接関係しません。この例では、EGL コードがビジネス・ロジックを提供します。
ファイルを作成する前にプロジェクトまたはフォルダーを選択しない場合、そのファイルが意図した場所に表示されないことがあります。
JSFComponentTest
新規 Faces JSP ファイル・ウィザードは次のようになります。
通常、パレット・ビューはワークベンチの右側にあります。パレット・ビューが見つからない場合は、「ウィンドウ」>「ビューの表示」>「パレット」 をクリックしてください。
ページは次のようになります。
JSFComponentTest.egl ファイルがエディターで開きます。このページ・コード・ファイルには、 ページを制御する EGL パーツである pageHandler が含まれています。このファイルに、JSF コンポーネントを制御する EGL コードが入ります。
inputTextField char(44);
outputTextField char(44);
Function processValues()
outputTextField = inputTextField;
End
ページ・コード・ファイルは次のようになります。
PageHandler に追加したコードには以下の 3 つのパーツが含まれています。
ページ上に JSF フィールドが作成され、それらの JSF フィールドを制御するための EGL コードも作成されました。最後のステップでは、JSF コンポーネントを EGL コードにバインドします。
通常、ページ・データ・ビューはワークベンチの左下にあります。ページ・データ・ビューが見つからない場合は、「ウィンドウ」>「ビューの表示」>「ページ・データ」をクリックしてください。
ページ・コード・ファイルに追加した 2 つの EGL 変数が「JSFComponentTest」の下のリストに表示されます。JSFComponentTest がない場合は、ページを保管して、ページ・データ・ビューを最新表示します。
入力フィールドに、その入力フィールドが EGL 変数 inputTextField にバインドされていることを示すテキスト 「{EGLInputTextField}」が表示されます。
前のステップと同様、出力フィールドにテキスト 「{EGLOutputTextField}」が表示されます。
ボタンに表示されるテキストは変わりませんが、ボタンは、2 つのフィールドが変数にバインドされたのと同じように processValues() 関数にバインドされます。
ページは次のようになります。
ワークベンチ内の Web ブラウザーで Web ページが開きます。 外部の Web ブラウザーを使用したい場合は、ワークベンチ内の Web ブラウザーから URL をコピーして、その URL を外部ブラウザーの URL バーに 貼り付けることができます。
これで、『演習 1.2: スタイルと妥当性検査の設定』を開始する準備 ができました。