課題 1.2: ポートレット開発の準備およびアプリケーション・フローの定義

この課題を始める前に、『課題 1.1: セットアップ』を完了していなければなりません。

前の課題で、このチュートリアルで開発されるポートレットを入れる AuctionPortlet プロジェクトを作成しました。 ユーザー・インターフェースを作成して、特定の Faces ポートレットにデータを追加する準備をするために、 Web ダイアグラム・エディターを使用して、アプリケーション・フローを定義します。 Web ダイアグラムはアプリケーション・フローを定義する唯一のメソッドであり、 Faces ベースのポートレット・アプリケーションをビジュアル開発する場合に特に適しています。

アプリケーション・フローを構成するための Web ダイアグラムを作成する

Web ダイアグラムとは、Faces または Struts ベースのポートレット・アプリケーションといった Web アプリケーションのフローを視覚化して変更することに役立つ一種のファイルです。 Web ダイアグラム・エディターは、Web ダイアグラムの編集用のビジュアル・エディターです。 ノード、接続、およびその他のコンポーネントを Web ダイアグラムに追加する場合、 このことを、一般的に、ダイアグラムを作図する と言います。

Web ダイアグラムは、ノード およびノード間の接続 で作られます。 ノードとは、ポートレット JSP ページ、または JavaTM Bean といったリソースを表すアイコンです。 リソースが存在する場合、そのノードは実現 ノードと呼ばれ、 リソースが存在しない場合、そのノードは未実現 ノードと呼ばれます。 実現ノードは、太字体の名前を添えて色付きで表示されます。 未実現ノードは、グレー・アイコンで表示されます。

ここでは、3 つの JSP ノードを Web ダイアグラムに追加します。 その中の 1 つはマスター・ノードであると見なされます。 それによって、2 つのリンクされた詳細ノードへのナビゲーションが可能になります。

  1. オークション・ポートレット・プロジェクトを作成したときに、 ウィザードは自動的に diagram.gph と呼ばれるデフォルトの Web ダイアグラム・ファイルを作成しました。 プロジェクト・エクスプローラーで、動的 Web プロジェクト・フォルダーと AuctionPortlet フォルダーを展開して、 「Web ダイアグラム」をダブルクリックします。

    Web ダイアグラム・エディターの使用方法に関する指示が付いているファイルが、編集ペインに開きます。
    新規 Web ダイアグラム

  2. ワークスペースの右側にあるアクティブ・ビューはパレットであり、 そこには Web ダイアグラムにドロップできるオブジェクトを持っている多くのドロワーがあります。 このパレットから、「Web ページ」オブジェクトを UserAdmin.gph ファイルへ追加します。 パレットは、「スティッキー」ドラッグ・アンド・ドロップ動作を提供します。 この意味は、パレットにあるオブジェクトをクリックした後、 ドラッグ操作の間中マウス・ボタンを押し続ける必要はないということです。 カーソルを Web ダイアグラムへ移動して、もう一度クリックしてオブジェクトをドロップするだけで済みます。

    先頭ノードを作成するには、UserAdminView.jsp (AuctionPortlet プロジェクトで作成された 初期 JSP ビュー・ページ) をプロジェクト・エクスプローラーからエディターにドラッグします。 このファイルは既に作成されていますので、実現オブジェクトとして表示されます。

  3. Web ページ」オブジェクトをエディターにドラッグ・アンド・ドロップします。 Web ページの名前を UserAdminCreate.jsp に変更します。
  4. 直前のステップを繰り返して、UserAdminUpdate.jsp と呼ばれる Web ページを作成します。

    注: このノードはドラッグして位置を変更することができます。

  5. 次に、Web ページ・ノード間の接続を作成して、ポートレットでのデータのフローを指定します。
    1. UserAdminView.jsp ポップアップ・メニューから「接続」を選択する。 UserAdminView.jsp からこの接続を UserAdminCreate.jsp ノードにドラッグする。
    2. 接続の選択」ダイアログから「Web ページ・リンク」を選択して、「OK」をクリックする。
    3. UserAdminCreate.jsp ノード・ポップアップ・メニューから「接続」を選択して、 この接続を元の UserAdminView.jsp ノードへドラッグする。
    4. 接続の選択」ダイアログから「Faces 結果」を選択して、「OK」をクリックする。
    5. 強調表示された <new> の上に view と入力して、新規接続に名前を付ける。
    6. UserAdminView.jsp ポップアップ・メニューから「接続」を選択する。 UserAdminView.jsp からこの接続を UserAdminUpdate.jsp ノードにドラッグする。
    7. 接続の選択」ダイアログから「Faces 結果」を選択して、「OK」をクリックする。
    8. 強調表示された <new> の上に update と入力して、新規接続に名前を付ける。
    9. UserAdminUpdate.jsp ノード・ポップアップ・メニューから「接続」を選択して、 この接続を元の UserAdminView.jsp ノードへドラッグする。
    10. 接続の選択」ダイアログから「Faces 結果」を選択して、「OK」をクリックする。
    11. 強調表示された <new> の上に view と入力して、新規接続に名前を付ける。
    12. Web ダイアグラムを保管する。
    次の画像は、このダイアグラムの外観です。
    Web ダイアグラム・スケルトン

定義されたリンクは正しいリンケージの付いたポートレット・ページが事前準備されていますので、 ユーザー開始データはアプリケーションを正しく流れます。 UserAdminView ページがユーザーの作成または更新アクションを要求するときに、適切な書式が開きます。 必要な情報がこれらの書式で実行依頼されると、 この新規ユーザー情報は UserAdmin ポートレットの照会機能で使用可能になります。

これで、『課題 1.3: UserAdmin ページの開発』を始める準備が完了しました。

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