演習 1.2: Web ダイアグラムの編集
始める前に、演習 1.1: Struts プロジェクトの作成を終了しておく必要があります。
Web ダイアグラムは、Faces や Struts ベースのアプリケーションなど、Web アプリケーションのフローの視覚化と変更を
支援するファイルです。この演習では、DayOfWeek Struts プロジェクトの Web ダイアグラムを開き、ダイアグラムのグリッド設定を行って
から、ダイアグラムを編集します。以下は、Web ダイアグラムに関する用語です。
-
Web ダイアグラム・エディターとは、Web ダイアグラムを編集するためのビジュアル・エディターです。
-
ノードとは、Web ページ、Java Bean、あるいは Web アプリケーションを表すアイコンのことです。
-
接続とは、2 つのノードを接続するラインのことです。
Web ダイアグラムには、Faces、Java、Struts、および Web の 4 つの接続のカテゴリーがあります。
-
ノードや接続は、それが表すリソースが存在している場合、realized と呼ばれます。プロジェクトにリソースが存在しない場合は、unrealized と呼ばれます。
ノード、接続、および Web ダイアグラムの詳細については、Web ダイアグラムと Web ダイアグラム・エディター および
Web ダイアグラムにおける接続の作図を参照してください。
Web ダイアグラムのオープン
ユーザーが Struts 使用可能の動的 Web プロジェクトを作成すると、Web ダイアグラムは自動的に作成されますが、オープンされません。
ダイアグラムを開くには、次のステップに従ってください。
- 「プロジェクト・エクスプローラー」ビューで、「動的 Web プロジェクト」 > 「DayOfWeek」を展開します。
- 「Web ダイアグラム」をダブルクリックします。
Web ダイアグラム・エディターが「Web ダイアグラム」(diagram.gph ファイルの別名) を開きます。
グリッド設定の変更
デフォルトでは、Web ダイアグラムに位置合わせグリッドはありません。グリッドを表示し、「グリッドにスナップ」オプションをオンすると、ダイアグラムのノードがグリッドに位置合わせされ、Web ダイアグラムが編成されます。
- Web ダイアグラムで右クリックしてから、ポップアップ・メニューで「スナップ」 > 「グリッドの表示」 の
順にクリックして、位置合わせグリッドを表示します。
- もう一度 Web ダイアグラムで右クリックし、「スナップ」 > 「グリッドにスナップをオン」をクリックします。
Web ダイアグラム・ノードの作成
このセクションでは、2 つの Web ページ、フォーム Bean、およびアクション・マッピングを表す Web ダイアグラムにノードを追加します。完了すると、
Web ダイアグラムは次の図のように表示されます。
- 「パレット」ビューで、「Web パーツ」ドロワーをクリックして開きます。
- 「Web ページ」ノードを、「パレット」ビューから Web ダイアグラムの左側までドラッグします。
デフォルト名 page.jsp を選択した新規 Web ページ・ノードが、Web ダイアグラムに表示されます。
- 新規 Web ページに、次の名前を入力します。
index.jsp
ヒント: Web ダイアグラムで新規ノードを作成する場合は、そのノードの
名前が自動的に選択されるため、そのノード名をすぐに入力することができます。
それ以外の場所でクリックしても、その名前は選択されません。選択されていないノードの名前を変更
する場合は、そのノードを右クリックし、ポップアップ・メニューから「名前の変更」を選択します。
- もう一方の「Web ページ」ノードを、「パレット」ビューから Web ダイアグラムの右側までドラッグします。
- 2 番目の新規 Web ページに、次の名前を入力します。
output.jsp
- 「パレット」ビューで、「Struts パーツ」ドロワーをクリックして開きます。
- 「パレット」ビューから「アクション・マッピング」ノードを Web ダイアグラムに (直接 2 つの Web ページの間に) ドラッグします。
- 新規アクション・マッピングに、次の名前を入力します。
computeDay
これで、Web ダイアグラムは、/computeDay という名前の 2 つの Web ページ間に
アクション・マッピングを表示するようになりました。Web ダイアグラムによって、アクション・マッピングの名前にスラッシュ・マークが追加されています。
- 「パレット」ビューから「フォーム Bean」ノードを Web ダイアグラム (アクション・マッピングのすぐ下) にドラッグします。「フォーム Bean 属性」ウィンドウが開きます。
- 「フォーム Bean 属性」ウィンドウでは、「フォーム Bean 名」フィールドに、次のテキストを入力します。
dateData
「フォーム Bean のスコープ」フィールドは request の設定のままにします。
- 「OK」をクリックします。
- Web ダイアグラムを保管します。
Web ダイアグラムは、次の図のように表示されるはずです。
Web ダイアグラムでのノードの接続
Web ダイアグラムでノードが位置付けられたので、次のステップでノードを接続します。完了すると、
ダイアグラムは次の図のように表示されます。

- 「パレット」ビューで、「接続」をクリックします。
これで、マウス・カーソルが、クリックする 2 つのノード間の接続を作成するようにセットアップされました。
- Web ダイアグラムの index.jsp ノードをクリックします。
マウス・カーソルと index.jsp ノードの間にラインが描かれます。このラインは、index.jsp ページから別のノードへの接続を表します。
- /computeDay アクション・マッピング・ノードをクリックします。
index.jsp ノードから /computeDay ノードへ点線が描かれます。これは、これら 2 つのノード間の接続を示します。
- 同様に、computeDay アクション・マッピングを dateData フォーム Beanに接続します。
次に、computeDay アクション・マッピングを output.jsp ノードにローカル転送で接続します。
- 「パレット」ビューで、「接続」をクリックします。
- /computeDay アクション・マッピングをクリックします。
- output.jsp ノードをクリックします。
「接続の選択」ウィンドウが開きます。
- 「接続の選択」ウィンドウで、「ローカル転送」を展開します。
- <新規> をクリックします。
- 「OK」をクリックします。
- 新規のローカル転送の名前として次のテキストを入力します。
success
新規のローカル転送接続の命名の効果は、 新規ノードの命名の効果と同様です。接続が確立すると、その名前が選択されて即時に入力できるようになります。
それ以外の場所でクリックすると、接続は選択されません。したがって、接続を右クリックして、ポップアップ・メニュー
から「名前変更」を選択する必要があります。
最後に、computeDay アクション・マッピングをグローバル転送で index.jsp ノードに接続します。
- 「パレット」ビューで、「接続」をクリックします。
- computeDay アクション・マッピングをクリックします。
- index.jsp ノードをクリックします。
「接続の選択」ウィンドウが開きます。
- 「グローバル転送」を展開します。
- 「グローバル転送」の下で、<新規>をクリックします。
- 「OK」をクリックします。
- 新規のグローバル転送の名前として次のテキストを入力します。
failure
- Web ダイアグラムを保管します。
Web ダイアグラムは、次の図のように表示されるはずです。

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