課題 1.5: オークション・サイト・リストの検索と詳細情報のリストの提供を行うポートレットの追加

この課題を始める前に、『課題 1.4: ユーザー情報の作成と編集用のページの作成』を完了していなければなりません。

この課題では、連携して動作する追加ポートレットを作成します。 この作成には、ソース・ポートレットからターゲット・ポートレットにデータを送信するための Click-to-Action メカニズムを使用します。 ソース・ポートレット (ListingSearch) はセッション Bean を使用して、オークション項目データをアクセスします。 ListingSearch ポートレットで特定ポートレットを見付けると、 ターゲットの ListingDetail ポートレットは検索で探し出された項目の詳細情報を表示します。 それぞれのケースで、最初にポートレットを作成する必要があります。

ListingSearch ポートレットを作成する

ListingSearch ポートレットを作成する方法は、以下のとおりです。

  1. プロジェクト・エクスプローラーで、動的 Web プロジェクト・フォルダーを展開して、 AuctionPortlet プロジェクト・フォルダーを探し出す。 このプロジェクト・フォルダーを右クリックして、「新規」 > 「ポートレット」の順に選択する。
  2. 「新規ポートレット」ウィザードの初期ページで、 「デフォルト名の接頭部」を「ListingSearch」に変更する。
  3. Faces ポートレット」ラジオ・ボタンを選択する。
  4. 次へ」をクリックする。
  5. アプリケーション名」ドロップダウン・リストから「AuctionPortlet アプリケーション」を選択する。
  6. ポートレット・タイトル」フィールドに「検索のリスト表示」と入力する。
  7. 完了」をクリックする。

編集ペインに ListingSearchView.jsp が開きます。

データ・テーブルを ListingSearch ポートレット・ページに追加する

ListingSearchView.jsp ファイルを Page Designer に開いて、 ListingSearch ページ用のデータ・ソースとしてセッション Bean データを追加する方法は、次のとおりです。

  1. デフォルトの「コンテンツをここに置く」テキストを削除する。
  2. パレットのデータ・ドロワーから EJB セッション Bean オブジェクトをこのファイルにドラッグする。
  3. このセッション Bean ウィザードが開いたら、「新規 EJB 参照」ボタンをクリックする。
  4. AuctionPortletEAR フォルダーと AuctionEJB50 フォルダーを展開して、 「ListingFacade」を選択し、エンタープライズ Bean 参照を作成する。 「完了」をクリックする。
  5. セッション Bean ウィザードで「次へ」をクリックする。
  6. findByTitle(String title) インターフェースを選択する。 このインターフェースはポートレット・ページの入力フィールドに使用されます。そして、「完了」をクリックする。
  7. タイトル・フィールドが選択されていることを注意深く確認する。 「オプション」をクリックする。
  8. ラベル」フィールドに「検索」と入力する。 「OK」をクリックする。
  9. 次へ」をクリックする。ウィザードは「結果書式」ページに移動します。 このページで、データベースのデータを検索して表示するためのデータ・テーブルを定義することになります。
  10. なし (None)」をクリックして、列のすべてを選択解除する。 これによって、ポートレット・ページで使用するデータ・テーブルに応じて、 該当する列を個別に選択、編成、および構成できるようになります。 続いて、以下の列のチェック・ボックスを選択します。
  11. 上矢印ボタンと下矢印ボタンを使用して、選択したデータ列を上述ステップで示された順序に移動する。
  12. itemid 列のラベル値を選択して「項目 ID」に変更する。
  13. 完了」をクリックして、UserAdminView.jsp 用のデフォルト・ユーザー・インターフェースを生成する。 次の画像は、このユーザー・インターフェースの外観です。
    ListingSearchView.jsp
  14. このファイルを保管する。

Java ページ・コードを UserAdmin ページに追加する

この課題のこのセクションでは、以下のステップを実施して Java ページ・コードを追加します。

  • セッション・スコープの title パラメーターを保管する。 これによって、今後、ポートレット・コンテンツのリフレッシュ用に再利用できます。
  • セッション・スコープで保管されたパラメーターを「タイトル」入力フィールドに表示するために、 このパラメーターを初期化する。
  • セッション・スコープで保管された title パラメーターを使用して、結果データを初期化する。
  • 以下のステップを使用して、呼び出しと結果をユーザー・インターフェースにバインドするための EJB 参照ロジックおよびコードを生成できます。

    1. Page Designer のポップアップ・メニューから「ページ・コードの編集」を選択する。
    2. 以下の太字コードを doListingFacadeLocalFindByTitleAction() に入力する:
      public String doListingFacadeLocalFindByTitleAction() {
          String title = getListingFacadeLocalFindByTitleParamBean().getTitle();
          getSessionScope().put("title", title);
              try {
              listingFacadeLocalFindByTitleResultBean = 
              	getListingFacadeLocal().findByTitle(title);
              } catch (Exception e) {
                  logException(e);
          }
          return null;
      }
      
    3. 以下の太字コードを getListingFacadeLocalFindByTitleParamBean() に入力する:
      public ListingFacadeLocalFindByTitleParamBean getListingFacadeLocalFindByTitleParamBean() {
          if (listingFacadeLocalFindByTitleParamBean == null) {
              listingFacadeLocalFindByTitleParamBean = new ListingFacadeLocalFindByTitleParamBean();
              String title = (String)getSessionScope().get("title");
              listingFacadeLocalFindByTitleParamBean.setTitle(title);
          }
          return listingFacadeLocalFindByTitleParamBean;
      }
      
    4. 以下の太字コードを getListingFacadeLocalFindByTitleResultBean() に入力する:
      public ItemData[] getListingFacadeLocalFindByTitleResultBean() {
          if (listingFacadeLocalFindByTitleResultBean == null) {
              String title = (String)getSessionScope().get("title");
              if (title != null) {
              try {
              listingFacadeLocalFindByTitleResultBean = getListingFacadeLocal().findByTitle(title);
              } catch (Exception e) {
                  logException(e);
                  }
              }
          }
          return listingFacadeLocalFindByTitleResultBean;
      }
      
    5. ListingSearchView.java を保管する。

    ListingDetail ポートレットを作成する

    ListingDetail ポートレットを作成する方法は、以下のとおりです。

    1. プロジェクト・エクスプローラーで、動的 Web プロジェクト・フォルダーを展開して、 AuctionPortlet プロジェクト・フォルダーを探し出す。 このプロジェクト・フォルダーを右クリックして、「新規」 > 「ポートレット」の順に選択する。
    2. 「新規ポートレット」ウィザードの初期ページで、 「デフォルト名の接頭部」を「ListingDetail」に変更する。
    3. Faces ポートレット」ラジオ・ボタンを選択する。
    4. 次へ」をクリックする。
    5. アプリケーション名」ドロップダウン・リストから「AuctionPortlet アプリケーション」を選択する。
    6. ポートレット・タイトル」フィールドに「詳細のリスト表示」と入力する。
    7. 完了」をクリックする。

    編集ペインに ListingDetailView.jsp ファイルが開きます。

    データ書式を ListingDetail ポートレット・ページに追加する

    ListingDetailView.jsp ファイルを Page Designer に開いて、 ListingDetail ページ用のデータ・ソースとしてセッション Bean データを追加する方法は、次のとおりです。

    1. デフォルトの「コンテンツをここに置く」テキストを削除する。
    2. パレットのデータ・ドロワーから EJB セッション Bean オブジェクトをこのファイルにドラッグする。
    3. このセッション Bean ウィザードが開いたら、「ejb/ListingFacade」を選択して、 「次へ」をクリックする。
    4. findById(Integer itemid) インターフェースを選択する。 このインターフェースはポートレット・ページの入力フィールドに使用されます。
    5. 次へ」をクリックする。
    6. itemid フィールドが選択されていることを注意深く確認する。 itemid フィールドのラベル値を選択して「項目 ID:」に変更する。
    7. オプション」をクリックする。
    8. ラベル」フィールドに「検索」と入力する。 「OK」をクリックする。
    9. 次へ」をクリックする。ウィザードは「結果書式」ページに移動します。 このページで、データベースのデータを検索して表示するためのデータ書式を定義することになります。
    10. なし (None)」をクリックして、フィールドのすべてを選択解除する。 これによって、ポートレット・ページで使用するデータ・テーブルに応じて、 該当するフィールドを個別に選択、編成、および構成できるようになります。 続いて、以下のフィールドのチェック・ボックスを選択します。
    11. 上矢印ボタンと下矢印ボタンを使用して、選択したデータ・フィールドを上述ステップで示された順序に移動する。
    12. 完了」をクリックして、ListingDetailView.jsp ページ用のユーザー・インターフェースを生成する。 次の画像は、このユーザー・インターフェースの外観です。
      ListingDetailView.jsp
    13. このファイルを保管する。

    Java ページ・コードを UserAdmin ページに追加する

    この課題のこのセクションでは、以下のステップを実施して Java ページ・コードを追加します。

  • セッション・スコープの itemid パラメーターを保管する。 これによって、今後、ポートレット・コンテンツのリフレッシュ用に再利用できます。
  • セッション・スコープで保管されたパラメーターを「項目 ID」入力フィールドに表示するために、 このパラメーターを初期化する。
  • セッション・スコープで保管された itemid パラメーターを使用して、結果データを初期化する。
  • 以下のステップを使用して、呼び出しと結果をユーザー・インターフェースにバインドするための EJB 参照ロジックおよびコードを生成できます。

    1. Page Designer のポップアップ・メニューから「ページ・コードの編集」を選択する。
    2. 以下の太字コードを doListingFacadeLocalFindByIdAction() に入力する:
      public String doListingFacadeLocalFindByIdAction() {
          Integer itemid = getListingFacadeLocalFindByIdParamBean().getItemid();
          getSessionScope().put("itemid", itemid);
              try {
              listingFacadeLocalFindByIdResultBean = 
              	getListingFacadeLocal().findById(itemid);
              } catch (Exception e) {
                  logException(e);
          }
          return null;
      }
      
    3. 以下の太字コードを getListingFacadeLocalFindByIdParamBean() に入力する:
      public ListingFacadeLocalFindByIdParamBean getListingFacadeLocalFindByIdParamBean() {
          if (listingFacadeLocalFindByIdParamBean == null) {
              listingFacadeLocalFindByIdParamBean = new ListingFacadeLocalFindByIdParamBean();
              Integer itemid = (Integer)getSessionScope().get("itemid");
              listingFacadeLocalFindByIdParamBean.setItemid(itemid);
          }
          return listingFacadeLocalFindByIdParamBean;
      }
      
    4. 以下の太字コードを getListingFacadeLocalFindByIdResultBean() に入力する:
      public ItemData getListingFacadeLocalFindByIdResultBean() {
          if (listingFacadeLocalFindByIdResultBean == null) {
              Integer itemid = (Integer)getSessionScope().get("itemid");
              if (itemid != null) {
              try {
              listingFacadeLocalFindByIdResultBean = 
                           getListingFacadeLocal().findById(itemid);
              } catch (Exception e) {
                  logException(e);
                  }
              }
          }
          return listingFacadeLocalFindByIdResultBean;
      }
      
    5. ListingDetailView.java を保管する。

    連携リンクを ListingSearch ポートレットに追加する

    専門用語の「連携」 ポートレットは、情報を共用することで相互に対話するために、 ページのポートレット機能を参照します。 ポータル・ページの 1 つまたは複数の連携ポートレットは、ソース・ポートレットからの変更に自動的に対処できます。 この変更はこのソース・ポートレットのアクション、またはイベントによって起動されたものです。 このイベントのターゲットであるポートレットは、ユーザーがページにあるその他のポートレットで繰り返し変更したり、 アクションを起こしたりする必要がないように対処することができます。 連携動作を実装するために使用されるメカニズムは、Click-to-Action イベント と呼ばれています。

    Click-to-Action イベントはソース・ポートレットのアイコンから起動できます。 このアイコンはアクションのためのターゲット・リストを含むポップアップ・メニューを表示します。 ユーザーは特定のターゲットを選択して、 プロパティー・ブローカーは対応するポートレット・アクションの書式で、 データをこのターゲットに送ります。 「Click-to-Action」デリバリー・メソッドを使用して、 ユーザーはデータをソース・ポートレットから 1 つまたは複数のターゲット・ポートレットに転送し、 ターゲットに対処させて結果を新しいビューに表示します。

    ListingSearch と ListingDetail ポートレット間の連携動作をセットアップする方法は、次のとおりです。

    1. Page Designer で ListingSearchView.jsp を開く。 (プロジェクト・エクスプローラーで、AuctionPortlet および WebContent フォルダーを展開して、このファイルをダブルクリックします。)
    2. ポートレット」パレット・ドロワーから「Click-to-Action 出力プロパティー」オブジェクトをドラッグして、これを {itemid} とラベル付けされたデータ・テーブルの出力フィールドにドロップする。

      注:Click-to-Action 出力プロパティー」オブジェクトを出力フィールド 上に (この前後は不可) 確実にドロップしてください。 出力フィールドは長方形で、以下のように強調表示されて見えます。
      出力フィールドにドロップされた出力プロパティー.
      (出力フィールドの選択を見るために、ダイアログ・ボックスを横方向に移動させることが必要な場合もあります。)

    3. Click-to-Action 出力プロパティーの挿入」ダイアログで、以下の方法で値を指定する: このファイルを保管する。
    4. Click-to-Action のコードが正しく追加されたことを確認するには、 「ソース」ビューを開いて、以下のコードがこのファイルに含まれていることを確認します。
      <h:outputText id="text3"
      	value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}"
      	styleClass="outputText">
      	<f:convertNumber />
      </h:outputText>
      	<c2a:encodeProperty type="itemid" 
      		namespace="http://auctionportlet" name="itemid"
      		value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}">
      	</c2a:encodeProperty>
      
      強調表示の value 属性があることに注目してください。 この属性は、出力プロパティーがこのページに正しく追加されていないと欠落します。

    上記ステップは ListingSearch をソース・ポートレットとして識別します。 続いて、ターゲット・ポートレットとして ListingDetail を使用可能にします。

    1. プロジェクト・エクスプローラーで、「AuctionPortlet」 > 「ポートレット・デプロイメント記述子」の順に展開する。 ListingDetail ポートレットのポップアップ・メニューから 「連携」 > 「ターゲットを使用可能にする」 を選択する。
    2. 連携ポートレットを使用可能にする」ダイアログで、 「データ・タイプ」フィールドに「itemid」と入力する。
    3. アクション」フィールドの横の「参照」ボタンをクリックして、 「/ListingDetailView.jsp」 > 「form1」 > 「button1」 の順に選択する。 「OK」をクリックする。
    4. 連携ポートレットを使用可能にする」ダイアログで、 「ラベル」フィールドに「詳細表示」と入力する。 「OK」をクリックする。

    Click-to-Action のソースが正しく識別されていることを検査するために、 プロジェクト・エクスプローラーのポートレット・デプロイメント記述子フォルダーに戻る。 ソース・ポートレット (ListingSearch) およびターゲット・ポートレット (ListingDetails) を示すアイコンの外観は、次のようです。
    Click-to-Action ポートレット

    リスト・ポートレットで連携動作をテストする

    ListingSearch および ListingDetail ポートレットが意図したとおりに作動することを検査するには、 これらのポートレットをテスト環境で実行する必要があります。

    このポートレットを実行する方法は、次のとおりです。

    1. プロジェクト・エクスプローラーの AuctionPortlet プロジェクトを選択して、 このポップアップ・メニューから「実行」 > 「サーバーで実行」の順に選択する。
    2. 既に WebSphere Portal v5.1 テスト環境は定義済みなので、 「サーバーの選択」ウィザードでこれを選択して、「完了」をクリックする。
    3. このポートレットがブラウザーで表示されます。 そこで、ユーザーがポータル・サイトで見ることになる入力フィールド、ボタン、およびレイアウトを見ることができます。
    4. ListingSearch ポートレットで、すべての項目をリストするにはワイルドカード検索文字の % を入力して、 「検索」ボタンをクリックする。 「実行」ボタンの下のテーブルには、検索ストリングに一致したオークション項目が表示されます。
    5. 項目 ID」列の Click-to-Action アイコン Click-to-Action アイコン をクリックして、 リスト ID を ListingDetail ポートレットに送信する。 ListingDetail ポートレットが開き、検索で探し出された項目に関する詳細情報が表示されます。

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

    これで、 『課題 2.1: ポートレット・アプリケーションを表示するための新規ポータルの作成』を始める準備が完了しました。

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