特集
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）。

hitachiImage9.gif

画面8■「データ項目の作成」アイコンをクリックします


5. 標準で「dataitem」と呼ぶインタフェースが生成されます。インタフェースを編集する時は、編集したいインタフェース名を選択した状態で、Dreamweaverのメニューから「Page Designer」→「データの編集」を選択してください（画面9）。

hitachiImage10.gif

画面9■インタフェース名とデータ名は必要に応じて変更します。screenFlagのようにセッション引き継ぎを行う設定では、セッション間で値を保持することができます（この設定を行うと「セッション」のフィールドに「*」が表示されます）


6. 次にオブジェクトの作成を行います。この画面では、テキストボックス3つと、非表示フィールド1つを作成します。マウスカーソルを「doAdd」ボタンの左に置き、「Page Designer」→「挿入」→「テキストフィールド」を選択します。「所属」、「名前」、「電話番号」の3つ分が必要になるので、テキストフィールドも3つ作成します。

　また、入力処理（submitボタンをクリックした時）か、出力処理（画面表示を行っている時）を行っているかの判定用非表示フィールド（hiddenタグ）も作成します（画面10）。

hitachiImage11.gif

画面10■オブジェクトを配置し、レイアウトを整えます


7. 次は、オブジェクトとインタフェースをひとつずつ関連付けします。関連付けるオブジェクトを選択し、「Page Designer」→「データの関連」を選択します。続いて「データの関連」パネルで、「入力データ制御項目」を選択した状態で、左上の青いボタンをクリックしてください。作成したインタフェースの一覧が表示されます。次にインタフェースを選択し、「選択」をクリックするとインタフェースとオブジェクトを関連付けることができます。

8. 最後にページ全体のプロパティ設定を行います。ヘッドコンテンツアイコンをクリックすると、画面下部に「プロパティ」パネルが表示されます。続いて、画面連携Beanのプロパティを表5のように設定します。

表5■画面連携Beanのプロパティ
入力項目
値
説　　　明
クラス名 denwa.screen.AddBean JSPと１対１で対応して画面遷移制御プログラムとの連携を担う画面連携Beanのクラス名を指定します。
ID add JSP内で画面連携Beanを扱う変数名を指定します。
スコープ requestを選択 JSPで使用されるJavaBeanの有効範囲を指定します。
業務Beanクラス名称 denwa.logic.AddAP 業務処理プログラムの呼び出しを担う業務アクセスBeanのクラス名を指定します。
業務Beanメソッド名 execute 業務処理プログラムを起動するメソッド名を指定します。

　Page Designerで自動生成される画面連携Beanは、ここで指定した名前(denwa.screenパッケージのAddBeanクラス)となります。また、業務Beanクラスとは、この一覧表示画面(add)に遷移してきたときや、この画面からsubmitしたときに呼び出されるクラスです。業務Beanで指定したクラスのメソッドに業務ロジックを記述します。executeメソッドの宣言は次のようになります（リスト04）。

リスト04■ListBean.java
public void execute(ListBeanJAVA bean) throws RuntimeException {
:
:
}

　以上の作業を各画面に対して行っていきます。ここまでで目に触れて操作をするインタフェース部（Webページ）ができあがりました。

前のページ | 1 2 3 4 5 6 7 | 次のページ

[清野泰正，ITmedia]

Copyright © ITmedia, Inc. All Rights Reserved.