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

これから作る画面

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

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

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

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

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

画面の作成手順

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

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