| 広告 |
|---|
| ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 2010年02月28日 Java総合講座 - 初心者から達人へのパスポート vol.193 セルゲイ・ランダウ バックナンバー： http://www.flsi.co.jp/Java_text/ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ------------------------------------------------------- ・現在、このメールマガジンは以下の2部構成になっています。 [1] 当初からのコース：毎週日曜の夜に発行 これは現在、中級レベルになっています。 [2] 2009年11月開講コース：毎週水曜の夜に発行 これは現在、初心者向けのレベルになっています。 ・このメールマガジンは、画面を最大化して見てください。 小さな画面で見ていると、不適切な位置で行が切れてしまう など、問題を起すことがあります。 ・このメールマガジンに掲載されているソース・コード及び 文章は特に断らない限り、すべて筆者が著作権を所有してい ます。また、これらのソース・コードは学習用のためだけに 提供しているものです。 ------------------------------------------------------- ======================================================== ◆ ０１．Strutsのアプリケーション開発 ======================================================== 念のため、vol.188のアプリケーションの処理の流れから(U-3)〜(U-5)まで の部分を抜粋し、再提示しておきます。 -------------------------------------------------------- (U-3) 検索結果の商品のリストのWebページが開く。 [itemList.jsp] (U-4) 商品を選択し、「カート（買い物カゴ）に入れる」ボタンをクリックする。 [cart.do]→[CartAction.java] (U-5) カートの中身を表示するWebページが開く。 [cart.jsp] -------------------------------------------------------- まず、itemList.jspが未完成でしたから、これを完成させることから始めましょう。 itemList.jspを下記のように編集して下さい。 （itemList.jspの場所を忘れた人は、Eclipseのプロジェクト・エクスプローラー内の StrutsShop配下のWebContent配下にあるitemList.jspを右クリックし、 「アプリケーションから開く」→「Amateras JSPエディター」を選択して下さい。 標準のJSPエディターを使ってもよいのですが、Amateras JSPエディターのほうが プレビュー画面が見られるなど、より強力な機能を持っています。） -------------------------------------------------------- <%@ page contentType="text/html; charset=UTF-8" %> <%@ taglib uri="/tags/struts-bean" prefix="bean" %> <%@ taglib uri="/tags/struts-logic" prefix="logic" %> <%@ taglib uri="/tags/struts-html" prefix="html" %> <%@ taglib uri="/tags/struts-nested" prefix="nested" %> <html:html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>商品リスト</title> </head> <body bgcolor="#77ffff" text="#fa5a00"> <h1>商品のリスト</h1> <html:form method="POST" action="/cart"> <table border="1" width="100%"> <tbody> <tr> <th>商品番号</th> <th>商品名</th> <th>価格</th> <th>カテゴリー</th> <th>イメージ</th> <th>選択</th> </tr> <% String homebase = request.getContextPath(); %> <logic:iterate id="item" name="itemList" scope="request"> <tr> <td><bean:write name="item" property="num" /></td> <td><bean:write name="item" property="name" /></td> <td><bean:write name="item" property="price" />円</td> <td><bean:write name="item" property="catName" /></td> <td><img src="<%= homebase %><bean:write name="item" property="image" />"></td> <td><html:multibox property="checkedItems"><bean:write name="item" property="num" /></html:multibox></td> </tr> </logic:iterate> </tbody> </table> <br> <br> <html:submit property="submit" value="買物かごに入れる" /> </html:form> <br> <html:link page="/itemSelect.jsp">トップ・ページ（商品検索のページ）に戻る</html:link> </body> </html:html> -------------------------------------------------------- 編集した部分は、<html:form>タグ、すなわち <html:form method="POST" action="/cart"> と </html:form> が追加されたことと、"買物かごに入れる"というボタン、すなわち <html:submit property="submit" value="買物かごに入れる" /> という行が追加されたこと、それから、下記の2行 <td><img src="<%= homebase %><bean:write name="item" property="image" />"></td> <td><html:multibox property="checkedItems"><bean:write name="item" property="num" /></html:multibox></td> が以前の行から書き換えられたことですが、さらにこのうち <%= homebase %> で参照している変数homebaseは、 <% String homebase = request.getContextPath(); %> という行を追加することによって定義しています。 これは、データベースから取得した画像のパス（vol.189でITEMテーブルに入力 したデータのうち、'/images/product001.jpg'などの部分）だけでは、相対URI （relative URI）の絶対パス（absolute-path）としては不完全なため、その頭に コンテキスト・パス（Context Path= コンテキスト・ルート、vol.184参照）を 付加して絶対パスを完成させるためのものです。 （相対URI（relative URI）の絶対パス（absolute-path）について詳しく知り たい人は、 http://www.ietf.org/rfc/rfc2396.txt を参照して下さい。ここではルートの位置（=スラッシュ（/））から始まるパスだ、 という程度に理解しておけばいいです。） このように、コンテキスト・パスはrequest（HttpServletRequestオブジェクト） のgetContextPath()メソッドによって取得することができます。 現在のコンテキスト・パスは、/StrutsShopになっていますから、これらを 組み合わせると、上記の<img>タグのsrc属性の値は /StrutsShop/images/product001.jpg のような絶対パスになるわけです。（このproduct001.jpgなどの画像ファイル をこの絶対パスで参照される場所に置く作業は、後ほど行います。） （ちなみに、ここではHTMLの<img>タグを使用していますが、この<img>タグに相当 するものとして、Strutsには<html:img>というタグも用意されているのですが、 <html:img>タグの使い方については、また別の機会に紹介いたします。） さて、ここで新しく<html:multibox>というタグが出てきましたので、説明して おきましょう。 このタグは、HTMLの<INPUT TYPE="checkbox" ・・・・・>（vol.089参照）に相当する Strutsのタグです。 HTMLの<INPUT TYPE="checkbox" ・・・・・>に相当するStrutsのタグとしては、他に <html:checkbox>というタグもありますが、<html:checkbox>がチェックボックス1つ を表示するのに使われるのに対して、<html:multibox>はチェックボックスを複数 並べて表示する場合に使われます。 <html:checkbox>では、たんにチェックボックスにチェックがはいっているかいないか だけの情報がサーバーに送られるのに対し、<html:multibox>では複数のチェックボッ クスのうちどれにチェックがはいっているかの情報をサーバーに送ることができます。 たとえば <html:multibox property="checkedItems">ABC</html:multibox> というコードにすると、対応するActionFormのcheckedItemsプロパティーにABCという 値が設定されることになります。これは、ABCという値を持つチェックボックスに チェックが入れられていたことを示します。これと同じことは、value属性を使って <html:multibox property="checkedItems" value="ABC" /> と書くこともできます。 ただし、checkedItemsプロパティーに設定したい値を動的に指定したい場合（予め固定 した値にはできない場合）は、value属性では指定できませんので、 <html:multibox property="checkedItems">ABC</html:multibox> という形式で、ABCのところに動的な値を出力する記述を入れることによって行います。 これを、itemList.jspの中では、 <html:multibox property="checkedItems"><bean:write name="item" property="num" /></html:multibox> というコードによって行っています。つまり、ABCの代わりに <bean:write name="item" property="num" />というコードで、動的に値を書き出して います。 このitemのnumプロパティーは商品番号ですから、こうしておくと、そのWebページ上の チェックを入れた商品の商品番号がActionFormのcheckedItemsプロパティーに設定され ることになります。 このとき、複数の商品にチェックが入れられる可能性がありますが、checkedItemsプロ パティーには配列の形式で複数の商品番号が設定されます。（詳しくは、後述） あと、このitemList.jspの最後のほうに新たに <html:link page="/itemSelect.jsp">トップ・ページ（商品検索のページ）に戻る</html:link> という行を追加していますが、この<html:link>というタグは文字通りリンク（link） を作るためのタグで、HTMLの<a href=・・・・・>タグに相当します。 （このJSPから生成されるHTMLのソースを確認したい人は、実際の動作テストのときに 表示されたWebページ上で何もない所（水色の所）を右クリックし、「ソースの表示」 を選択すれば、HTMLのソースを確認することができます。） この行は、商品を検索してみたが求める商品がリストされなかったという人のために 再度検索ページに戻って検索のやり直しをできるように用意しました。 これは、あとで動作テストするときに、その行をクリックすれば、働きがわかると 思います。 さて、これで、FORM（Strutsでは<html:form>タグで記述する）が組み込まれました ので、それに対応するActionFormクラスをItemListFormというクラス名で用意する ことにしましょう。 その前に、下記のようにして、ItemListFormをstruts-config.xmlに登録しておきましょう。 ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ まず、struts-config.xmlの中の -------------------------------------------------------- <form-beans> <form-bean name="itemSelectForm" type="jp.co.flsi.lecture.struts.ItemSelectForm" /> </form-beans> -------------------------------------------------------- の部分を -------------------------------------------------------- <form-beans> <form-bean name="itemSelectForm" type="jp.co.flsi.lecture.struts.ItemSelectForm" /> <form-bean name="itemListForm" type="jp.co.flsi.lecture.struts.ItemListForm" /> </form-beans> -------------------------------------------------------- というように編集しましょう。つまり、ItemListFormをitemListFormという名前で 登録します。 続いて、struts-config.xmlの中の -------------------------------------------------------- <action path="/cart" type="jp.co.flsi.lecture.struts.CartAction" input="/itemList.jsp"> <forward name="success" path="/cart.jsp"/> </action> -------------------------------------------------------- の部分を -------------------------------------------------------- <action path="/cart" type="jp.co.flsi.lecture.struts.CartAction" name="itemListForm" scope="request" input="/itemList.jsp"> <forward name="success" path="/cart.jsp"/> </action> -------------------------------------------------------- というように編集して下さい。 つまり、itemList.jspのFORMにitemListFormを対応付けます。 ここで、先ほどの <form-bean name="itemListForm" type="jp.co.flsi.lecture.struts.ItemListForm" /> の行にエラーの表示（赤い下線）がされていることと思います。 これは、ItemListFormが存在しないというエラーですが、このクラスはこれから 作成するので、心配しなくて大丈夫です。 ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ では、ItemListFormクラスを作成しましょう。 (1) プロジェクト・エクスプローラー内でjp.co.flsi.lecture.strutsを右クリック し、「新規」→「その他」を選択します。 (2) 「新規」ウインドウにおいて「Amateras」配下の「Struts」配下の 「Struts ActionForm」を選択し、「次へ」ボタンをクリックします。 (3) 「名前」欄に ItemListForm と入力し、「完了」ボタンをクリックします。 (4) ItemListForm.javaのエディターが開いたら、下記のように編集しましょう。 -------------------------------------------------------- package jp.co.flsi.lecture.struts; import java.io.UnsupportedEncodingException; import javax.servlet.http.HttpServletRequest; import org.apache.log4j.Logger; import org.apache.struts.action.ActionForm; import org.apache.struts.action.ActionMapping; public class ItemListForm extends ActionForm { private static Logger logger = Logger.getLogger(ItemListForm.class); private String[] checkedItems = null; public void reset(ActionMapping mapping, HttpServletRequest request) { logger.info("Start ..............."); try { request.setCharacterEncoding("UTF-8"); setCheckedItems(new String[]{}); } catch (UnsupportedEncodingException e) { logger.error(e, e); } finally { logger.info("End ..............."); } } public void setCheckedItems(String[] checkedItems) { this.checkedItems = checkedItems; } public String[] getCheckedItems() { return checkedItems; } } -------------------------------------------------------- ここで、checkedItemsプロパティーが配列の形式、すなわち private String[] checkedItems = null; という形で定義されていることに注意して下さい。これが、先ほどの<html:multibox> タグによる複数の値を設定するための配列です。multiboxのプロパティーは、必ず このように配列にする必要があります。 こうしておくと、Webページ上で複数の商品にチェックが入れられると、複数の 要素を含む配列がcheckedItemsに設定されることになります。 なお、<html:multibox>を使用するときは、初期状態としては要素数0の配列を設定 しておく必要があるので、上記のソース・コードの中ではreset()メソッドの中で setCheckedItems(new String[]{}); というコードによって、空の配列（要素0個の配列）をcheckedItemsに設定して います。 ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ では、続いて、商品の画像を表示できるようにするために、画像ファイルを 用意して、しかるべき場所に保管しましょう。 (1) Eclipseのワークスペースとなっているフォルダーの中のStrutsShopフォ ルダー配下のWebContentフォルダー、つまり、 C:\JavaWorkSpace\StrutsShop\WebContent の中にimagesフォルダーを作りましょう。 つまり、 C:\JavaWorkSpace\StrutsShop\WebContent\images を作成します。 (2) このimagesフォルダーの中に下記の画像ファイルをコピーします。 product001.jpg product002.jpg product003.jpg product004.jpg product005.jpg product006.jpg これらの画像ファイルはホームページに掲載していますので、それらを ダウンロードして使うか、あるいは、読者がお持ちの画像ファイルを 上記のファイル名にして利用してもかまいません。（vol.087で使った ファイルと同じですので、vol.087のときに用意したものが残っていれば それを使用してもかまいません。） このimagesのフォルダー名（ディレクトリー名）からproduct001.jpgなど のファイル名までの部分をデータベースのIMAGEカラムに書き込んでおい たことはおわかりですね。 ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ では、ここで再度このWebアプリケーション（Strutsのアプリケーション）を 実行してみましょう。 (1) 「サーバー」ビューの中の「ローカル・ホストのTomcat v5.5サーバー」を 右クリックし、「開始」を選択します。しばらくして、 ローカル・ホストのTomcat v5.5サーバー[始動済み,同期済み] というように、後ろに「始動済み」の表示が出たら、Tomcatの起動が完了しています。 (2) Webブラウザー（Internet Explorer）を起動して、URL http://localhost:8080/StrutsShop/itemSelect.jsp を入力しましょう。 どうですか。いつもと同じように操作してみて下さい。 商品の検索結果（商品のリスト）に画像も表示されますね。そして、チェックボックス も表示されることを確認してください。 この商品のリストのWebページの下のほうにある（「買物かごに入れる」ボタン のさらに下にある）「トップ・ページ（商品検索のページ）に戻る 」のリンク をクリックすると、最初のページ（商品検索のページ）に戻ることも確認でき ますね。 ところが、このときEclipseのコンソールを見ると、何やらエラーが出ていますね。 このエラーの対処方法については、次回説明いたします。 ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ （次回に続く） では、今日はここまでにします。 ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ★ホームページ： http://www.flsi.co.jp/Java_text/ ★このメールマガジンは 「まぐまぐ（http://www.mag2.com）」 を利用して発行しています。 ★バックナンバーは http://www.flsi.co.jp/Java_text/ にあります。 ★このメールマガジンの登録／解除は下記Webページでできます。 http://www.mag2.com/m/0000193915.html ★このメールマガジンへの質問は下記Webページにて受け付けて います。わからない所がありましたら、どしどしと質問をお寄 せください。 http://www.flsi.co.jp/Java_text/ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ Copyright (C) 2010 Future Lifestyle Inc. 不許無断複製 |