目指せ! Webアプリケーションエンジニア

第6回 アプリケーションの画面を作る

この記事を読むのに必要な時間:およそ 1 分

前回は,アプリケーションを作るための手順とプロジェクトの作成方法について学びました。今回は,画面の作成方法について解説します。

これから作る画面

さっそくですが,前回の連載で紹介したBankアプリケーションの画面を作成してみましょう。まず画面の遷移を確認します図1)⁠BankアプリケーションのURLを指定して呼び出すと,業務画面が表示されます。業務画面で指定すべき項目を入力し送金ボタンを押すと,正常に処理が行われた場合は,結果が同じ業務画面に表示されます。一方,処理中にデータベースのエラーなどを検出した場合はエラー画面が表示されます。

図1 Bank業務の画面遷移

図1 Bank業務の画面遷移

業務画面の仕様を図2に示します。

図2 業務画面の仕様

図2 業務画面の仕様

業務画面の構成要素を整理すると,次の表1のようになります。

表1 業務画面の構成要素

構成要素種別内容
画面のタイトル表示固定の文字列
画面の区切り表示罫線
業務の概要を説明するメッセージ表示変数に設定された文字列を表示する
ユーザIDと口座残高の一覧を表示する表表示データベースの検索結果をメソッドの戻り値を使用して表示する
業務の手順を説明するメッセージ表示固定の文字列
ユーザIDと取引額を入力するテキスト入力欄入力ユーザIDと取引額を入力すると変数に値が設定される
処理実行を促す送金ボタン入力クリックするとリクエストの送信と同時にアプリケーションにデータが渡る

画面とアプリケーションの関係

画面の表示が動的に変化する部分は,変数やメソッドでアプリケーションと表示内容をやり取りします。ここでは表2に示す変数・メソッドを使用します。

表2 動的に変化する構成要素の詳細

構成要素やり取りに使用する
変数・メソッド
値の
設定者
値の参照者説明
業務の概要を説明するメッセージbank.msgサーブレットJSPサーブレットは処理の結果により異なるメッセージを変数に設定。JSPは変数を参照してメッセージを画面に表示
一覧表示用の表ユーザID
当座預金
普通預金
item.getID()
item.getCHECKING()
item.getSAVING()
EJBJSPEJBはデータベースの検索結果をリストに保持。JSPはリストからデータを取得するメソッドを呼び出して戻り値を表示
テキスト入力欄ユーザID
取引額
UserID
Money
サーブレットEJBサーブレットは入力された値を変数に設定。EJBは変数を参照して送金処理を実行

画面の作成手順

それではいよいよBankアプリケーションの業務画面を作っていきます。画面はMyEclipseを使ってJSPで作成します。まず空の新規JSPを作り,次に画面レイアウトをデザインしていきます。新規にJSPを作成するときは「JSP(拡張テンプレート)⁠ウィザードを使います。このウィザードでは,JSPのファイル名や利用するテンプレートの名前などを図3で示す設定画面で指定します。

図3 新規JSPの作成例

図3 新規JSPの作成例

次に,画面のレイアウトを作成していきます。レイアウトの作成には,表示イメージとソースコードのどちらでも編集でき,デザイン部品もそろっている「MyEclipseビジュアルJSPデザイナー」を使います。MyEclipseビジュアルJSPデザイナーでJSPファイルを編集している例を図4に示します。また,JSP編集画面の各フレームの役割を表3に示します。

図4 MyEclipseのJSP編集画面例

図4 MyEclipseのJSP編集画面例

表3 MyEclipseの各フレームの意味

フレーム役割
エディタエリアソースファイルなどの編集エリア。編集する対象によって表示内容が異なる。MyEclipseビジュアルJSPデザイナーの場合は,ここにデザインビュー,ソースビュー,パレットが表示される
デザインビュー表示イメージで画面を編集するエリア。表示イメージとソースコードは常に同期がとられるため,デザインビューで編集するとソースコードも合わせて変更され,ソースビューに表示される
ソースビューソースコードの編集エリア。ソースビューで編集した内容は,デザインビューにも反映される
パレットデザイン部品
スニペットソースコードの部品

著者プロフィール

友成文隆(ともなりふみたか)

株式会社日立製作所

http://www.hitachi.co.jp/cosminexus/

コメント

コメントの記入