演習 1.1: EGL コードへの JSF コントロールのバインド

この演習では、入力値を受け取り、ユーザーがボタンをクリックすればその値を出力フィールドに表示する Web ページを作成します。このページでは非常に単純な関数を実行しますが、JSF 入力/出力コンポーネントへの EGL データのバインドの概念は、このチュートリアルの後半で説明されるより複雑なページで適用されます。

JSF の概要

JavaServer Faces (JSF) は、Java テクノロジーに基づく Web アプリケーションを対象とするサーバー・サイド・ユーザー・インターフェース・コンポーネント・フレームワークです。JSF は、Web アプリケーション開発のためのツールおよび事前に構築された標準の Web ページ・コンポーネントのセットです。JSF コンポーネントは、ドラッグ・アンド・ドロップ開発で、非プロシージャー型のプロパティー設定 (宣言型開発) と併せて実装します。

JSF フレームワークは、サーバー要求全体にわたってユーザー・インターフェースの状態を管理し、Model/View/Controller (MVC) フレームワークに基づく動的 Web ページ開発のための簡略なモデルを提供します。このチュートリアルにおける JavaServer Faces コンポーネントとは、このフレームワークのビューのことです。つまり、JSF コンポーネントによってアプリケーションのためのインターフェースが作成されますが、JSF コンポーネントはビジネス・ロジックには直接関係しません。この例では、EGL コードがビジネス・ロジックを提供します。

Web ページの作成

  1. Web パースペクティブが表示されていない場合には、「ウィンドウ」>「パースペクティブを開く」>「Web」をクリックして、Web パースペクティブに切り替える。
  2. プロジェクト・エクスプローラー・ビューで、「EGLWeb」プロジェクトをクリックして選択する。通常、プロジェクト・エクスプローラー・ビューはワークベンチの左側にあります。プロジェクト・エクスプローラー・ビュー が表示されていない場合は、「ウィンドウ」> 「ビューの表示」>「プロジェクト・エクスプローラー」をクリックしてください。

    ファイルを作成する前にプロジェクトまたはフォルダーを選択しない場合、そのファイルが意図した場所に表示されないことがあります。

  3. メニュー・バーから「ファイル」>「新規」>「Faces JSP ファイル」をクリックする。新規 Faces JSP ファイル・ウィザードが開きます。
  4. ファイル名」フィールドに次のファイル名を入力する。

    JSFComponentTest

  5. ページ・テンプレートから作成」チェック・ボックスを選択する。
  6. 次へ」をクリックする。
  7. ページ・テンプレート・タイプ」の下で、「ユーザー定義ページ・テンプレート」をクリックする。
  8. サムネール」の下で「A_gray.htpl」テンプレートをクリックする。

    新規 Faces JSP ファイル・ウィザードは次のようになります。

    新規 Faces JSP ファイル・ウィザードの外観

  9. 終了」をクリックする。新規ファイルがプロジェクトに追加され、そのファイルがエディターで開きます。

ページへの JSF コンポーネントの追加

  1. JSFComponentTest.jsp ファイルで、サンプル・テキストの「Place your page content here.」を削除する。
  2. Enter キーを 3 回押し、ファイルに改行を 3 つ追加する。
  3. パレット・ビューで、「Faces コンポーネント 」ドロワー をクリックして開く。

    通常、パレット・ビューはワークベンチの右側にあります。パレット・ビューが見つからない場合は、「ウィンドウ」>「ビューの表示」>「パレット」 をクリックしてください。

  4. 「Faces コンポーネント」ドロワーから、「入力 (Input)」コンポーネントをページへドラッグする。
  5. 同様の方法で、「出力 (Output)」コンポーネントおよび「コマンド - ボタン (Command - Button)」を入力コンポーネントの下のページへドラッグする。

    ページは次のようになります。

    JSFComponentTest.jsp ページの外観

JSF コンポーネントを制御する EGL 変数と関数の定義

  1. ページのコンテンツ領域を右クリックし、ポップアップ・メニューで「ページ・コードの編集」をクリックする。

    JSFComponentTest.egl ファイルがエディターで開きます。このページ・コード・ファイルには、 ページを制御する EGL パーツである pageHandler が含まれています。このファイルに、JSF コンポーネントを制御する EGL コードが入ります。

  2. PageHandler JSFComponentTest で始まる行の下に以下のコードを追加する。

    inputTextField char(44);
    outputTextField char(44);
    
    
    Function processValues()
      outputTextField = inputTextField;
    End

  3. ファイルを保管する。

    ページ・コード・ファイルは次のようになります。

    ページ・コード・ファイルの外観

    PageHandler に追加したコードには以下の 3 つのパーツが含まれています。

  4. JSFComponentTest.egl ファイルを閉じる。

EGL 変数および関数への JSF コンポーネントのバインド

ページ上に JSF フィールドが作成され、それらの JSF フィールドを制御するための EGL コードも作成されました。最後のステップでは、JSF コンポーネントを EGL コードにバインドします。

  1. エディターの上部のタブをクリックするか、プロジェクト・エクスプローラー・ビューでアイコンをダブルクリックして、JSFComponentTest.jsp ページに戻る。
  2. ページ・データ・ビューを見つける。

    通常、ページ・データ・ビューはワークベンチの左下にあります。ページ・データ・ビューが見つからない場合は、「ウィンドウ」>「ビューの表示」>「ページ・データ」をクリックしてください。

  3. ページ・データ・ビューで、「JSFComponentTest」を展開する。

    ページ・コード・ファイルに追加した 2 つの EGL 変数が「JSFComponentTest」の下のリストに表示されます。JSFComponentTest がない場合は、ページを保管して、ページ・データ・ビューを最新表示します。

  4. inputTextField - char(44)」を、ページの入力フィールドへ直接ドラッグする。

    入力フィールドに、その入力フィールドが EGL 変数 inputTextField にバインドされていることを示すテキスト 「{EGLInputTextField}」が表示されます。

  5. outputTextField - char(44)」を、ページの出力フィールドへ直接ドラッグする。

    前のステップと同様、出力フィールドにテキスト 「{EGLOutputTextField}」が表示されます。

  6. ページ・データ・ビューで、「アクション」を展開する。
  7. processValues()」を、ページ上のコマンド・ボタンへ直接ドラッグ・アンド・ドロップする。

    ボタンに表示されるテキストは変わりませんが、ボタンは、2 つのフィールドが変数にバインドされたのと同じように processValues() 関数にバインドされます。

    ページは次のようになります。

    ページの外観

  8. ページを保管する。

サーバーでのページのテスト

  1. プロジェクト・エクスプローラーで 「JSFComponentTest」ファイルを右クリックして、「実行」>「サーバーで実行」をクリックする。

    ワークベンチ内の Web ブラウザーで Web ページが開きます。 外部の Web ブラウザーを使用したい場合は、ワークベンチ内の Web ブラウザーから URL をコピーして、その URL を外部ブラウザーの URL バーに 貼り付けることができます。

  2. 入力フィールドに何らかのテキストを入力して、「Submit」をクリックする。入力したテキストが出力フィールドに表示されます。

これで、『演習 1.2: スタイルと妥当性検査の設定』を開始する準備 ができました。

フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.