特集
2004/01/20 18:00:00 更新
特集:第3回 サンプルで学ぶCosminexusによる業務指向スタイル開発の流れ (5/7)
Webページレイアウト
WebページレイアウトはPage Designerを使用します。画面遷移図の作成を終えたら、各画面ごとのページレイアウトに進むのです。段階的に開発が進んでいく過程を感じ取ってください。それでは、追加画面(add)のWebページレイアウトを行ってみましょう。
1. Visio上のadd画面アイコンを右クリックし、「画面編集」を選択します。
2. HTMLファイルのひな形を生成するかを聞かれるので、「生成する」をクリックします。
3. 「登録」画面のひな型ファイルが、拡張子判別によってHTML作成ソフトのMacromedia Dreamweaver(以下、Dreamweaver)で起動されます。
4. メニューから「Page Designer」→「インタフェース定義」を選択するとパネルが表示されます。ここで「データ項目の作成」アイコンをクリックします(画面8)。
5. 標準で「dataitem」と呼ぶインタフェースが生成されます。インタフェースを編集する時は、編集したいインタフェース名を選択した状態で、Dreamweaverのメニューから「Page Designer」→「データの編集」を選択してください(画面9)。
6. 次にオブジェクトの作成を行います。この画面では、テキストボックス3つと、非表示フィールド1つを作成します。マウスカーソルを「doAdd」ボタンの左に置き、「Page Designer」→「挿入」→「テキストフィールド」を選択します。「所属」、「名前」、「電話番号」の3つ分が必要になるので、テキストフィールドも3つ作成します。
また、入力処理(submitボタンをクリックした時)か、出力処理(画面表示を行っている時)を行っているかの判定用非表示フィールド(hiddenタグ)も作成します(画面10)。
7. 次は、オブジェクトとインタフェースをひとつずつ関連付けします。関連付けるオブジェクトを選択し、「Page Designer」→「データの関連」を選択します。続いて「データの関連」パネルで、「入力データ制御項目」を選択した状態で、左上の青いボタンをクリックしてください。作成したインタフェースの一覧が表示されます。次にインタフェースを選択し、「選択」をクリックするとインタフェースとオブジェクトを関連付けることができます。
8. 最後にページ全体のプロパティ設定を行います。ヘッドコンテンツアイコンをクリックすると、画面下部に「プロパティ」パネルが表示されます。続いて、画面連携Beanのプロパティを表5のように設定します。
表5■画面連携Beanのプロパティ
|
Page Designerで自動生成される画面連携Beanは、ここで指定した名前(denwa.screenパッケージのAddBeanクラス)となります。また、業務Beanクラスとは、この一覧表示画面(add)に遷移してきたときや、この画面からsubmitしたときに呼び出されるクラスです。業務Beanで指定したクラスのメソッドに業務ロジックを記述します。executeメソッドの宣言は次のようになります(リスト04)。
リスト04■ListBean.java
public void execute(ListBeanJAVA bean) throws RuntimeException { : : } |
以上の作業を各画面に対して行っていきます。ここまでで目に触れて操作をするインタフェース部(Webページ)ができあがりました。
[清野泰正,ITmedia]
Copyright © ITmedia, Inc. All Rights Reserved.