課題 1.4: ユーザー情報の作成と編集用のページの作成

この課題を始める前に、『課題 1.3: UserAdmin ページの開発』を完了していなければなりません。

Web ダイアグラムを定義したアプリケーション・フローを基にする場合は、 ユーザー情報の作成 (UserAdminCreate.jsp) および既存ユーザー情報の更新 (UserAdminUpdate.jsp) のために、 UserAdmin ページを分離する必要があります。

UserAdminCreate.jsp ページを作成する

この課題のこのセクションでは、管理者を使用可能にする UserAdminCreate ページでデータ・アクセスを作成するためのセッション Bean を使用して、新規ユーザー・レコードを作成します。 新規ユーザー・レコードの作成にはユーザー ID が必須であり、このページも妥当性検査ロジックに組み込みます。 さらに、ユーザーがこの処理を終了できるように、「キャンセル」ボタンを追加します。

  1. Web ダイアグラム・エディターに戻り、UserAdminCreate.jsp ページをダブルクリックする。
  2. 作成ウィザードで「完了」をクリックする。

    編集域に空ファイルが開きます。

  3. デフォルトの「コンテンツをここに置く」テキストを削除する。
  4. パレットのデータ・ドロワーから EJB セッション Bean オブジェクトをこのファイルにドラッグする。
  5. このセッション Bean ウィザードが開いたら、「ejb/UserFacade」を選択して、 「次へ」をクリックする。
  6. create(RegistrationData data) インターフェースを選択する。 このインターフェースはポートレット・ページの入力フィールドに使用されます。
  7. 次へ」をクリックする。
  8. 「入力書式」ページで、データベースに新規データを作成するための入力書式を定義する。 「なし (None)」をクリックして、フィールドのすべてを選択解除する。 これによって、ポートレット・ページで使用する入力書式に応じて、 該当するフィールドを個別に選択、編成、および構成できるようになります。 続いて、以下のフィールドのチェック・ボックスを選択します。
  9. 上矢印ボタンと下矢印ボタンを使用して、選択したデータ・フィールドを上述ステップで示された順序に移動する。
  10. 「data.userid」フィールドには、ラベル値を選択してユーザー ID に変更する。
  11. オプション」ボタンをクリックして、「ラベル」フィールドに「作成」と入力する。 「OK」をクリックする。
  12. 完了」をクリックして、UserAdminCreate.jsp ページに入力書式を生成する。 次の画像は、このユーザー・インターフェースの外観です。
    データ・テーブル付き UserAdminCreate.jsp
  13. このページの「作成」ボタンを選択する。
  14. 「プロパティー」ビューがアクティブでない場合は、これを開いて、「規則の追加」ボタンをクリックする。 (右へのスクロールが必要な場合もあります。)
    コマンド・ボタン用の規則プロパティーの追加
  15. ナビゲーション規則の追加」ダイアログで、 「ページ」リスト・ボックスから「UserAdminView.jsp」を選択する。
  16. 指定された結果」ラジオ・ボタンを選択して、「view」と入力する。
  17. OK」をクリックする。
  18. 高速編集」ビュー・タブをクリックする。 「高速編集」編集域をクリックして、return ストリングに "view" を入力する:
    	return "view";

妥当性検査ロジックを追加する

ユーザー ID 値はこのページには必須入力です。 したがって、ユーザー ID が指定されていることの妥当性検査を追加してください。

  1. ユーザー ID: 入力コンポーネント」を選択する。
  2. 「プロパティー」ビューを開く。
  3. 妥当性検査」タブを選択する。
  4. 値を必須にする」チェック・ボックスをクリックする。
  5. UserAdminCreate.jsp を保管する。

アプリケーションのこの部分を実行するために必要なコードは、全く作成する必要はありません。 呼び出しと結果をユーザー・インターフェースにバインドするためのすべての EJB 参照ロジックおよびコードが生成されます。

キャンセル・ロジックを追加する

さらに、検索ページに導くための適切なナビゲーションに加えて、「キャンセル」ボタンを追加する必要があります。

  1. Faces コンポーネント」パレット・ドロワーから「コマンド - ボタン」をドラッグして、 「作成」ボタンの隣にドロップする。
  2. 「プロパティー」ビューがアクティブでない場合は、これを開いて、「プロパティー」ビューをクリックする。
  3. プロパティー・セットで「オプションの表示」タブをクリックして、 「ボタンのラベル」フィールドに「キャンセル」と入力して、Enter (キー) を押す。
  4. 高速編集」ビュー・タブをクリックする。 「高速編集」編集域をクリックして、return ストリングに "view" を入力する:
    	return "view";
  5. このファイルを保管する。 これで、UserAdminCreate.jsp ページの外観は、次の画像のようになります。
    UserAdminCreate.jsp

UserAdminUpdate.jsp ページを作成する

この課題のこのセクションでは、JavaBean を使用して、 UserAdminUpdate ページでユーザー情報を更新するためのデータ・アクセスを作成します。 さらに、ユーザーがこの処理を終了できるように、「キャンセル」ボタンを追加し、 そして既存レコードを取得するための追加コードを追加して、このページを更新できるようにします。

  1. Web ダイアグラム・エディターに戻り、UserAdminUpdate.jsp ページをダブルクリックする。
  2. 作成ウィザードで「完了」をクリックする。

    編集域に空ファイルが開きます。

  3. デフォルトの「コンテンツをここに置く」テキストを削除する。
  4. パレットのデータ・ドロワーから EJB セッション Bean オブジェクトをこのファイルにドラッグする。
  5. このセッション Bean ウィザードが開いたら、「ejb/UserFacade」を選択して、 「次へ」をクリックする。
  6. update(RegistrationData data) インターフェースを選択する。 このインターフェースはポートレット・ページの入力フィールドに使用されます。
  7. 次へ」をクリックする。
  8. 「入力書式」ページで、データベースのデータを更新するための入力書式を定義する。 「なし (None)」をクリックして、フィールドのすべてを選択解除する。 これによって、ポートレット・ページで使用する入力フィールドに応じて、 該当するフィールドを個別に選択、編成、および構成できるようになります。 続いて、以下のフィールドのチェック・ボックスを選択します。
  9. 上矢印ボタンと下矢印ボタンを使用して、選択したデータ・フィールドを上述ステップで示された順序に移動する。
  10. 「data.userid」フィールドには、ラベル値を選択してユーザー ID に変更する。
  11. data.userid 用の「コントロール・タイプ」リストから「出力フィールド」を選択する。 ポートレットでその他の情報を更新するときに、ID が変更されることを回避するためです。
  12. オプション」ボタンをクリックして、「ラベル」フィールドに「更新」と入力する。 「OK」をクリックする。
  13. 完了」をクリックして、UserAdminUpdate.jsp ページに入力書式を生成する。 次の画像は、このユーザー・インターフェースの外観です。
    データ・テーブル付き UserAdminUpdate.jsp
  14. このページで「更新」ボタンを選択する。
  15. 「プロパティー」ビューがアクティブでない場合は、これを開いて、「規則の追加」ボタンをクリックする。 (右へのスクロールが必要な場合もあります。)
  16. ナビゲーション規則の追加」ダイアログで、 「ページ」リスト・ボックスから「UserAdminView.jsp」を選択する。
  17. 指定された結果」ラジオ・ボタンを選択して、「view」と入力する。
  18. OK」をクリックする。
  19. 高速編集」ビュー・タブをクリックする。 「高速編集」編集域をクリックして、return ストリングに "view" を入力する:
    	return "view";

アプリケーションのこの部分を実行するために必要なコードは、全く作成する必要はありません。 呼び出しと結果をユーザー・インターフェースにバインドするためのすべての EJB 参照ロジックおよびコードが生成されます。

キャンセル・ロジックを追加する

さらに、検索ページに導くための適切なナビゲーションに加えて、「キャンセル」ボタンを追加する必要があります。

  1. Faces コンポーネント」パレット・ドロワーから「コマンド - ボタン」をドラッグして、 「更新」ボタンの隣にドロップする。
  2. 「プロパティー」ビューがアクティブでない場合は、これを開いて、「プロパティー」ビューをクリックする。
  3. プロパティー・セットで「オプションの表示」タブをクリックして、 「ボタンのラベル」フィールドに「キャンセル」と入力して、Enter (キー) を押す。
  4. 高速編集」ビュー・タブをクリックする。 「高速編集」編集域をクリックして、return ストリングに "view" を入力する:
    	return "view";
  5. このファイルを保管する。 これで、UserAdminUpdate.jsp ページの外観は、次の画像のようになります。
    UserAdminUpdate.jsp

既存レコードの更新のために追加コードを追加する

この課題のこのセクションで追加される更新ロジックにより、アプリケーションは既存レコードを取得することができます。 その結果、ユーザーはこのページでそのレコードを更新できます。 UserFacade の findById() が提供するメソッドを使用して、 パラメーター Bean を初期化することで、書式には関係のあるデータが記入されます。

  1. UserAdminUpdate.jsp ポップアップ・メニューから「ページ・コードの編集」を選択する。 このページ・コードは UserAdminUpdate.jsp のための基礎ロジックを含む Java ファイルです。 以下のコード (太字体部分) を挿入してください:
    public UserFacadeLocalUpdateParamBean getUserFacadeLocalUpdateParamBean() {
        if (userFacadeLocalUpdateParamBean == null) {
            userFacadeLocalUpdateParamBean = new UserFacadeLocalUpdateParamBean();
            Integer userid = (Integer)getSessionScope().get("userid");
            try {
                userFacadeLocalUpdateParamBean.setData(getUserFacadeLocal().findById(userid));
            } catch (Exception e) {
                logException(e);
         }
     }
        return userFacadeLocalUpdateParamBean;
    }
    
  2. UserAdminUpdate.java を保管して閉じる。

ページ・ナビゲーション用のリンクを追加する

最後に、UserAdmin ポートレットを完成するには、マスター・ページ (UserAdminView.jsp) から詳細ページ (UserAdminCreate.jsp および UserAdminUpdate.jsp) へのナビゲーションを提供するリンクを追加する必要があります。 このリンクを追加する方法は、以下のとおりです。

  1. Web ダイアグラム・ファイルに戻り、完成した Web ダイアグラムで最終の外観を調べる。
    実現 Web ダイアグラム
    それぞれの Web ページ・ノードが実現されていること、 および複数のコマンド・ボタンのリンクが決まった所にあることを注意深く確認してください。
  2. UserAdminView.jsp を開く。
  3. Faces コンポーネント」パレット・ドロワーから「リンク」をドラッグして、 このファイルのデータ・テーブルの隣にドロップする。
  4. URL」フィールドに「/UserAdminCreate.jsp」を、 「ラベル」フィールドに「作成」と入力する。 「OK」をクリックする。
  5. Faces コンポーネント」パレット・ドロワーから「コマンド - ハイパーリンク」をドラッグして、 データ・テーブルの {userid} というラベルが付けられた出力フィールドにドロップする。
  6. 「プロパティー」ビューがアクティブでない場合は、これを開いて、「規則の追加」ボタンをクリックする。 (右へのスクロールが必要な場合もあります。)
  7. ナビゲーション規則の追加」ダイアログで、 「ページ」リスト・ボックスから「UserAdminUpdate.jsp」を選択する。
  8. 指定された結果」ラジオ・ボタンを選択して、「更新」と入力する。
  9. OK」をクリックする。
  10. 「プロパティー」ビューで「パラメーター」タブを選択する。
  11. パラメーターの追加」ボタンをクリックする。
  12. 名前」フィールドに「ユーザー ID」と入力する。
  13. 」フィールドのセルをクリックし、次に参照アイコンをクリックして、 「ページ・データ・オブジェクトの選択」ダイアログを開く。 「userFacadeLocal」 > 「findByName(java.lang.String)」 > 「userFacadeLocalFindByNameResultBean」の順に展開して、 「ページ・データ・オブジェクトの選択」ダイアログで「ユーザー ID (java.lang.Integer)」を選択する。

    「ページ・データ・オブジェクトの選択」ダイアログ
  14. OK」をクリックする。

次に、セッション・スコープでパラメーターを保管するためのコードを追加する必要があります。 これによって、更新ページでユーザー ID を使用して、ユーザー情報を更新ページの入力書式に提供できます。

  1. 高速編集」ビュー・タブをクリックする。 「クイック編集」編集域をクリックして (これにより、「更新」ボタンに関連付けされたアクション・コード用に空エリアのテンプレートを作成します)、 以下のコードを入力します。
    String userid = (String)getRequestParam().get("userid");
    getSessionScope().put("userid", new Integer(userid));
    return "update";
    
  2. ファイルを保管して閉じる。

UserAdmin ポートレットを実行する

この時点までの UserAdmin ポートレットが意図したとおりに作動していることを検証するために、 Rational Developer が提供する内部ブラウザーで JSP ファイルを実行する必要があります。 UserAdmin ポートレットを実行するには、次に挙げることを行います。

  1. プロジェクト・エクスプローラーの AuctionPortlet プロジェクトを選択して、 このポップアップ・メニューから「実行」 > 「サーバーで実行」の順に選択する。
  2. 既に WebSphere Portal v5.1 テスト環境は定義済みなので、 「サーバーの選択」ウィザードでこれを選択して、「完了」をクリックする。
  3. 最終的に、このファイルはブラウザーに表示されます。 そこで、ユーザーがポータル・サイトで見ることになる入力フィールド、リンク、 およびレイアウトを見ることができます。
  4. 「名前」フィールドに % と入力して、「検索」ボタンをクリックし、 データベースから既存のユーザーを検索する。

    新規作成されたポートレットの実行

作成リンクを押すか、データ・テーブルからユーザーを選択すると、 UserAdminCreate または UserAdminUpdate ページがそれぞれ開きます。 このいずれかのページで値を指定して、「作成」または「更新」ボタンをクリックすると、 追加の値および更新の値は受け入れられます。 更新データは UserAdminView ページに、ただちに反映されます。 ご使用の検索名が自分自身で作成したユーザー名 (すべてのユーザーを検索する場合は、ワイルドカード文字 (%) を使用できます) と一致すると、この作成ページから戻ったときに新規ユーザーが表示されます。

次の課題に進む前に、テスト環境サーバーの停止をお勧めします。 テスト環境サーバーを停止するには、「サーバー」ビューでこのサーバーだけを選択して、 「サーバーの停止」ツールバー・ボタン サーバーの停止 をクリックします。

これで、『課題 1.5: オークション・サイト・リストの検索と詳細情報のリストの提供を行うポートレットの追加』を開始する準備が完了しました。

ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.