NetBeans Eコマースのチュートリアル - ページ・ビューおよびコントローラ・サーブレットの準備

このページの内容は、NetBeans IDEバージョン6.8および6.9に適用されます

このチュートリアルでは、IDEでプロジェクト・ファイルを作成する方法を示し、HTMLおよびCSSの開発に使用できる機能の一部について紹介します。必要なプロジェクト・ファイルを作成した後、アプリケーションのフロント・エンドを編成していきます。つまり、JSPファイルをプロジェクト構造内の適切な場所に配置し、すべてのビューに適用されるヘッダーとフッターを作成し、受信するリクエストを処理するコントローラ・サーブレットを設定します。

このユニットでは、アプリケーションのWebデプロイメント・ディスクリプタ(web.xmlファイル)も作成します。このデプロイメント・ディスクリプタを使用して構成情報を指定し、デプロイメント時にサーバーでその情報を読み取らせることができます。Java EE 6に含まれているServlet 3.0仕様では、XMLのかわりにクラス注釈を使用できますが、アプリケーションの特定の要素を構成するために引続きデプロイメント・ディスクリプタが必要になる場合があります。具体的には、このユニットではヘッダーおよびフッターのディレクティブを追加し、これらを適用するファイルを指定します。

このチュートリアルの目標の1つは、アプリケーション設計で指定されたビューに対応するJSPページを作成することです。ページ・モックアッププロセス・フロー図を再度参照しながら、ページ・レイアウトを実装していきます。最初に、モックアップに従って、すべての表示コンポーネントと機能コンポーネントのプレースホルダを作成します。このユニットでは、開始ページのレイアウトを実装するガイドを示します。説明された手順を適用して自分で他のページを作成することも、すべてのページの完全なレイアウトが含まれるプロジェクト・スナップショット1をダウンロードすることもできます。

このチュートリアルでビルドするアプリケーションのライブ・デモを、NetBeans Eコマースのチュートリアルのデモ・アプリケーションで表示できます。



ソフトウェアまたはリソース 必須バージョン
NetBeans IDE Javaバンドル版、6.8または6.9
Java Development Kit (JDK) バージョン6
GlassFishサーバー v3またはOpen Source Edition 3.0.1

注意:

  • 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とともに配置します。

  1. 「新規ファイル」(「新規ファイル」ボタン)ボタンをクリックしてファイル・ウィザードを開きます。
  2. 「Web」カテゴリから「JSP」を選択し、「次」をクリックします。
  3. ファイルに「category」という名前を付けます。「場所」フィールドは「Webページ」に設定されています。これは、このファイルがプロジェクトのwebrootに作成されることを示しています。これはプロジェクトのwebフォルダに対応します。これは後でIDEの「ファイル」ウィンドウで確認できます。
  4. 「終了」をクリックします。IDEによって新しいJSPページが生成され、エディタで開きます。
  5. 上記のステップ1から4を繰り返して、残りのcart.jspcheckout.jspconfirmation.jspページを作成します。

    終了すると、「プロジェクト」ウィンドウは次のようになります。
    ビューのフォルダとJSPページが表示された「プロジェクト」ウィンドウ

スタイル・シートの作成

アプリケーションに固有のすべてのスタイルを含むCSSファイルを作成します。

  1. 「プロジェクト」ウィンドウで「Webページ」ノードを右クリックし、「新規」>「フォルダ」を選択します。
  2. 新規フォルダ・ウィザードでフォルダに「css」という名前を付け、「終了」をクリックします。
  3. 新しいcssフォルダを右クリックし、「新規」>「Cascading Style Sheet」を選択します。(「Cascading Style Sheet」が表示されない場合は、「その他」を選択します。ファイル・ウィザードで、「Web」カテゴリを選択してから「Cascading Style Sheet」を選択し、「次」をクリックします。)
  4. スタイル・シートに「affablebean」という名前を付け、「終了」をクリックします。

    終了すると、「プロジェクト」ウィンドウにaffablebean.cssファイルが表示されます。
    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で提供されている機能について紹介し、開始ページのモックアップを例にとって使用方法を示します。

  1. 「プロジェクト」ウィンドウで「index.jsp」をダブルクリックして、エディタで開きます。
  2. 最初に、ページのメイン領域の<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>
  3. ページの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>
  4. affablebean.cssスタイル・シートをエディタで開きます。作成した<div> IDのスタイル・ルールを作成していきます。
    • widthおよびheightプロパティを使用して、各領域のスペースを作成します。
    • backgroundプロパティを使用して、ページを表示したときに各領域を見分けられるようにします。
    • ページの4つの領域を水平方向に中央にそろえるために、margin: 20px autobodyルールを追加できます。(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;
    }
  5. IDEのメイン・ツールバーにある「プロジェクトの実行」(「プロジェクトの実行」ボタン)ボタンをクリックします。変更されたプロジェクト・ファイルが自動的に保存され、プロジェクト内のJavaコードがすべてコンパイルされます。プロジェクトがパッケージ化されてGlassFishにデプロイされ、ブラウザが開いて開始ページの現在の状態が表示されます。
    ブラウザに表示された開始ページ
  6. 次に、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">要素を使用して言語の切替えとショッピング・カート・ウィジェットを追加しています。


  7. スタイル・シートで、新しい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]-[Space]を押してドキュメント・サポートのポップアップ・ウィンドウを呼び出せます。
    CSSサポートのドキュメント・ウィンドウ

    プロパティがページにどのような影響を与えているかを確認するには、そのプロパティをコメントアウトしてから、ブラウザでページをリフレッシュします。コードをコメントアウトするには、行の上にカーソルを置くかコード・ブロックを強調表示してから、[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。

  8. index.jspおよびaffablebean.cssファイルを保存([Ctrl]-[S]、Macの場合は[⌘]-[S])してから、ブラウザに切り替えてページをリフレッシュし、現在の状態を表示します。

    注意: Java Webプロジェクトに対しては、IDEの「保存時にデプロイ」機能が自動的にアクティブ化されます。つまり、ファイルを保存するたびに、ファイルが自動的にコンパイルされ(JavaクラスまたはJSPページの場合)、プロジェクトが新たにパッケージ化されてサーバーにデプロイされます。したがって、HTMLまたはCSSを変更した場合は、プロジェクトを明示的に再実行しなくても、更新されたバージョンをブラウザで表示できます。ファイルを保存してから、ブラウザに切り替えてページをリフレッシュするのみです。

    ブラウザに表示された開始ページ
    前述の手順に従うと、あるパターンが見えてくるでしょう。ページの領域ごとに、3つの手順を実行します。
    1. HTMLで構造を作成します。
    2. 一連のスタイルを作成して外観を定義します。
    3. ページを表示して変更の結果を確認します。
    これら3つの手順に従って、残りの領域のコンポーネントを実装しましょう。
  9. 右の列にコンポーネントのプレースホルダを作成します。開始ページのモックアップに従うと、右の列には等間隔で配置された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>
  10. 新しい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;
    }

  11. index.jspおよびaffablebean.cssファイルを保存([Ctrl]-[S]、Macの場合は[⌘]-[S])してから、ブラウザに切り替えてページをリフレッシュし、現在の状態を表示します。
    ブラウザに表示された開始ページ
  12. 左の列とフッターには静的テキストのプレースホルダのみが必要なので、両方を同時に実装しましょう。

    次のコードを<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>
  13. 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;
    }
  14. index.jspおよびaffablebean.cssファイルを保存([Ctrl]-[S]、Macの場合は[⌘]-[S])してから、ブラウザに切り替えてページをリフレッシュし、現在の状態を表示します。
    ブラウザに表示された開始ページ
    開始ページが完成しました。ページに含まれるコンポーネントに必要なプレースホルダをすべて作成しました。

これで、アプリケーションの開始ページの初期デザインが完成しました。ページ・コンポーネントのすべてのプレースホルダが存在しています。このチュートリアルの後半で、ページ・ビューに動的ロジックを適用していくときは、これらのプレースホルダにJSTLおよびEL式を埋め込むのみです。

残る作業は、モックアップに基づいて他のページの初期デザインを実装することです。そのためには、前述のパターンに従って、次の作業を実行します。

  1. メイン・ページ領域の<div>タグを作成します。
  2. 各領域について、次の3つの手順を繰り返します。
    1. HTMLで構造を作成します。
    2. 一連のスタイルを作成して外観を定義します。
    3. ページを表示して変更の結果を確認します。

IDEで提供されているHTMLおよびCSSのサポートを必ず利用してください。後述のヒントとコツも参照してください。残りのページのコードは取り込むのみとし、チュートリアルの先に進む場合は、AffableBeanプロジェクトのスナップショット1をダウンロードできます。ここには、残りのページの初期モックアップ実装のイメージが含まれています。

カテゴリ・ページ

ブラウザに表示されたカテゴリ・ページ

カート・ページ

ブラウザに表示されたカート・ページ

チェックアウト・ページ

ブラウザに表示されたチェックアクト・ページ

確認ページ

ブラウザに表示された確認ページ

注意: ページの各領域の背景色は、アプリケーションの開発中に要素を配置しやすくするためにのみ使用されています。最終的には、これらをスタイル・シートから除去し、アプリケーションに、より適切な背景色を適用します。これを行うには、mainクラスのbackgroundルールを調整します。

#main { background: #f7f7e9 }

ヒントとコツ

IDEのエディタには、作業の効率向上に役立つ様々な機能があります。エディタ・ツールバーのボタンとキーボード・ショートカットに慣れると、生産性を高めることができます。次に示すヒントは、HTMLおよびCSSファイルのエディタに適用されます。さらに多くのキーボード・ショートカットを表示するには、メイン・メニューから「ヘルプ」>「キーボード・ショートカット・カード」を選択して、IDEのキーボード・ショートカット・カードを開きます。

  • コード補完: タグと属性を入力する際、ポップアップ・ボックスにコード補完の候補が自動的に表示されます。[Enter]を押すと、候補のタグが入力されます。
  • コードのフォーマット: エディタ内を右クリックし、「フォーマット」を選択します。
  • 行番号表示の切替え: 左マージンを右クリックし、「行番号を表示」を選択します。
  • 出現箇所の検索: テキスト・ブロックを強調表示し、[Ctrl]-[F](Macの場合は[⌘]-[F])を押します。すべての一致箇所がエディタで強調表示されます。エディタのツールバーにある「強調表示検索の切替え」(「強調表示検索の切替え」ボタン)ボタン([Ctrl]-[Shift]-[H])を押します。
  • ブックマークの作成: エディタの左マージンにブックマークを作成するには、「ブックマークを切替え」(「ブックマークを切替え」ボタン)ボタン([Ctrl]-[Shift]-[M])を押します。その後、ファイル内のどこからでも、エディタのツールバーにある「前のブックマーク」ボタンまたは「次のブックマーク」ボタンを押して、そのブックマークに移動できます。
  • コード・スニペットを上または下にコピー: コード・スニペットを強調表示し、[Ctrl]-[Shift]-[↑]または[Ctrl]-[Shift]-[↓]を押します。
  • 開始タグと終了タグの強調表示: 開始タグまたは終了タグのどちらかにカーソルを置くと、開始タグと終了タグの両方が黄色で強調表示されます。

WEB-INFへのJSPページの配置

作成されたページ・モックアップを再度参照すると、開始ページはいつ、どのユーザーからリクエストされた場合でも同じように表示されることがわかります。つまり、開始ページに表示される内容は、ユーザーのセッションに依存しません。(セッションについては、ユニット8のセッションの管理を参照。)ただし、他のすべてのページでは、正しく表示するためになんらかのユーザー固有の情報が必要です。たとえば、カテゴリ・ページでは、カテゴリを表示するためにユーザーがカテゴリを選択する必要があり、カート・ページでは、現在ショッピング・カートに入っている項目がすべてわかっていることが必要です。サーバーがユーザー固有の情報と受信するリクエストを関連付けることができない場合、これらのページは正しくレンダリングされません。したがって、これらのページがブラウザのアドレス・バーから直接アクセスされることを防ぐ必要があります。プロジェクトのWEB-INFフォルダはこの目的に使用できます。これは、WEB-INFフォルダに格納されているリソースにはブラウザから直接アクセスできないためです。

view」という名前の新しいフォルダを作成し、WEB-INFフォルダ内に配置します。その後、開始ページ以外のすべてのJSPページをこの新しいフォルダに移動します。

  1. 「プロジェクト」ウィンドウで「WEB-INF」ノードを右クリックし、「新規」>「フォルダ」を選択します。
  2. 新規フォルダ・ウィザードでフォルダに「view」という名前を付け、「終了」をクリックします。「プロジェクト」ウィンドウに新しいフォルダ・ノードが表示されます。
  3. category.jspcart.jspcheckout.jspおよびconfirmation.jspページをviewフォルダに移動します。

    これを行うには、cart.jspをクリックして選択した後、[Shift]を押しながらconfirmation.jspをクリックします。これによって4つのファイルが選択されます。次に、選択された4つのファイルをクリックし、WEB-INF/viewフォルダにドラッグします。
    JSPがviewフォルダにドラッグされる様子を示す「プロジェクト」ウィンドウ

ブラウザからこれらのページにアクセスできなくなったことを示すために、「プロジェクトの実行」(「プロジェクトの実行」ボタン)ボタンをクリックしてプロジェクトを実行します。アプリケーションがブラウザに表示されたら、これらのいずれかのファイルのフル・パスをアドレス・バーに入力します。たとえば、次のように入力します。

http://localhost:8080/AffableBean/WEB-INF/view/category.jsp

リソースが使用不可であることを示すHTTPステータス404メッセージが表示されます。


ヘッダーとフッターの作成

ページ・モックアップを参照すると、5つのビューすべてで同じ内容が共有されていることがわかります。上部には、会社のロゴ、言語の切替えおよびショッピング・カート機能に関連するその他のウィジェットがあります。下部には、プライバシ・ポリシーと連絡先のリンクを含むテキストがあります。このコードを各ページのソース・ファイルに含めるかわりに、2つの別個のJSPフラグメント、つまりヘッダーとフッターにまとめることができます。その後、これらをレンダリングする必要があるときはいつでも、フラグメント・ファイルをページ・ビューに含めるようにします。

これらのフラグメント用に「jspf」という名前の新しいフォルダを作成し、WEB-INFフォルダ内に配置しましょう。

  1. 「プロジェクト」ウィンドウで「WEB-INF」ノードを右クリックし、「新規」>「フォルダ」を選択します。
  2. 新規フォルダ・ウィザードでフォルダに「jspf」という名前を付け、「終了」をクリックします。

    IDEでは、状況に応じてメニュー項目が表示されます。たとえば、WEB-INFノードを右クリックして新規フォルダ・ウィザードを表示したときに、「親フォルダ」フィールドにweb/WEB-INFが自動的に入力されました。同様に、「プロジェクト」ウィンドウでノードを右クリックしてから「新規」を選択すると、以前の選択内容に応じてファイル・タイプの一覧が部分的に変化します。

  3. 2つのJSPフラグメントheader.jspfおよびfooter.jspfを作成します。これを行うには、新しく作成したjspfフォルダを右クリックし、「新規」>「JSP」を選択します。新規JSPウィザードで、ファイル名を入力し、「オプション」から「JSPセグメントとして作成」オプションを選択し、「終了」をクリックします。

    終了すると、「プロジェクト」ウィンドウにheader.jspffooter.jspfが表示されます。
    JSPフラグメントが表示された「プロジェクト」ウィンドウ

    次に、いずれかのJSPページからヘッダーのコードをコピーし、header.jspfファイルに貼り付けます。同様に、いずれかのJSPページからフッターのコードをコピーし、footer.jspfファイルに貼り付けます。この作業が終了したら、すべてのJSPページからヘッダーおよびフッターのコードを除去できます。
  4. いずれかの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>
  5. いずれかのJSPページからフッターのコードをコピーし、footer.jspfファイルに貼り付けます。フッターのコードには、<div id="footer">要素から<html>終了タグまでを含めるようにします。コードを貼り付けた後のfooter.jspfファイルは次のようになります。
                <div id="footer">
                    <hr>
                    <p id="footerText">[ footer text ]</p>
                </div>
            </div>
        </body>
    </html>
  6. 5つのJSPページ(index.jspcategory.jspcart.jspcheckout.jspおよびconfirmation.jsp)すべてからヘッダーおよびフッターのコードを除去します。

デプロイメント・ディスクリプタへのディレクティブの追加

ここまでで、ビューをそれぞれ適切な場所に配置し、共通のヘッダーおよびフッターのコードを別個のheader.jspfファイルとfooter.jspfファイルにまとめました。次に、ヘッダー・ファイルとフッター・ファイルがどのページに適用されるのかをアプリケーションに認識させる必要があります。各ページ・ビューに<jsp:include>タグを追加することもできます。ただし、その場合は再びコードを繰返し記述することになり、繰返しをなくそうとしたこれまでの努力が無駄になります。代替の方法として、web.xmlデプロイメント・ディスクリプタを作成し、JSPプロパティ・グループ・ディレクティブを追加して、ヘッダーおよびフッターのフラグメントをどのページ・ビューに適用する必要があるかを指定できます。

  1. [Ctrl]-[N] (Macの場合は[⌘]-[N])を押して、新規ファイル・ウィザードを開きます。「Web」カテゴリを選択し、「ファイル・タイプ」から「標準のデプロイメント・ディスクリプタ(web.xml)」を選択します。
  2. 「次」をクリックします。ウィザードの完了時に、ファイルは「web.xml」という名前でプロジェクトのWEB-INFディレクトリに配置されます。
  3. 「終了」をクリックします。web.xmlファイルが作成され、プロジェクトに追加されます。エディタにデプロイメント・ディスクリプタ用のIDEグラフィカル・インタフェースが開きます。

    このインタフェースは、Webアプリケーションで構成可能な領域ごとに分類されています。これらの領域はタブとしてエディタのツールバーに表示され、「サーブレット」、「フィルタ」、「参照」、「セキュリティ」などの項目があります。「XML」タブには、ファイルのソース・コード全体が表示されます。このグラフィカル・インタフェースで変更を行うと、デプロイメント・ディスクリプタのソース・コードがすぐに更新され、「XML」タブに切り替えて確認できます。これを次の手順で示します。
  4. 「ページ」タブをクリックし、「JSPプロパティ・グループの追加」ボタンをクリックします。「JSPプロパティ・グループの追加」ダイアログが開きます。
  5. 「説明」フィールドに「header and footer settings」と入力します。「表示名」は空白にしておきます。「表示名」フィールドと「説明」フィールドはどちらもオプションです。
  6. 「URLパターン」には、5つのビューのパスを指定します。「/index.jsp」と「/WEB-INF/view/*」を入力します。2つのパスはカンマで区切ります。(「*」は、指定したフォルダにあるすべてのファイルを表すワイルド・カードです。)
    「JSPプロパティ・グループの追加」ダイアログ
  7. 「OK」をクリックします。「ページ」タブの「JSPプロパティ・グループ」カテゴリにエントリが追加されます。
  8. 「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])を選択します。

  9. 「ページ」タブに戻り、「プレリュード(ヘッダー)を含める」フィールドと「コーダ(フッター)を含める」フィールドにそれぞれheader.jspfファイルとfooter.jspfファイルのパスを入力します。「参照」ボタンをクリックし、表示されるダイアログでファイルを選択できます。
    web.xmlの「ページ」タブに表示された「JSPプロパティ・グループ」
  10. 「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仕様を参照してください。

  11. アプリケーションを再度実行します([F6]、Macの場合は[fn]-[F6])。index.jspファイルからはヘッダーおよびフッターのコードをすでに除去したため、このファイルがリクエストされたときにコードが自動的に追加されるかどうかを確認できます。

    開始ページが以前と同じように表示され、ヘッダーとフッターの内容が含まれていることがわかります。

コントローラ・サーブレットの作成

コントローラ・サーブレットは、受信したリクエストを処理するために、そのリクエストに対応するモデルを生成するための必要なアクションを開始してから、リクエストを適切なビューに転送します。視覚的な表現については、AffableBeanプロジェクトのMVC図を再度参照してください。

IDEには、Webアプリケーションのサーブレット・コンポーネントを定義できるサーブレット・ウィザードがあります。このウィザードでは、生成されるクラスに@WebServlet注釈を含めるか、必要なディレクティブをデプロイメント・ディスクリプタに追加します。次の手順では、ControllerServletを作成し、アプリケーション・コンテキストで@WebServlet注釈を使用して定義します。

  1. 「プロジェクト」ウィンドウでAffableBeanプロジェクト・ノードを右クリックし、「新規」>「サーブレット」を選択します。
  2. ウィザードで、「クラス名」フィールドに「ControllerServlet」と入力します。
  3. 「パッケージ」フィールドに「controller」と入力します。(ウィザードの完了時に新しいパッケージが自動的に作成されます。)
    サーブレット・ウィザード
  4. 「次」をクリックします。ウィザードのステップ3では、サーブレットを構成できます。最も重要なのは、URLパターンの指定です。これらのパターンは、サーブレットを起動するURLを識別します。たとえば、「/category」と入力すると、次のようなリクエストを処理するようにサーブレットに指示していることになります。
    http://localhost/AffableBean/category
    URLパターンは、ユーザーが開始できるビューおよびアクションに対応するようにしてください。開始ページのモックアップを参照すると、ユーザーはカテゴリを選択できる必要があります。したがって、カテゴリ・イメージをクリックするアクションに/category URLを関連付けることができます。同様に、カテゴリ・ページで、ユーザーはショッピング・カートに項目を追加できる必要があります。したがって、/addToCartを指定できます。
  5. 「URLパターン」フィールドに「/category,/addToCart,/viewCart」と入力します。パターンはカンマで区切ります。サーブレット・クラスが作成されたら、他のパターンは直接追加できます。
    サーブレット・ウィザード、ステップ3: サーブレット・デプロイメントを構成
  6. 「終了」をクリックします。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>
  7. 他のURLパターンは@WebServlet注釈のurlPatterns要素に直接追加します。アプリケーションには、他のアクションとビューに対応する追加のURLパターンが必要です。次のパターンを入力できます。
    • /updateCart
    • /checkout
    • /purchase
    • /chooseLanguage
    各パターンは必ずカンマで区切ってください。注釈を次のように書式設定しなおすこともできます。
    @WebServlet(name="ControllerServlet",
                urlPatterns = {"/category",
                               "/addToCart",
                               "/viewCart",
                               "/updateCart",
                               "/checkout",
                               "/purchase",
                               "/chooseLanguage"})
  8. 最後に、loadOnStartup要素を追加して、アプリケーションのデプロイ時にサーブレットのインスタンス化と初期化が行われるようにします。0以上の値を指定すると、この処理が行われます(デフォルトは-1)。
    @WebServlet(name="ControllerServlet",
                loadOnStartup = 1,
                urlPatterns = {"/category",
                               "/addToCart",
                               "/viewCart",
                               "/updateCart",
                               "/checkout",
                               "/purchase",
                               "/chooseLanguage"})

コントローラ・サーブレットの実装

前述のとおり、コントローラ・サーブレットは、受信したリクエストを処理するために、そのリクエストに対応するモデルを生成するための必要なアクションを開始してから、リクエストを適切なビューに転送します。視覚的な表現については、AffableBeanプロジェクトのMVC図を再度参照してください。

新しいControllerServletに生成されたコードを参照すると、IDEのサーブレット・テンプレートでprocessRequestメソッドが使用され、これがdoGetメソッドとdoPostメソッドの両方からコールされることがわかります。(これらのメソッドを表示するには、エディタの左マージンにあるプラス記号アイコン(コード折りたたみアイコン)をクリックしてコードの折りたたみを展開する必要があります。)このアプリケーションではdoGetdoPostを区別するため、これらのメソッドにコードを直接追加し、processRequestメソッドはすべて除去します。



これで@WebServlet注釈を使用してサーブレットにURLパターンをマップできたので、次はこれらのパターンを処理するControllerServletを設定します。また、リクエストされたパターンを適切なビューに転送するRequestDispatcherのインスタンス化も行います。

  1. ControllerServletクラスのテンプレート・コードを次のコードで置き換えます。
    public class ControllerServlet extends HttpServlet {
    
        /**
         * Handles the HTTP <code>GET</code> method.
         * @param request servlet request
         * @param response servlet response
         * @throws ServletException if a servlet-specific error occurs
         * @throws IOException if an I/O error occurs
         */
        @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 servlet request
         * @param response servlet response
         * @throws ServletException if a servlet-specific error occurs
         * @throws IOException if an I/O error occurs
         */
        @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パターンをそれぞれ個別に実装します。
  2. 上記のコードを確認してください。注意する点がいくつかあります。
    • サーブレットはuserPathインスタンス変数を使用して、クライアントからリクエストされたURLパターンを取得します。
      String userPath = request.getServletPath();
      userPathdoGetメソッドとdoPostメソッドの両方で使用されます。
    • 主にページリクエストに関するURLパターンは、doGetメソッドによって管理されます。たとえば、/category/viewCartおよび/checkoutでは、カテゴリ・ページ、カート・ページおよびチェックアウト・ページが表示されます。
    • フォームの送信および機密性の高いユーザー・データのトランスポートに関するURLパターン(/addToCart/updateCart/purchaseなど)は、doPostメソッドによって管理されます。
    • doGetメソッドとdoPostメソッドのどちらでも、適切なビューのパスはurl文字列を使用して構築されます。
      String url = "/WEB-INF/view" + userPath + ".jsp";
    • RequestDispatcherHttpServletRequestから取得され、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」>「プリファレンス」)、「その他」>「タスク」を選択します。

  3. プロジェクトを実行し([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をダウンロードしてください。


関連項目

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo