Loading
|
|
|
Loading
|
| ＠IT > JSFで購入フォームを作ろう − 画面遷移をビジュアルに開発 |
 |
今回はECサイトの購入フォームを作成します。購入フォームは、購入者の情報や送付先、購入数などを入力するフォームです。購入フォームには、入力値チェックなどの機能を持たせますが、JSFを使うと実装が非常に簡単になります。
前回までで商品を表示して、ショッピングカートに入れるところまでを開発してきました。ECサイトの基本機能で残る部分は購入フォームです。 ECサイトにおいて購入フォームは非常に重要です。サイトの訪問者が買う気になって商品を選ぶところまで行っても購入フォームが使いにくいと買うのをあきらめてしまいます。最後の最後で売り上げを逃してしまうというのはECサイトの運営者にとって機会損失です。そこで購入フォームは、できるだけユーザーに親切になるようきめ細かく開発する必要があります。また一般的に、入力を伴う画面の開発はコード量が多くなります。そのため購入フォームは、ECサイト全体の開発工数の中で、比較的多くの割合を占めます。 ■ 購入フォームの開発に適しているJSF サーブレットやJSPだけで使いやすいフォームを作るのはなかなか大変です。例えば入力ミスがあったとき、エラー画面を表示してWebブラウザの「戻る」ボタンをクリックさせるのは不親切です。元の入力画面に入力値を保持したままエラーメッセージを表示する方が親切です。そういった実装を行うには非常に手間が掛かります。 さらには、入力値のチェックを逐一やっていかなければなりません。入力値でエラーがあった場合、ユーザーに修正させるのではなく、自動的に変換する方が親切です。こういったチェックや変換のコーディングも行わなければなりません。 購入フォームが複数ページにわたる場合は入力値を1つ1つHTTPリクエストから取り出してチェックし、HTTPセッションに移し変えていかなければなりません。 こういったコーディングを簡素にしてくれるのがJSF（JavaServer Faces）です。 ■ JSFの基本的な仕組み JSFの基本的な仕組みを説明します。JSFでは、Webブラウザに表示される構成要素をツリー状のオブジェクトとして管理します。例えば、ボタンであったり、テキストボックスであったり、フォームなどの構成要素です。これを「コンポーネントツリー」と呼びます。 WebブラウザからHTTPリクエストがあると、最初にWebブラウザに表示されていた構成要素をコンポーネントツリーとして復元します。 次に、入力値のチェックを行います。入力値のチェックはJSFのカスタムタグであらかじめ用意されているものはカスタムタグだけで記述できますし、より詳細なチェックをするコードを記述することもできます。入力値が妥当であれば、入力値がコンポーネントに反映されます。入力値がコンポーネントに反映されると、イベントが実行されます。このイベントの実行は、ボタンに関連付けられたメソッドの実行であったり、入力値の変更などに関連付けられたメソッドの実行です。 最後に、更新されたコンポーネントツリーがHTMLとして描画され、結果がWebブラウザに送信されます。このとき、イベントの実行結果によっては元のページとは別のページに遷移することもあります（図）。
フォームの入力値やボタンを押したときに実行されるメソッドはMVCのModelに相当するJavaオブジェクトに関連付けることができます。このJavaオブジェクトを「マネージドBean」と呼びます。 ■ ビジュアル開発に適しているJSF JSFはビジュアル開発を念頭において設計されています。基本的には、テキストベースの技術でテキストのみでの開発も十分にできますが、開発ツールによりビジュアルに開発できます。 例えば、画面にテキストボックスやボタンを配置していき、ボタンにコードを記述していくといった手順での開発ができます。MyEclipseには、強力なJSFビジュアル開発機能があります。
それでは、まずどういう購入フォームを作るか考えていきましょう。購入フォームでは、氏名や住所といった商品のお届けに必要な情報を入力してもらわなければなりません。入力してもらったら、最後に確認ページで入力内容を再表示しましょう。 繰り返し購入するユーザーに、何度も氏名や住所を入力させるのは不親切です。あらかじめユーザー登録してある場合は、ユーザーIDとパスワードを入力すれば、氏名や住所がセットされるようにしましょう。 以上をふまえ、完成時の画面イメージを以下に示します。
■ 実装について マネージドBeanは新規に作成する場合が多いです。しかし、ここで新規にマネージドBeanのクラスを作成するとどうなるでしょうか。 入力値はマネージドBeanのインスタンス変数に格納されます。入力値はデータベースに保存するので連載第4回「ショッピングカートを作ろう」で作成したJuchuuクラスにすべての値を移し変えてsaveすることになるでしょう。そうなると、マネージドBeanからJuchuuへ、1項目ごとに「juchuu.setShimei(bean.getShimei())」といったコードを作成しなければなりません。項目数分、値のコピーをしなければならないので、コードとしてはやや冗長になります。 もっと簡単にできないでしょうか。JSFでは、マネージドBeanはPOJO（Plain Old Java Object）です。Hibernateの永続化クラスもPOJOです。それならば、Hibernateの永続化クラスをマネージドBeanにしてみてはどうでしょう？ 今回のケースはこれで行けそうです。画面への入力値がそのままHibernate永続化クラスにセットされるので、値の移し変えコードを書かなくてすみます。 なお、今回はこの方法で実装できますが、常にこのような実装が適しているとは限りません。アプリケーションごとに適した方法を検討してください。
それでは、実際に開発をしていきましょう。 JSFの開発をするためには、まずプロジェクトにJSF機能を追加します。パッケージ・エクスプローラーのプロジェクト名を右クリックし、［MyEclipse］→［JSF機能の追加］をクリックします。
JSF機能の追加のダイアログでは、そのまま［終了］をクリックします。これで、プロジェクトでJSFが使えるようになりました。 ■ ビジュアルに画面遷移を定義 − ［MyEclipse JSF 構成エディター］ 次に、画面遷移を定義していきましょう。画面遷移は「faces-config.xml」というXMLファイルに定義します。MyEclipseでは、このXMLファイルをビジュアルに編集できます。 ［パッケージ・エクスプローラー］で、［WebRoot］→［WEB-INF］の下の「faces-config.xml」をダブルクリックします。中央で［MyEclipse JSF 構成エディター］が開きます。
■ 新規JSPの作成 ［MyEclipse JSF 構成エディター］左側の「J」と書いてあるアイコン
［ファイル名］に「login.jsp」と入力します。［使用するテンプレート］は「デフォルト JSF テンプレート」を選択します。［終了］をクリックします。これで「login.jsp」が配置されます。四角いlogin.jspはドラッグして自由に位置を変えられます。見やすい位置に移動してください。 同じ要領で「kounyuu.jsp」を作成してください。 ■ 新規ナビゲーション・ケースの作成 次に、左側の矢印のアイコン
［結果:］のところに「go_kounyuu」と入力し、［リダイレクト］にチェックを入れます。［終了］をクリックします。これで、新規のナビゲーション・ケースが作成されます。画面は次のようになります。
どのように画面が遷移するか、非常に分かりやすくなっていることを確認しましょう。 ■ 残りの画面遷移の作成 同じ要領で、残りの画面遷移を作成しましょう。
出来上がりは以下のようになります。
ナビゲーション・ケースの線をクリックすると、四角い点が表示されます。これをドラッグすると、線の位置や角度が変えられます。見やすい位置に移動しましょう。 ナビゲーション・ケースの線をダブルクリックすると、内容が編集できます。新規作成のときに間違えてしまった場合や、変更したい場合などはダブルクリックして編集しましょう。 以上で、画面遷移まで完成しました。次回はマネージドBeanとJSFページの作成を行っていきます。
※本記事は、日立製作所の『日本語MyEclipseポータルサイト』に掲載された記事を許諾を得て、再構成したものです。 提供：株式会社 日立製作所 企画：アイティメディア 営業局 制作：＠IT編集部 掲載内容有効期限：2008年3月31日 |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
をクリックします。ウィンドウ中央上ぐらいの適当な位置でクリックします。［新規 JSP ページ］ダイアログが開きます。
をクリックします。「login.jsp」をクリックし、続いて「kounyuu.jsp」をクリックします。［ナビゲーション・ケース・ウィザード］ダイアログが開きます。
