NetBeans E コマースのチュートリアル - ページビューおよびコントローラサーブレットの準備
このチュートリアルでは、IDE でプロジェクトファイルを作成する方法を示し、HTML および CSS の開発に使用できる機能の一部について紹介します。必要なプロジェクトファイルを作成したあと、アプリケーションのフロントエンドを編成していきます。つまり、JSP ファイルをプロジェクト構造内の適切な場所に配置し、すべてのビューに適用されるヘッダーとフッターを作成し、受信する要求を処理するコントローラサーブレットを設定します。
このユニットでは、アプリケーションの Web 配備記述子 (web.xml ファイル) も作成します。この配備記述子を使用して構成情報を指定し、配備時にサーバーでその情報を読み取らせることができます。Java EE 6 に含まれている「Servlet 3.0 仕様」では、XML の代わりにクラス注釈を使用できますが、アプリケーションの特定の要素を構成するために引き続き配備記述子が必要になる場合があります。具体的には、このユニットではヘッダーおよびフッターの指令を追加し、これらを適用するファイルを指定します。
このチュートリアルの目標の 1 つは、アプリケーション設計で指定されたビューに対応する JSP ページを作成することです。ページモックアップとプロセスフロー図を再度参照しながら、ページレイアウトを実装していきます。最初に、モックアップに従って、すべての表示コンポーネントと機能コンポーネントのプレースホルダを作成します。このユニットでは、開始ページのレイアウトを実装する手順を示します。説明された手順を適用して自分でほかのページを作成することも、すべてのページの完全なレイアウトが含まれるプロジェクトスナップショット 1 をダウンロードすることもできます。
このチュートリアルで構築するアプリケーションのライブデモを、「NetBeans E コマースのチュートリアルのデモアプリケーション」で確認できます。
注:
- NetBeans IDE が正常に動作するには、JDK (Java Development Kit) が必要です。上記に一覧表示されているいずれのリソースもインストールされていない場合は、最初に JDK をダウンロードしてインストールするようにしてください。
- NetBeans IDE の Java バンドル版には、このチュートリアルで構築するアプリケーションに必要な Java Web および EE テクノロジが含まれています。
- NetBeans IDE の Java バンドル版には、このチュートリアルに必要な GlassFish サーバーも含まれています。GlassFish サーバーを別個にダウンロードすることもできますが、NetBeans ダウンロードに付属するバージョンを使用すると、IDE に自動的に登録されるので便利です。
プロジェクトファイルの作成
プロジェクトの新しいファイルを作成するには、IDE のファイルウィザードにアクセスします。「新規ファイル」(
) ボタンをクリックするか、Ctrl-N (Mac の場合は ⌘-N) を押します。あるいは、「プロジェクト」ウィンドウで、新しいファイルを格納するフォルダノードを右クリックし、「新規」>[ファイルの種類] を選択します。次の副節では、プロジェクトの JSP ページとスタイルシートを作成します。
JSP ページの作成
プロジェクトの最初の作業として、プロセスフロー図に表示されたビューに対応する JSP ページを作成します。
IDE で生成された index.jsp ページがこのプロジェクトの開始ページになります。残りの 4 つのビューに対応する JSP ページを作成し、今のところはプロジェクトの webroot に index.jsp とともに配置します。
- 「新規ファイル」() ボタンをクリックして「ファイル」ウィザードを開きます。
- 「Web」カテゴリから「JSP」を選択し、「次へ」をクリックします。
- ファイルに「
category」という名前を付けます。「場所」フィールドは「Web ページ」に設定されています。これは、このファイルがプロジェクトの webroot に作成されることを示しています。これはプロジェクトの web フォルダに対応します。これはあとで IDE の「ファイル」ウィンドウで確認できます。
- 「完了」をクリックします。IDE によって新しい JSP ページが生成され、エディタで開きます。
- 上記の手順 1 ～ 4 を繰り返して、残りの
cart.jsp、checkout.jsp、confirmation.jsp ページを作成します。
終了すると、「プロジェクト」ウィンドウは次のようになります。
スタイルシートの作成
アプリケーションに固有のすべてのスタイルを含む CSS ファイルを作成します。
- 「プロジェクト」ウィンドウで「Web ページ」ノードを右クリックし、「新規」>「フォルダ」を選択します。
- 「新規フォルダ」ウィザードでフォルダに「
css」という名前を付け、「完了」をクリックします。
- 新しい
css フォルダを右クリックし、「新規」>「階層式スタイルシート」を選択します。(「階層式スタイルシート」が表示されない場合は、「その他」を選択します。「ファイル」ウィザードで、「Web」カテゴリを選択してから「階層式スタイルシート」を選択し、「次へ」をクリックします。)
- スタイルシートに「
affablebean」という名前を付け、「完了」をクリックします。
終了すると、「プロジェクト」ウィンドウに affablebean.css ファイルが表示されます。
HTML および CSS の内容の実装
この節の目的は、指定されたページモックアップに従うようにページビューをデザインすることです。プロジェクト開発のあとの段階で、これらを足場として利用して動的コンテンツを挿入できます。そのためには、IDE の HTML エディタと CSS エディタ、およびいくつかの CSS サポートウィンドウを使用します。
ブラウザの互換性に関する注意: このチュートリアルでは Firefox 3 を使用します。ページビューのマークアップについて、最近のほかのブラウザとの互換性は保証されません。当然ながら、フロントエンドの Web テクノロジ (HTML、CSS、JavaScript) を扱うときには、Web サイトの訪問者が使用していると想定されるブラウザの種類とバージョンで (主に Internet Explorer、Firefox、Safari、Chrome、Opera)、Web ページが正しく表示されるように手段を講じる必要があります。IDE で作業する際、アプリケーションをどのブラウザで開くかを設定できます。「ツール」>「オプション」(Mac の場合は「NetBeans」>「設定」) を選択し、「オプション」ウィンドウの「一般」タブの「Web ブラウザ」ドロップダウンリストから、使用するブラウザを選択します。IDE は、デフォルトの場所にインストールされているブラウザを検出します。コンピュータにインストールされているブラウザが表示されない場合は、「編集」ボタンをクリックし、ブラウザを手動で登録してください。
通常、Web ページの表示の準備は対話型の作業であり、顧客からの定期的なフィードバックによって調整していくことになります。次の手順では、IDE で提供されている機能について紹介し、開始ページのモックアップを例にとって使用方法を示します。
- 「プロジェクト」ウィンドウで「
index.jsp」をダブルクリックして、エディタで開きます。
- 最初に、ページの主要な領域の
<div> タグを作成します。5 つのタグを一度に作成できます。そのうちの 4 つは主要領域 (ヘッダー、フッター、左の列、および右の列) のタグ、5 つ目はほかの領域を格納するためのタグです。<body> タグ内の内容をすべて削除し、次の内容で置き換えます。新しいコードはボールドで表示しています。
<body>
<div id="main">
<div id="header">
header
</div>
<div id="indexLeftColumn">
left column
</div>
<div id="indexRightColumn">
right column
</div>
<div id="footer">
footer
</div>
</div>
</body>
- ページの head にスタイルシートへの参照を追加し、タイトルテキストを変更します。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/affablebean.css">
<title>The Affable Bean</title>
</head>
affablebean.css スタイルシートをエディタで開きます。作成した <div> ID のスタイル規則を作成していきます。
width および height プロパティーを使用して、各領域の空間を作成します。background プロパティーを使用して、ページを表示したときに各領域を見分けられるようにします。- ページの 4 つの領域を水平方向に中央にそろえるために、
margin: 20px auto を body 規則を追加できます (20px は上下の余白に適用され、auto は左右均等に余白を作成します)。次に、左の列と右の列に float: left を追加します。
- フッターには
clear: left が必要です。これは、フッターの上ボーダーが、フッターより上にあるすべての左浮動領域 (つまり、左の列と右の列) の下ボーダーのあとに表示されるようにするためです。
body {
font-family: Arial, Helvetica, sans-serif;
width: 850px;
text-align: center;
margin: 20px auto;
}
#main { background: #eee }
#header {
height: 250px;
background: #aaa;
}
#footer {
height: 60px;
clear: left;
background: #aaa;
}
#indexLeftColumn {
height: 400px;
width: 350px;
float: left;
background: #ccc;
}
#indexRightColumn {
height: 400px;
width: 500px;
float: left;
background: #eee;
}- IDE のメインツールバーにある「プロジェクトを実行」(
) ボタンをクリックします。変更されたプロジェクトファイルが自動的に保存され、プロジェクト内の Java コードがすべてコンパイルされます。プロジェクトがパッケージ化されて GlassFish に配備され、ブラウザが開いて開始ページの現在の状態が表示されます。
- 次に、4 つの各表示領域内にページコンポーネントのプレースホルダを作成していきます。ヘッダーから始めます。開始ページのモックアップを確認すると、ヘッダーには次のコンポーネントが含まれている必要があります。
- ロゴ
- ロゴテキスト
- ショッピングカートウィジェット
- 言語の切り替え
index.jsp ファイルに次の変更を加えます。新しいコードはボールドで表示しています。
<div id="header">
<div id="widgetBar">
<div class="headerWidget">
[ language toggle ]
</div>
<div class="headerWidget">
[ shopping cart widget ]
</div>
</div>
<a href="#">
<img src="#" id="logo" alt="Affable Bean logo">
</a>
<img src="#" id="logoText" alt="the affable bean">
</div>
上記のコードでは、<div id="widgetBar"> 要素を使用して言語の切り替えとショッピングカートウィジェットを追加しています。
NetBeans HTML エディタサポート
エディタでの作業では、IDE の HTML サポートを利用できます。タグ、属性、属性値、およびテキストを区別できるようにする一般的な構文の強調表示だけでなく、ほかにも多くの機能があります。
タグと属性を入力するときに、Ctrl- スペースキーを押すと、コード補完とドキュメントサポートを呼び出せます。IDE では、選択可能な候補のリストに加え、選択した項目の定義とコード例を示すドキュメントウィンドウも表示されます。
IDE はコード内のエラーを検出し、警告、エラーメッセージ、場合によっては候補を表示します。警告メッセージは黄色、エラーは赤で表示されます。指定された領域の上にポインタを置くと、ツールチップにメッセージが表示されます。
さまざまなキーボードショートカットも利用できます。メインメニューから「ヘルプ」>「キーボードショートカットカード」を選択します。
- スタイルシートで、新しい ID およびクラスの規則を作成します。次の規則を
header 規則の下に追加します。新しいコードはボールドで表示しています。
#header {
height: 250px;
background: #aaa;
}
#logo {
height: 155px;
width: 155px;
float: left;
margin-left: 30px;
margin-top: -20px;
}
#logoText {
float: left;
margin: 20px 0 0 70px;
/* font styles apply to text within alt tags */
font-family: 'American Typewriter', Courier, monospace;
font-size: 50px;
color: #333;
}

#widgetBar {
height: 50px;
width: 850px;
float: right;
background: #ccc;
}
.headerWidget {
width: 194px;
margin: 20px 2px;
font-size: small;
float: right;
line-height: 25px;
background: #aaa;
}
logo 規則では margin-left および margin-top プロパティーを適用して、このコンポーネントをページに配置します。
よくわからないプロパティーが上記のコードに含まれている場合は、そのプロパティーの上にカーソルを置き、Ctrl- スペースキーを押してドキュメントサポートのポップアップウィンドウを呼び出せます。
プロパティーがページにどのような影響を与えているかを確認するには、そのプロパティーをコメントアウトしてから、ブラウザでページを更新します。コードをコメントアウトするには、行の上にカーソルを置くかコードブロックを強調表示してから、Ctrl-/ キー (Mac の場合は ⌘-/) を押します。
index.jsp および affablebean.css ファイルを保存 (Ctrl-S、Mac の場合は ⌘-S) してから、ブラウザに切り替えてページを更新し、現在の状態を確認します。
注: Java Web プロジェクトに対しては、IDE の「保存時に配備」機能が自動的に有効になります。つまり、ファイルを保存するたびに、ファイルが自動的にコンパイルされ (Java クラスまたは JSP ページの場合)、プロジェクトが新たにパッケージ化されてサーバーに配備されます。したがって、HTML または CSS を変更した場合は、プロジェクトを明示的に再実行しなくても、更新されたバージョンをブラウザで表示できます。ファイルを保存してから、ブラウザに切り替えてページを更新するだけです。
前述の手順に従うと、あるパターンが見えてくるでしょう。ページの領域ごとに、3 つの手順を実行します。
- HTML で構造を作成します。
- 一連のスタイルを作成して外観を定義します。
- ページを表示して変更の結果を確認します。
これら 3 つの手順に従って、残りの領域のコンポーネントを実装しましょう。- 右の列にコンポーネントのプレースホルダを作成します。開始ページのモックアップに従うと、右の列には等間隔で配置された 4 つのボックスが含まれています。
4 つのボックスの構造を作成します。次のコードを <div id="indexRightColumn"> タグの間に挿入します。新しいコードはボールドで表示しています。
<div id="indexRightColumn">
<div class="categoryBox">
<a href="#">
<span class="categoryLabelText">dairy</span>
</a>
</div>
<div class="categoryBox">
<a href="#">
<span class="categoryLabelText">meats</span>
</a>
</div>
<div class="categoryBox">
<a href="#">
<span class="categoryLabelText">bakery</span>
</a>
</div>
<div class="categoryBox">
<a href="#">
<span class="categoryLabelText">fruit & veg</span>
</a>
</div>
</div>
- 新しい
categoryBox クラスおよび categoryLabelText クラスのスタイル規則を affablebean.css に追加します。新しいコードはボールドで表示しています。
#indexRightColumn {
height: 400px;
width: 500px;
float: left;
background: #eee;
}
.categoryBox {
height: 176px;
width: 212px;
margin: 21px 14px 6px;
float: inherit;
background: #ccc;
}
.categoryLabelText {
line-height: 150%;
font-size: x-large;
}
NetBeans の CSS サポート
スタイルシートを操作する際、特に役立つウィンドウが 2 つあります。「CSS プレビュー」を使用すると、スタイル規則がブラウザでどのように表示されるかを確認できます。「CSS プレビュー」を開くには、メインメニューから「ウィンドウ」>「その他」>「CSS プレビュー」を選択します。エディタでスタイル規則の中にカーソルを置くと、「CSS プレビュー」が自動的に更新されて、規則で定義されているプロパティーに従ってサンプルテキストが表示されます。
「CSS スタイルビルダー」は、スタイル規則を手作業で入力したくない場合に役立ちます。「CSS スタイルビルダー」を開くには、メインメニューから「ウィンドウ」>「その他」>「CSS スタイルビルダー」を選択します。このインタフェースを使用すると、プロパティーと値をグラフィカルインタフェースから選択して規則を構築できます。
「CSS プレビュー」と同様に、「CSS スタイルビルダー」もエディタと同期しています。「CSS スタイルビルダー」で選択すると、スタイル規則がエディタで自動的に更新されます。同様に、エディタで変更を入力すると、スタイルビルダーでの選択内容がすぐに更新されます。
index.jsp および affablebean.css ファイルを保存 (Ctrl-S、Mac の場合は ⌘-S) してから、ブラウザに切り替えてページを更新し、現在の状態を確認します。
- 左の列とフッターには静的テキストのプレースホルダだけが必要なので、両方を同時に実装しましょう。
次のコードを <div id="indexLeftColumn"> タグおよび <div id="footer"> タグの間に挿入します。新しいコードはボールドで表示しています。
<div id="indexLeftColumn">
<div id="welcomeText">
<p>[ welcome text ]</p>
</div>
</div>
...
<div id="footer">
<hr>
<p id="footerText">[ footer text ]</p>
</div>
affablebean.css スタイルシートに変更を加えます。新しい ID とクラスをすべて考慮する必要はありません。あとで顧客からテキストと画像を受け取った時点で外観を調整できます。
横罫線 (<hr>) タグは、それを含んでいる要素 (<div id="footer">) の長さ全体にわたって表示されます。したがって、モックアップ画像に従って短くするには、<div id="footer"> の幅を調整します。新しいコードはボールドで表示しています。
#footer {
height: 60px;
width: 350px;
clear: left;
background: #aaa;
}
hr {
border: 0;
background-color: #333;
height: 1px;
margin: 0 25px;
width: 300px;
}index.jsp および affablebean.css ファイルを保存 (Ctrl-S、Mac の場合は ⌘-S) してから、ブラウザに切り替えてページを更新し、現在の状態を確認します。
開始ページが完成しました。ページに含まれるコンポーネントに必要なプレースホルダをすべて作成しました。
これで、アプリケーションの開始ページの初期デザインが完成しました。ページコンポーネントのすべてのプレースホルダが存在しています。このチュートリアルの後半で、ページビューに動的ロジックを適用していくときは、これらのプレースホルダに JSTL および EL 式を埋め込むだけです。
残る作業は、モックアップに基づいてほかのページの初期デザインを実装することです。そのためには、前述のパターンに従って、次の作業を実行します。
- ページの主要な領域の
<div> タグを作成します。
- 各領域について、次の 3 つの手順を繰り返します。
- HTML で構造を作成します。
- 一連のスタイルを作成して外観を定義します。
- ページを表示して変更の結果を確認します。
IDE で提供されている HTML および CSS のサポートを必ず利用してください。後述の「ヒントとコツ」も参照してください。残りのページのコードは取り込むだけにし、チュートリアルの先に進む場合は、AffableBean プロジェクトのスナップショット 1 をダウンロードできます。ここには、残りのページの初期モックアップ実装のイメージが含まれています。
WEB-INF への JSP ページの配置
作成されたページモックアップを再度参照すると、開始ページはいつ、どのユーザーから要求された場合でも同じように表示されることがわかります。つまり、開始ページに表示される内容は、ユーザーのセッションに依存しません (セッションについては、ユニット 8「セッションの管理」を参照)。ただし、ほかのすべてのページでは、正しく表示するために何らかのユーザー固有の情報が必要です。たとえば、カテゴリページでは、カテゴリを表示するためにユーザーがカテゴリを選択する必要があり、カートページでは、現在ショッピングカートに入っている項目がすべてわかっていることが必要です。サーバーがユーザー固有の情報と受信する要求を関連付けることができない場合、これらのページは正しく表示されません。したがって、これらのページがブラウザのアドレスバーから直接アクセスされることを防ぐ必要があります。プロジェクトの WEB-INF フォルダはこの目的に使用できます。これは、WEB-INF フォルダに格納されているリソースにはブラウザから直接アクセスできないためです。
「view」という名前の新しいフォルダを作成し、WEB-INF フォルダ内に配置します。そのあと、開始ページ以外のすべての JSP ページをこの新しいフォルダに移動します。
- 「プロジェクト」ウィンドウで「WEB-INF」ノードを右クリックし、「新規」>「フォルダ」を選択します。
- 「新規フォルダ」ウィザードでフォルダに「
view」という名前を付け、「完了」をクリックします。「プロジェクト」ウィンドウに新しいフォルダノードが表示されます。
category.jsp、cart.jsp、checkout.jsp、および confirmation.jsp ページを view フォルダに移動します。
これを行うには、cart.jsp をクリックして選択したあと、Shift キーを押しながら confirmation.jsp をクリックします。これによって 4 つのファイルが選択されます。次に、選択された 4 つのファイルをクリックし、WEB-INF/view フォルダにドラッグします。
ブラウザからこれらのページにアクセスできなくなったことを示すために、「プロジェクトを実行」() ボタンをクリックしてプロジェクトを実行します。アプリケーションがブラウザに表示されたら、これらのいずれかのファイルのフルパスをアドレスバーに入力します。たとえば、次のように入力します。
http://localhost:8080/AffableBean/WEB-INF/view/category.jsp
リソースが使用不可であることを示す HTTP ステータス 404 メッセージが表示されます。
ヘッダーとフッターの作成
ページモックアップを参照すると、5 つのビューすべてで同じ内容が共有されていることがわかります。上部には、会社のロゴ、言語の切り替え、およびショッピングカート機能に関連するウィジェットがあります。下部には、プライバシーポリシーと連絡先のリンクを含むテキストがあります。このコードを各ページのソースファイルに含める代わりに、2 つの別個の JSP フラグメント、つまりヘッダーとフッターにまとめることができます。そのあと、これらを表示する必要があるときはいつでも、フラグメントファイルをページビューに含めるようにします。
これらのフラグメント用に「jspf」という名前の新しいフォルダを作成し、WEB-INF フォルダ内に配置しましょう。
- 「プロジェクト」ウィンドウで「WEB-INF」ノードを右クリックし、「新規」>「フォルダ」を選択します。
- 「新規フォルダ」ウィザードでフォルダに「
jspf」という名前を付け、「完了」をクリックします。
IDE では、状況に応じてメニュー項目が表示されます。たとえば、WEB-INF ノードを右クリックして「新規フォルダ」ウィザードを表示したときに、「親フォルダ」フィールドに web/WEB-INF が自動的に入力されました。同様に、「プロジェクト」ウィンドウでノードを右クリックしてから「新規」を選択すると、以前の選択内容に応じてファイルの種類の一覧が部分的に変化します。
- 2 つの JSP フラグメント
header.jspf および footer.jspf を作成します。これを行うには、新しく作成した jspf フォルダを右クリックし、「新規」>「JSP」を選択します。「新規 JSP ファイル」ウィザードで、ファイル名を入力し、「オプション」から「JSP セグメントとして作成」オプションを選択し、「完了」をクリックします。
終了すると、「プロジェクト」ウィンドウに header.jspf と footer.jspf が表示されます。
次に、いずれかの JSP ページからヘッダーのコードをコピーし、header.jspf ファイルにペーストします。同様に、いずれかの JSP ページからフッターのコードをコピーし、footer.jspf ファイルにペーストします。この作業が終了したら、すべての JSP ページからヘッダーおよびフッターのコードを削除できます。
- いずれかの JSP ページからヘッダーのコードをコピーし、
header.jspf ファイルにペーストします。ヘッダーには、ページの doctype のほか、<html>、<head>、および <body> の各開始タグから、<div id="header"> 要素の終了タグまでを含めるようにします。ページビューの上部に使用されているショッピングカートウィジェット、言語切り替え、および「proceed to checkout」ボタンのプレースホルダを必ず含めてください。コードをペーストしたあとの header.jspf ファイルは次のようになります。
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/affablebean.css">
<title>The Affable Bean</title>
</head>
<body>
<div id="main">
<div id="header">
<div id="widgetBar">
<div class="headerWidget">
[ language toggle ]
</div>
<div class="headerWidget">
[ checkout button ]
</div>
<div class="headerWidget">
[ shopping cart widget ]
</div>
</div>
<a href="#">
<img src="#" id="logo" alt="Affable Bean logo">
</a>
<img src="#" id="logoText" alt="the affable bean">
</div>
- いずれかの JSP ページからフッターのコードをコピーし、
footer.jspf ファイルにペーストします。フッターのコードには、<div id="footer"> 要素から <html> 終了タグまでを含めるようにします。コードをペーストしたあとの footer.jspf ファイルは次のようになります。
<div id="footer">
<hr>
<p id="footerText">[ footer text ]</p>
</div>
</div>
</body>
</html>
- 5 つの JSP ページ (
index.jsp、category.jsp、cart.jsp、checkout.jsp、および confirmation.jsp) すべてからヘッダーおよびフッターのコードを削除します。
配備記述子への指令の追加
ここまでで、ビューをそれぞれ適切な場所に配置し、共通のヘッダーおよびフッターのコードを別個の header.jspf ファイルと footer.jspf ファイルにまとめました。次に、ヘッダーファイルとフッターファイルがどのページに適用されるのかをアプリケーションに認識させる必要があります。各ページビューに <jsp:include> タグを追加することもできます。ただし、その場合はふたたびコードを繰り返し記述することになり、繰り返しをなくそうとしたこれまでの努力が無駄になります。代わりの方法として、web.xml 配備記述子を作成し、JSP プロパティーグループ指令を追加して、ヘッダーおよびフッターのフラグメントをどのページビューに適用すべきかを指定できます。
- Ctrl-N キー (Mac の場合は ⌘-N) を押して、「新規ファイル」ウィザードを開きます。「Web」カテゴリを選択し、「ファイルの種類」から「標準の配備記述子 (web.xml)」を選択します。
- 「次へ」をクリックします。ウィザードの完了時に、ファイルは「
web.xml」という名前でプロジェクトの WEB-INF ディレクトリに配置されます。
- 「完了」をクリックします。
web.xml ファイルが作成され、プロジェクトに追加されます。エディタに配備記述子用の IDE グラフィカルインタフェースが開きます。
このインタフェースは、Web アプリケーションで設定可能な領域ごとに分類されています。これらの領域はタブとしてエディタのツールバーに表示され、「サーブレット」、「フィルタ」、「参照」、「セキュリティー」などの項目があります。「XML」タブには、ファイルのソースコード全体が表示されます。このグラフィカルインタフェースで変更を行うと、配備記述子のソースコードがすぐに更新され、「XML」タブに切り替えて確認できます。これを次の手順で示します。
- 「ページ」タブをクリックし、「JSP プロパティーグループを追加」ボタンをクリックします。「JSP プロパティーグループを追加」ダイアログが開きます。
- 「説明」フィールドに「
header and footer settings」と入力します。「表示名」は空白にしておきます。「表示名」フィールドと「説明」フィールドはどちらも省略可能です。
- 「URL パターン」には、5 つのビューのパスを指定します。「
/index.jsp」と「/WEB-INF/view/*」を入力します。2 つのパスはコンマで区切ります (「*」は、指定したフォルダにあるすべてのファイルを表すワイルドカードです)。
- 「了解」をクリックします。「ページ」タブの「JSP プロパティーグループ」カテゴリにエントリが 1 つ追加されます。
- 「XML」タブに戻ります。配備記述子に次のコードが追加されています。
<jsp-config>
<jsp-property-group>
<description>header and footer settings</description>
<url-pattern>/index.jsp</url-pattern>
<url-pattern>/WEB-INF/view/*</url-pattern>
</jsp-property-group>
</jsp-config>
注: コードを複数の行に表示するには、キャリッジリターンを追加する必要があります。コードのインデントを適切に設定するには、エディタ内を右クリックし、「整形」(Alt-Shift-F、Mac の場合は Ctrl-Shift-F) を選択します。
- 「ページ」タブに戻り、「プレリュード (ヘッダー) を含める」フィールドと「コーダ (フッター) を含める」フィールドにそれぞれ
header.jspf ファイルと footer.jspf ファイルのパスを入力します。「参照」ボタンをクリックし、表示されるダイアログでファイルを選択できます。
- 「XML」タブに戻ります。次のコードが追加されています。変更場所はボールドで示されています。
<jsp-config>
<jsp-property-group>
<description>header and footer settings</description>
<url-pattern>/index.jsp</url-pattern>
<url-pattern>/WEB-INF/view/*</url-pattern>
<include-prelude>/WEB-INF/jspf/header.jspf</include-prelude>
<include-coda>/WEB-INF/jspf/footer.jspf</include-coda>
</jsp-property-group>
</jsp-config>
上記の指令は、指定された url-pattern 内に見つかったすべてのファイルに対して先頭に header.jspf を付加し、末尾に footer.jspf ファイルを付加するように指定しています。
上記のタグおよび Web 配備記述子で使用できるすべてのタグの定義については、「Servlet 仕様」を参照してください。
- アプリケーションを再度実行します (F6、Mac の場合は fn-F6)。
index.jsp ファイルからはヘッダーおよびフッターのコードをすでに削除したため、このファイルが要求されたときにコードが自動的に追加されるかどうかを確認できます。
開始ページが以前と同じように表示され、ヘッダーとフッターの内容が含まれていることがわかります。
コントローラサーブレットの作成
コントローラサーブレットは、受信した要求を処理するために、その要求に対応するモデルを生成するための必要なアクションを開始してから、要求を適切なビューに転送します。視覚的な表現については、AffableBean プロジェクトの MVC 図を再度参照してください。
IDE には、Web アプリケーションのサーブレットコンポーネントを定義できるサーブレットウィザードがあります。このウィザードでは、生成されるクラスに @WebServlet 注釈を含めるか、必要な指令を配備記述子に追加します。次の手順では、ControllerServlet を作成し、アプリケーションコンテキストで @WebServlet 注釈を使用して定義します。
- 「プロジェクト」ウィンドウで
AffableBean プロジェクトノードを右クリックし、「新規」>「サーブレット」を選択します。
- ウィザードで、「クラス名」フィールドに「
ControllerServlet」と入力します。
- 「パッケージ」フィールドに「
controller」と入力します (ウィザードの完了時に新しいパッケージが自動的に作成されます)。
- 「次へ」をクリックします。ウィザードの手順 3 では、サーブレットを構成できます。もっとも重要なのは、URL パターンの指定です。これらのパターンは、サーブレットを起動する URL を識別します。たとえば、「
/category」と入力すると、次のような要求を処理するようにサーブレットに指示していることになります。
http://localhost/AffableBean/category
URL パターンは、ユーザーが開始できるビューおよびアクションに対応するようにしてください。開始ページのモックアップを参照すると、ユーザーはカテゴリを選択できる必要があります。したがって、カテゴリ画像をクリックするアクションに /category URL を関連付けることができます。同様に、カテゴリページで、ユーザーはショッピングカートに項目を追加できる必要があります。したがって、/addToCart を指定できます。
- 「URL パターン」フィールドに「
/category, /addToCart, /viewCart」と入力します。パターンはコンマで区切ります。サーブレットクラスが作成されたら、ほかのパターンは直接追加できます。
- 「完了」をクリックします。IDE によって
ControllerServlet が生成され、エディタで開きます。サーブレット名と URL パターンは、クラス署名の上にある @WebServlet 注釈に含まれています。
@WebServlet(name="ControllerServlet", urlPatterns={"/category", "/addToCart", "/viewCart"})
public class ControllerServlet extends HttpServlet {
前の手順で、ウィザードの「配備記述子 (web.xml) に情報を追加」オプションを選択した場合は、代わりに次のマークアップがアプリケーションの web.xml ファイルに生成されます。
<servlet>
<servlet-name>ControllerServlet</servlet-name>
<servlet-class>controller.ControllerServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ControllerServlet</servlet-name>
<url-pattern>/category</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ControllerServlet</servlet-name>
<url-pattern>/addToCart</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ControllerServlet</servlet-name>
<url-pattern>/viewCart</url-pattern>
</servlet-mapping>
- ほかの URL パターンは
@WebServlet 注釈の urlPatterns 要素に直接追加します。アプリケーションには、ほかのアクションとビューに対応する追加の URL パターンが必要です。次のパターンを入力できます。
/updateCart/checkout/purchase/chooseLanguage
各パターンは必ずコンマで区切ってください。注釈を次のように整形しなおすこともできます。
@WebServlet(name="ControllerServlet",
urlPatterns = {"/category",
"/addToCart",
"/viewCart",
"/updateCart",
"/checkout",
"/purchase",
"/chooseLanguage"})
- 最後に、
loadOnStartup 要素を追加して、アプリケーションの配備時にサーブレットのインスタンス化と初期化が行われるようにします。0 以上の値を指定すると、この処理が行われます (デフォルトは -1)。
@WebServlet(name="ControllerServlet",
loadOnStartup = 1,
urlPatterns = {"/category",
"/addToCart",
"/viewCart",
"/updateCart",
"/checkout",
"/purchase",
"/chooseLanguage"})
コントローラサーブレットの実装
前述のとおり、コントローラサーブレットは、受信した要求を処理するために、その要求に対応するモデルを生成するための必要なアクションを開始してから、要求を適切なビューに転送します。視覚的な表現については、AffableBean プロジェクトの MVC 図を再度参照してください。
新しい ControllerServlet に生成されたコードを参照すると、IDE のサーブレットテンプレートで processRequest メソッドが使用され、これが doGet メソッドと doPost メソッドの両方から呼び出されることがわかります (コードが折り畳まれている場合、これらのメソッドを表示するには、エディタの左マージンにあるプラス記号アイコン (
) をクリックしてコードを展開する必要があります)。このアプリケーションでは doGet と doPost を区別するため、これらのメソッドにコードを直接追加し、processRequest メソッドはすべて削除します。
IDE のテンプレートマネージャーでファイルテンプレートを変更する
IDE では、新しいファイルを作成する場合に基本的なテンプレートが提供されます。テンプレートが作業パターンに最適でない場合は、IDE のテンプレートマネージャーを使用して変更できます。IDE では、実質的にすべてのファイルの種類にテンプレートが用意されています。
たとえば、サーブレットテンプレートを変更するには、次の手順に従います。
- メインメニューから「ツール」>「テンプレート」を選択して、テンプレートマネージャーを開きます。
- 「Web」カテゴリを展開し、「サーブレット」テンプレートを選択します。
- 「エディタで開く」ボタンをクリックします。
- エディタでテンプレートを変更します。次回 (サーブレットウィザードなどで) 新しいサーブレットを作成するときに、この新しいバージョンが適用されます。
これで @WebServlet 注釈を使用してサーブレットに URL パターンをマップできたので、次はこれらのパターンを処理する ControllerServlet を設定します。また、要求されたパターンを適切なビューに転送する RequestDispatcher のインスタンス化も行います。
ControllerServlet クラスのテンプレートコードを次のコードで置き換えます。
public class ControllerServlet extends HttpServlet {
/**
* HTTP <code>GET</code> メソッドを処理します。
* @param request サーブレット要求
* @param response サーブレット応答
* @throws ServletException サーブレット固有のエラーが発生した場合
* @throws IOException I/O エラーが発生した場合
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String userPath = request.getServletPath();
// if category page is requested
if (userPath.equals("/category")) {
// TODO: Implement category request
// if cart page is requested
} else if (userPath.equals("/viewCart")) {
// TODO: Implement cart page request
userPath = "/cart";
// if checkout page is requested
} else if (userPath.equals("/checkout")) {
// TODO: Implement checkout page request
// if user switches language
} else if (userPath.equals("/chooseLanguage")) {
// TODO: Implement language request
}
// use RequestDispatcher to forward request internally
String url = "/WEB-INF/view" + userPath + ".jsp";
try {
request.getRequestDispatcher(url).forward(request, response);
} catch (Exception ex) {
ex.printStackTrace();
}
}
/**
* Handles the HTTP <code>POST</code> method.
* @param request サーブレット要求
* @param response サーブレット応答
* @throws ServletException サーブレット固有のエラーが発生した場合
* @throws IOException I/O エラーが発生した場合
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String userPath = request.getServletPath();
// if addToCart action is called
if (userPath.equals("/addToCart")) {
// TODO: Implement add product to cart action
// if updateCart action is called
} else if (userPath.equals("/updateCart")) {
// TODO: Implement update cart action
// if purchase action is called
} else if (userPath.equals("/purchase")) {
// TODO: Implement purchase action
userPath = "/confirmation";
}
// use RequestDispatcher to forward request internally
String url = "/WEB-INF/view" + userPath + ".jsp";
try {
request.getRequestDispatcher(url).forward(request, response);
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
チュートリアルに沿って進む場合は、ControllerServlet に戻り、マップされた URL パターンをそれぞれ個別に実装します。- 上記のコードを確認してください。注意する点がいくつかあります。
- サーブレットは
userPath インスタンス変数を使用して、クライアントから要求された URL パターンを取得します。
String userPath = request.getServletPath();
userPath は doGet メソッドと doPost メソッドの両方で使用されます。
- 主にページ要求に関する URL パターンは、
doGet メソッドによって管理されます。たとえば、/category、/viewCart、および /checkout では、カテゴリページ、カートページ、およびチェックアウトページが表示されます。
- フォームの送信および機密性の高いユーザーデータの転送に関する URL パターン (
/addToCart、/updateCart、/purchase など) は、doPost メソッドによって管理されます。
doGet メソッドと doPost メソッドのどちらでも、適切なビューのパスは url 文字列を使用して構築されます。
String url = "/WEB-INF/view" + userPath + ".jsp";
RequestDispatcher は HttpServletRequest から取得され、url を適用して要求を転送します。
request.getRequestDispatcher(url).forward(request, response);
TODO メモは、さらに行う必要のある作業を示すために使用されています。例:
// if category page is requested
if (userPath.equals("/category")) {
// TODO: Implement category request
コードに TODO メモを使用すると、完了する必要のある作業を追跡するために役立ちます。IDE の「タスク」ウィンドウ (Ctrl-6、Mac の場合は ⌘-6) を使用すると、すべての TODO メモのほか、プロジェクトに含まれている構文エラーやコンパイルエラーを表示できます。
「タスク」ウィンドウに表示するキーワードを制御できます。「オプション」ウィンドウを開き (「ツール」>「オプション」、Mac の場合は「NetBeans」>「設定」)、「その他」>「タスク」を選択します。
- プロジェクトを実行し (F6、Mac の場合は fn-F6)、
ControllerServlet が適切なビューに要求を転送しているかどうかをテストします。
- ブラウザのアドレスバーに「
http://localhost:8080/AffableBean/category」と入力します。アプリケーションのカテゴリページが表示されます。
- ブラウザのアドレスバーに「
http://localhost:8080/AffableBean/viewCart」と入力します。アプリケーションのカートページが表示されます。
- ブラウザのアドレスバーに「
http://localhost:8080/AffableBean/checkout」と入力します。アプリケーションのチェックアウトページが表示されます。
注: ブラウザのアドレスバーに「http://localhost:8080/AffableBean/purchase」と入力しても確認ページは表示できません。もちろん、これは URL パターン /purchase がサーブレットの doPost メソッドによって処理され、ブラウザのアドレスバーから送信される要求が通常は HTTP GET メソッドを使用して送信されるためです。
この段階で、機能コンポーネントのプレースホルダを含んだ JSP ページの作成が完了しました。また、アプリケーションのフロントエンド構造の設定も完了しました。現在、JSP ページは WEB-INF フォルダ内にあり、ヘッダーおよびフッターのコードは別個のファイルにまとめられています。配備記述子は正しく構成され、ControllerServlet は受信する要求を処理するように設定されています。次のチュートリアルユニットでは、アプリケーションとデータベースを接続できるようにします。
作成したプロジェクトをこのユニットのサンプルソリューションと比較するには、AffableBean プロジェクトのスナップショット 2 をダウンロードしてください。
関連項目
NetBeans チュートリアル
NetBeans の書籍
外部リソース
) ボタン (Ctrl-Shift-H) を押します。
) ボタン (Ctrl-Shift-M) を押します。その後、ファイル内のどこからでも、エディタのツールバーにある「前のブックマーク」ボタンまたは「次のブックマーク」ボタンを押して、そのブックマークに移動できます。
