広告

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
                      2010年01月24日

    Java総合講座 - 初心者から達人へのパスポート
                  vol.188

                                セルゲイ・ランダウ
 バックナンバー: http://www.flsi.co.jp/Java_text/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


-------------------------------------------------------
・現在、このメールマガジンは以下の2部構成になっています。
[1] 当初からのコース:毎週日曜の夜に発行
   これは現在、中級レベルになっています。
[2] 2009年11月開講コース:毎週水曜の夜に発行
   これは現在、初心者向けのレベルになっています。
・このメールマガジンは、画面を最大化して見てください。
小さな画面で見ていると、不適切な位置で行が切れてしまう
など、問題を起すことがあります。
・このメールマガジンに掲載されているソース・コード及び
文章は特に断らない限り、すべて筆者が著作権を所有してい
ます。また、これらのソース・コードは学習用のためだけに
提供しているものです。
-------------------------------------------------------


========================================================
◆ 01.Strutsのアプリケーション開発
========================================================


今回のインターネット・ショッピングのアプリケーションの処理の
基本的な流れは、以下のようなものにします。
(先にこの基本的な流れの部分を作り、その後、副流的な流れを
作っていくことにします。)

(U-1) 商品検索のためのWebページを開く。
[itemSelect.jsp]

(U-2) 商品のキーワードなどを入力し、「商品検索」ボタンを押す。
[itemlist.do]→[ItemListAction.java]

(U-3) 検索結果の商品のリストのWebページが開く。
[itemList.jsp]

(U-4) 商品を選択し、「カート(買い物カゴ)に入れる」ボタンをクリックする。
[cart.do]→[CartAction.java]

(U-5) カートの中身を表示するWebページが開く。
[cart.jsp]

(U-6) 「注文に進む」ボタンを押す。
[orderprocess.do]→[OrderProcessAction.java]

(U-7) 注文のためのWebページが開く。
[order.jsp]

(U-8) (会員登録しない一時的な顧客の場合)顧客の住所・氏名・連絡先を
入力し、支払い方法(クレジット・カード払い/銀行振り込み)を選択し、
「注文内容の確認」ボタンを押す。
[confirmorder.do]→[ConfirmOrderAction.java]

(U-9) 注文確認のためのWebページが開く。
[confirmOrder.jsp]

(U-10) 注文内容を確認し、「購入」ボタンを押す。
[completeorder.do]→[CompleteOrderAction.java]

(U-11) 注文の完了を知らせるWebページが開く。
[completeOrder.jsp]



◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆


では、まずstruts-config.xmlファイルからコーディングしていきましょう。

(1) Eclipseを起動し、プロジェクト・エクスプローラーの中のStrutsShop配下の
WebContent配下のWEB-INF配下のstruts-config.xmlをダブルクリックしてエディター
(フロー・エディター)を開いて下さい。

(2) struts-config.xmlのエディター上で「ページ」のアイコンと「アクション」の
アイコンをそれぞれ白い領域に貼り付けましょう。
(操作方法は、vol.183でお話していますので、忘れた人は復習して下さい。)

(3) /page1.jspという文字列を/itemSelect.jspに書き換え、/action1という文字列
を/itemlistに書き換えて下さい。

(4) /itemSelect.jspのアイコンから/itemlistのアイコンまで「入力」の矢印線を
引いて下さい。

以上の操作で、処理の流れのうち(U-1)〜(U-2)の部分が記述されました。
(ただし、JavaのクラスItemListActionについてはまだ記述していません。)

(5) 「ページ」のアイコンをもう一つ貼り付け、文字列を/itemList.jspに書き換え
ます。

(6) /itemlistのアイコンから/itemList.jspのアイコンまで「進む」の矢印線を
引いて下さい。

(7) forward1の文字列をsuccessに書き換えて下さい。(正常時の処理の流れの
場合は、このようにforward名を"success"に統一することにします。)

以上の操作で、処理の流れのうち(U-3)の部分が記述されました。

(8) 「アクション」のアイコンをもう一つ貼り付け、文字列を/cartに書き換え
ます。

(9) /itemList.jspのアイコンから/cartのアイコンまで「入力」の矢印線を
引いて下さい。

以上の操作で、処理の流れのうち(U-4)の部分が記述されました。
(ただし、JavaのクラスCartActionについてはまだ記述していません。)

(10) 「ページ」のアイコンをもう一つ貼り付け、文字列を/cart.jspに書き換え
ます。

(11) /cartのアイコンから/cart.jspのアイコンまで「進む」の矢印線を
引いて下さい。

(12) forward1の文字列をsuccessに書き換えて下さい。

以上の操作で、処理の流れのうち(U-5)の部分が記述されました。

(13) 「アクション」のアイコンをもう一つ貼り付け、文字列を/orderprocessに書き換え
ます。

(14) /cart.jspのアイコンから/orderprocessのアイコンまで「入力」の矢印線を
引いて下さい。

以上の操作で、処理の流れのうち(U-6)の部分が記述されました。
(ただし、JavaのクラスOrderProcessActionについてはまだ記述していません。)

(15) 「ページ」のアイコンをもう一つ貼り付け、文字列を/order.jspに書き換え
ます。

(16) /orderprocessのアイコンから/order.jspのアイコンまで「進む」の矢印線を
引いて下さい。

(17) forward1の文字列をsuccessに書き換えて下さい。

以上の操作で、処理の流れのうち(U-7)の部分が記述されました。

(18) 「アクション」のアイコンをもう一つ貼り付け、文字列を/confirmorderに書き換え
ます。

(19) /order.jspのアイコンから/confirmorderのアイコンまで「入力」の矢印線を
引いて下さい。

以上の操作で、処理の流れのうち(U-8)の部分が記述されました。
(ただし、JavaのクラスConfirmOrderActionについてはまだ記述していません。)

(20) 「ページ」のアイコンをもう一つ貼り付け、文字列を/confirmOrder.jspに書き換え
ます。

(21) /confirmorderのアイコンから/confirmOrder.jspのアイコンまで「進む」の矢印線を
引いて下さい。

(22) forward1の文字列をsuccessに書き換えて下さい。

以上の操作で、処理の流れのうち(U-9)の部分が記述されました。

(23) 「アクション」のアイコンをもう一つ貼り付け、文字列を/completeorderに書き換え
ます。

(24) /confirmOrder.jspのアイコンから/completeorderのアイコンまで「入力」の矢印線を
引いて下さい。

以上の操作で、処理の流れのうち(U-10)の部分が記述されました。
(ただし、JavaのクラスCompleteOrderActionについてはまだ記述していません。)

(25) 「ページ」のアイコンをもう一つ貼り付け、文字列を/completeOrder.jspに書き換え
ます。

(26) /completeorderのアイコンから/completeOrder.jspのアイコンまで「進む」の矢印線を
引いて下さい。

(27) forward1の文字列をsuccessに書き換えて下さい。

以上の操作で、処理の流れのうち(U-11)の部分が記述されました。


以上で、このエディターにおけるビジュアルな操作は終わりです。
いったん保管(Ctrl + S)しておきましょう。


(なお、このエディター上で警告のマーク(ビックリ・マークの入った橙色の三角形
のマーク)がついているのは、まだ存在しないファイルがあるためで、これらは
のちほど作成しますので現時点では無視して下さい。)



◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆


続いて、ソース・コード上で編集を続けて、先ほどまだ記述していなかったJavaの
クラスを記述していきます。
struts-config.xmlのエディターの下のほうにある「ソース」タブをクリックして
ソース・エディターを開いてください。

(1) 次の行を見つけて、

    <action path="/itemlist" input="/itemSelect.jsp">

次のように編集しましょう。

    <action path="/itemlist" type="jp.co.flsi.lecture.struts.ItemListAction"
     input="/itemSelect.jsp">

つまり、ItemListActionのクラス名を記述したわけです。

(2) 同様にして、CartAction、OrderProcessAction、ConfirmOrderAction、
CompleteOrderActionのクラス名を記述していって下さい。
そうすると、最終的にはこのファイルの中身は下記のようになります。

--------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">
<struts-config>
  <data-sources>
  </data-sources>
  <form-beans>
  </form-beans>
  <global-exceptions>
  </global-exceptions>
  <global-forwards>
  </global-forwards>
  <action-mappings>
    <action path="/itemlist" type="jp.co.flsi.lecture.struts.ItemListAction"
     input="/itemSelect.jsp">
      <forward name="success" path="/itemList.jsp"/>
    </action>
    <action path="/cart" type="jp.co.flsi.lecture.struts.CartAction"
     input="/itemList.jsp">
      <forward name="success" path="/cart.jsp"/>
    </action>
    <action path="/orderprocess" type="jp.co.flsi.lecture.struts.OrderProcessAction"
     input="/cart.jsp">
      <forward name="success" path="/order.jsp"/>
    </action>
    <action path="/confirmorder" type="jp.co.flsi.lecture.struts.ConfirmOrderAction"
     input="/order.jsp">
      <forward name="success" path="/confirmOrder.jsp"/>
    </action>
    <action path="/completeorder" type="jp.co.flsi.lecture.struts.CompleteOrderAction"
     input="/confirmOrder.jsp">
      <forward name="success" path="/completeOrder.jsp"/>
    </action>
  </action-mappings>
  <controller processorClass="org.apache.struts.tiles.TilesRequestProcessor"/>
  <message-resources parameter="MessageResources"/>
  <plug-in className="org.apache.struts.tiles.TilesPlugin">
    <set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml"/>
    <set-property property="moduleAware" value="true"/>
  </plug-in>
  <plug-in className="org.apache.struts.validator.ValidatorPlugIn">
    <set-property property="pathnames" value="/WEB-INF/validator-rules.xml,/WEB-INF/validation.xml"/>
  </plug-in>
</struts-config>
--------------------------------------------------------

この状態で再度、保管(Ctrl + S)しておきましょう。


(なお、このエディター上でエラーのマーク(バッテン・マークの入った赤色の円
のマークと赤色の下線)がついているのは、まだ存在しないファイルがあるためで、
これらはのちほど作成しますので現時点では無視して下さい。)



◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆


では、次にJSPファイルを作成していきましょう。

struts-config.xmlのエディターの下のほうにある「フロー」タブをクリックして
フロー・エディターを開いてください。

(1) /itemSelect.jspのアイコンをダブル・クリックします。

(2) 「Struts JSPファイル」ウインドウが開いたら、「完了」ボタンをクリックします。

これで、itemSelect.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>
      <html:form method="POST" action="">
      </html:form>
   </body>
</html:html>
--------------------------------------------------------


これを下記のように編集しましょう。

--------------------------------------------------------
<%@ 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="/itemlist">
         キーワード(商品名の一部)やカテゴリーを入力し、「商品検索」ボタンをクリックしてください。
         <br>
         <br>
         キーワード:<html:text property="keyword" size="20" />
         <br>
         カテゴリー:<html:text property="category" size="20" />
         <br>
         <br>
         <html:submit property="submit" value="商品検索" />
      </html:form>
   </body>
</html:html>
--------------------------------------------------------

(これは以前vol.087で作成したitemSelect.htmlと同様の内容をStrutsのJSPで
書いたものです。)

編集が終わったら、保管(Ctrl + S)し、エディターの下のほうにある「プレビュー」タブ
をクリックして画面の様子を確認して下さい。
(当メールマガジンでは画面デザインを簡素にしています。画面デザインをきれいな
ものにしたい人は、自分で飾り付けを行って下さい。)



◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆


(次回に続く)


では、今日はここまでにします。



┏━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
★ホームページ:
      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. 不許無断複製