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

これから作る画面

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

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

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

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

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

画面の作成手順

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

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

画面タイトルの作成

それでは代表的な部分について、どのように作っていくかを説明していきましょう。まず画面タイトルについては、デザインビューに表示したい文字列を直接書き込み、文字の大きさや色などの属性を指定すれば作成完了です。

業務の概要を説明するメッセージの表示

業務の概要を説明するメッセージは変数に設定された内容を表示します。このためJSPでは、変数の値を取り出すメソッドと、それを評価して結果を出力する記述をします。手順は次のとおりです。

• ①まず、MyEclipseのデザインビューまたはソースビューでメッセージを表示したい位置にカーソルを合わせます
• ②スニペットで「<%=..%> expression」（⁠式を評価して結果を出力する指定）をダブルクリックします
• ③ソースビューに「<%= %>」が追加されるので、ここにメッセージの設定されている変数“⁠bank.msg⁠”から値を取り出すメソッドを追加し、「⁠<%=request.getAttribute("bank.msg")%>」と変更します。

これでメッセージが表示できるようになります。

表の作成

表を作りたい位置にカーソルを合わせ、パレットの［テーブル］をクリックします。表の列数や行数などを指定するダイアログが表示されるので、この例では2行3列と指定します。そうすると、デザインビューに表が作り出されます。表の各セルに表示したい内容を設定します。さらに表の属性である、色や配置などを必要に応じて設定すれば表は完成します。

テキスト入力欄の作成

ユーザIDと取引額を入力するためのテキスト入力欄を作成します。テキスト入力欄を作成したい位置にカーソルを合わせ、パレットの［テキスト・フィールド］をクリックします。表示されるダイアログに従って変数名やテキスト入力欄に画面利用者が入力できる文字数などを設定します。さらに、細かい属性を必要に応じて指定します。

このようにパレットで画面の部品を選択して、デザインビューに表示させながら、細かい設定をダイアログで指定したり、ソースビューでコードを追加したりして画面を作成していきます。残りの項目やエラー画面も同じ要領で作っていきます。

次回は、アプリケーション全体を制御するサーブレットの作成について解説します。

Cosminexusでホッと一息 ～Cafe Cosminexus

URL：http://www.cosminexus.com