[CONTENTSへ戻る]

サンプルその3(詳細画面)

パラメータつきのリンクから呼び出すパターンを考えてみる。
サンプルとして、商品一覧画面の商品名にリンクを張り、商品詳細画面を表示するようにしてみる。
商品詳細画面のurlやコントローラ名などを以下のように決めておく。

url/productDetail.htm
コントローラ名productDetailController
コントローラクラスcom.ziqoo.web.controller.ProductDetailController
JSPファイルWEB-INF/jsp/productDetail.jsp商品詳細画面

商品一覧画面の修正

商品名をクリックすると、その商品の詳細画面に遷移するようにリンクを作成する。
productList.jspを以下のように修正する。

WEB-INF/jsp/productList.jsp
    --- 省略 ---
    <tr><th>商品番号</th><th>商品名</th><th>価格</th></tr>
    <c:forEach items="${pList}" var="prod">
        <tr>
            <td><c:out value="${prod.id}"/></td>
            <td><a href="<c:url value="productDetail.htm?id=${prod.id}"/>" ><c:out value="${prod.productName}"/></a></td>
            <td align="right">\<c:out value="${prod.price}"/></td>
        </tr>
    </c:forEach>
    </table>
    --- 省略 ---

商品詳細検索

詳細情報といっても、一覧と同じ内容なので、一覧で使用した商品マネジャクラスを
そのまま使用する。あまり詳細画面の意味がないがサンプルなので、これでよしとする。

コントローラクラスの作成

AbstractControllerクラスを継承してProductDetailControllerクラスを作成する。
この場合オーバーライドするのはhandleRequestInternalメソッドになる。
このコントローラでは、HttpServletRequestからidを取り出し、
そのidで商品情報を検索し、結果を返す処理を行う。
また、商品情報検索のためのProductManagerをプロパティとして持たせる。

WEB-INF/src/com/ziqoo/web/controller/ProductDetailController.java
package com.ziqoo.web.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.bind.ServletRequestUtils;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.AbstractController;

import com.ziqoo.biz.product.Product;
import com.ziqoo.biz.product.ProductManager;

public class ProductDetailController extends AbstractController {
	private ProductManager productMan;

	@Override
	protected ModelAndView handleRequestInternal(HttpServletRequest req,
			HttpServletResponse res) throws Exception {
		Integer id = ServletRequestUtils.getIntParameter(req, "id");

		Product product = new Product();
		product.setId(id);

		List pList = productMan.getProductList(product);

		return new ModelAndView("productDetail", "product", pList.get(0));
	}

	public ProductManager getProductMan() {
		return productMan;
	}

	public void setProductMan(ProductManager productMan) {
		this.productMan = productMan;
	}

}

詳細画面JSPの作成

商品詳細画面のJSPは以下のとおり。

WEB-INF/jsp/productDetail.jsp
<%@page pageEncoding="Shift_JIS" contentType="text/html; charset=Shift_JIS" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
    <link rel="stylesheet" type="text/css" href="css/main.css" >
    <title>springapp</title>
</head>
<body>
    <h3>商品詳細</h3>
    <hr>
    <table><tr>
    <td>
      <img src="<c:url value="${product.imageUrl}"/>">
    </td>
    <td>
        <table border="1">
        <tr>
            <th>商品番号</th><td align="right"><c:out value="${product.id}"/></td>
        </tr>
        <tr>
            <th>商品名</th><td><c:out value="${product.productName}"/></td>
        </tr>
        <tr>
            <th>価格</th><td align="right">\<c:out value="${product.price}"/></td>
        </tr>
        <tr>
            <th colspan="2">商品説明</th>
        </tr>
        <tr>
            <td colspan="2"><c:out value="${product.description}"/></td>
        </tr>
        </table>
    </td>
    </tr></table>
    <hr>
    <a href="<c:url value="menu.htm"/>">メニュー</a> 
</body>
</html>

設定ファイルの修正

springapp-servlet.xmlにコントローラクラスを追加する。
また、このコントローラに対するurlマッピングも追記する。

WEB-INF/springapp-servlet.xml
    --- 省略 ---
    <bean id="productDetailController" class="com.ziqoo.web.controller.ProductDetailController">
        <property name="productMan">
            <ref bean="productManager"/>
        </property>
    </bean>

    <bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
        <property name="mappings">
            <props>
                <prop key="/menu.htm">menuController</prop>
                <prop key="/productSearch.htm">productSearchController</prop>
                <prop key="/productDetail.htm">productDetailController</prop>
            </props>
        </property>
    </bean>
    --- 省略 ---

動作確認

商品一覧画面から商品名をクリックする。

商品詳細画面が表示される。


[CONTENTSへ戻る]