演習 1.2: Web ダイアグラムの編集

始める前に、演習 1.1: Struts プロジェクトの作成を終了しておく必要があります。

Web ダイアグラムは、Faces や Struts ベースのアプリケーションなど、Web アプリケーションのフローの視覚化と変更を 支援するファイルです。この演習では、DayOfWeek Struts プロジェクトの Web ダイアグラムを開き、ダイアグラムのグリッド設定を行って から、ダイアグラムを編集します。以下は、Web ダイアグラムに関する用語です。

ノード、接続、および Web ダイアグラムの詳細については、Web ダイアグラムと Web ダイアグラム・エディター および Web ダイアグラムにおける接続の作図を参照してください。

Web ダイアグラムのオープン

ユーザーが Struts 使用可能の動的 Web プロジェクトを作成すると、Web ダイアグラムは自動的に作成されますが、オープンされません。 ダイアグラムを開くには、次のステップに従ってください。

  1. 「プロジェクト・エクスプローラー」ビューで、「動的 Web プロジェクト」 > 「DayOfWeek」を展開します。
  2. 「Web ダイアグラム」をダブルクリックします。 Web ダイアグラム・エディターが「Web ダイアグラム」(diagram.gph ファイルの別名) を開きます。

グリッド設定の変更

デフォルトでは、Web ダイアグラムに位置合わせグリッドはありません。グリッドを表示し、「グリッドにスナップ」オプションをオンすると、ダイアグラムのノードがグリッドに位置合わせされ、Web ダイアグラムが編成されます。

  1. Web ダイアグラムで右クリックしてから、ポップアップ・メニューで「スナップ」 > 「グリッドの表示」 の 順にクリックして、位置合わせグリッドを表示します。
  2. もう一度 Web ダイアグラムで右クリックし、「スナップ」 > 「グリッドにスナップをオン」をクリックします。

Web ダイアグラム・ノードの作成

このセクションでは、2 つの Web ページ、フォーム Bean、およびアクション・マッピングを表す Web ダイアグラムにノードを追加します。完了すると、 Web ダイアグラムは次の図のように表示されます。

入力 JSP ファイル、出力 JSP ファイル、dateData フォーム Bean、および computeDay アクション・マッピングを含む未実現の Web ダイアグラムのイメージ

  1. 「パレット」ビューで、「Web パーツ」ドロワーをクリックして開きます。
  2. 「Web ページ」ノードを、「パレット」ビューから Web ダイアグラムの左側までドラッグします。

    デフォルト名 page.jsp を選択した新規 Web ページ・ノードが、Web ダイアグラムに表示されます。

  3. 新規 Web ページに、次の名前を入力します。

    index.jsp

    ヒント: Web ダイアグラムで新規ノードを作成する場合は、そのノードの 名前が自動的に選択されるため、そのノード名をすぐに入力することができます。 それ以外の場所でクリックしても、その名前は選択されません。選択されていないノードの名前を変更 する場合は、そのノードを右クリックし、ポップアップ・メニューから「名前の変更」を選択します。

  4. もう一方の「Web ページ」ノードを、「パレット」ビューから Web ダイアグラムの右側までドラッグします。
  5. 2 番目の新規 Web ページに、次の名前を入力します。

    output.jsp

  6. 「パレット」ビューで、「Struts パーツ」ドロワーをクリックして開きます。
  7. 「パレット」ビューから「アクション・マッピング」ノードを Web ダイアグラムに (直接 2 つの Web ページの間に) ドラッグします。
  8. 新規アクション・マッピングに、次の名前を入力します。

    computeDay

    これで、Web ダイアグラムは、/computeDay という名前の 2 つの Web ページ間に アクション・マッピングを表示するようになりました。Web ダイアグラムによって、アクション・マッピングの名前にスラッシュ・マークが追加されています。

  9. 「パレット」ビューから「フォーム Bean」ノードを Web ダイアグラム (アクション・マッピングのすぐ下) にドラッグします。「フォーム Bean 属性」ウィンドウが開きます。
  10. 「フォーム Bean 属性」ウィンドウでは、「フォーム Bean 名」フィールドに、次のテキストを入力します。

    dateData

    「フォーム Bean のスコープ」フィールドは request の設定のままにします。

  11. 「OK」をクリックします。
  12. Web ダイアグラムを保管します。

    Web ダイアグラムは、次の図のように表示されるはずです。

    入力 JSP ファイル、出力 JSP ファイル、dateData フォーム Bean、および computeDay アクション・マッピングを含む未実現の Web ダイアグラムのイメージ

Web ダイアグラムでのノードの接続

Web ダイアグラムでノードが位置付けられたので、次のステップでノードを接続します。完了すると、 ダイアグラムは次の図のように表示されます。

それぞれ Struts のアクション・マッピングに接続中の、入力 JSP ファイル、出力 JSP ファイル、dateData フォーム Bean を含む未実現の Web ダイアグラムのイメージ

  1. 「パレット」ビューで、「接続」をクリックします。

    これで、マウス・カーソルが、クリックする 2 つのノード間の接続を作成するようにセットアップされました。

  2. Web ダイアグラムの index.jsp ノードをクリックします。

    マウス・カーソルと index.jsp ノードの間にラインが描かれます。このラインは、index.jsp ページから別のノードへの接続を表します。

  3. /computeDay アクション・マッピング・ノードをクリックします。

    index.jsp ノードから /computeDay ノードへ点線が描かれます。これは、これら 2 つのノード間の接続を示します。

  4. 同様に、computeDay アクション・マッピングを dateData フォーム Beanに接続します。

    次に、computeDay アクション・マッピングを output.jsp ノードにローカル転送で接続します。

  5. 「パレット」ビューで、「接続」をクリックします。
  6. /computeDay アクション・マッピングをクリックします。
  7. output.jsp ノードをクリックします。 「接続の選択」ウィンドウが開きます。
  8. 「接続の選択」ウィンドウで、「ローカル転送」を展開します。
  9. <新規> をクリックします。
  10. 「OK」をクリックします。
  11. 新規のローカル転送の名前として次のテキストを入力します。

    success

    新規のローカル転送接続の命名の効果は、 新規ノードの命名の効果と同様です。接続が確立すると、その名前が選択されて即時に入力できるようになります。 それ以外の場所でクリックすると、接続は選択されません。したがって、接続を右クリックして、ポップアップ・メニュー から「名前変更」を選択する必要があります。

    最後に、computeDay アクション・マッピングをグローバル転送で index.jsp ノードに接続します。

  12. 「パレット」ビューで、「接続」をクリックします。
  13. computeDay アクション・マッピングをクリックします。
  14. index.jsp ノードをクリックします。 「接続の選択」ウィンドウが開きます。
  15. 「グローバル転送」を展開します。
  16. 「グローバル転送」の下で、<新規>をクリックします。
  17. 「OK」をクリックします。
  18. 新規のグローバル転送の名前として次のテキストを入力します。

    failure

  19. Web ダイアグラムを保管します。

    Web ダイアグラムは、次の図のように表示されるはずです。

    それぞれ Struts のアクション・マッピングに接続中の、入力 JSP ファイル、出力 JSP ファイル、dateData フォーム Bean を含む未実現の Web ダイアグラムのイメージ

これで、演習 1.3: フォーム Beanの作成と編集を開始する準備ができました。

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