Cart問題

2008/04/30からのアクセス回数 5036

Cart問題にページレイアウトを追加します。 ページレイアウトには、SiteMeshを使用し、サイドメニューにはカートの内容も 追加しました。

SiteMeshを使う

今回はじめて使ったSiteMeshですが、WebDB Press Vol. 18に紹介記事がでています。

Cart問題をヘッダ、サイドメニュー、本体の構成にしました。 今回例題に使用したワインは、ドイツのWeingut Dr. Schnellさんのものです。

pagelayout.jpg

SiteMeshの特徴

SiteMeshはservletのフィルターとして存在し、 複数のHTMLの内容を分解し、一つのHTMLページに再構成するツールです。 これによってframeを使わなくてもサイドメニューを表示したり、複数の画面の同時更新 ができるようになります。

ライブラリーの追加

いつものように必要なjarファイルをpom.xmlに追加します。 今回必要となるのは、sitemeshとdisplaytagです。

dependecyタグは以下のようになります。

    <dependency>
      <groupId>opensymphony</groupId>
      <artifactId>sitemesh</artifactId>
      <version>2.3</version>
    </dependency>
    <dependency>
      <groupId>displaytag</groupId>
      <artifactId>displaytag</artifactId>
      <version>1.1</version>
    </dependency>

これらは、実行時にのみ必要となりますので、eclipseの設定ファイルの変更は不要です。

追加ファイル

sitemeshの追加で追加・変更のあるファイルは以下の通りです。

  • src/main/webapp/WEB-INF/decorators/main.jsp(追加)
  • src/main/webapp/WEB-INF/decorators/side.jsp(追加)
  • src/main/webapp/WEB-INF/jspf/declarations.jsp(追加)
  • src/main/webapp/WEB-INF/decorators.xml(追加)
  • src/main/webapp/WEB-INF/web.xml(変更)
  • src/main/webapp/index.jps(変更)
  • src/main/webapp/menu.jps(追加)

decoratorsには、組み立て後に使用するjspファイルを保存します。 declarations.jspは、必要なタグライブラリの宣言、文字コードの宣言をまとめてあります。 decorators.xmlが、sitemeshのdecoratorsの設定ファイルです。 menu.jpsは、サイドメニュー用のjspファイルです。

web.xmlの変更について

sitemeshは、フィルターとして実装されていますので、web.xmlでフィルターの定義を する必要があります。

web.xmlに追加された定義は以下の通りです。

	<filter>
		<filter-name>sitemesh</filter-name>
		<filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>sitemesh</filter-name>
		<url-pattern>*.htm</url-pattern>
		<dispatcher>REQUEST</dispatcher>
		<dispatcher>FORWARD</dispatcher>
	</filter-mapping>

decorators.xmlの設定について

decorators.xmlでは、decoratorsディレクトリにある出力用jspファイルの 設定を行います。

ここでは、main.jsp, side.jpsの設定を行っています。

<decorators defaultdir="/WEB-INF/decorators">
	<decorator name="main" page="main.jsp">
		<pattern>/*</pattern>
	</decorator>
	<decorator name="side" page="side.jsp"/>
</decorators>

declarations.jspfについて

declarations.jspfは、あまり変更することはないでしょう。

<%@ page language="java"
		 session="false"
		 contentType="text/html; charset=UTF-8"
%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>

side.jspについて

side.jspでは、設定されたHTML入力をそのまま出力するだけなので、 以下のようになります。

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>

<decorator:body/>

main.jsp

サイドにmain.jspですが、 id="side"のdivタグでサイドメニューに入力されるページを指定し、id="main"のdivで メインのページを指定します。

特に、sideには、2つの入力を指定しているところに注意してください。

  • /cartops/list.htm:カート内容を表示するURL
  • /menu.jsp:サイドメニューを定義したjspファイル

です。このようにjspの他に別のページへのURLが指定できることが最大の特徴と言えます。

<%@ include file="/WEB-INF/jspf/declarations.jspf" %>

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<c:url value="/images/logo.jpg" var="logoUrl"/>
	<head>
		<title><decorator:title default="Weingut Dr.Schnell Online Store"/></title>

		<link rel="StyleSheet" href="<c:url value="/css/cart.css"/>" type="text/css" />
		
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="Cache-Control" content="max-age=0"/>
		<meta http-equiv="Expires" content="0"/>
		
		<decorator:head/>
	</head>
	<body id="store">	
		<div id="banner">
			<img src="${logoUrl}">			
			Weingut Dr.Schnell
		</div>
		
		<div id="columns">
			<div id="side">
				<page:applyDecorator page="/cartops/list.htm" name="side"/>
				<page:applyDecorator page="/menu.jsp" name="side"/>
			</div>
			<div id="main">
				<decorator:body/>
			</div>	
		</div>	
	</body>
</html>

index.jpsの変更

表示をカタログファイルに変更しました。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- simply redirects to the main switchboard page of the showcase web application -->

<c:redirect url="/productops/catalog.htm"/>

menu.jsp

メニューはHome以外は、ダミーのメニューとしました。

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
	<title>メニュー</title>
</head>
<body>
    <c:url value="/index.jsp" var="indexLink"/>
	<a href="${indexLink}">Home</a><br />
	<a href="http://www..../faq">Questions</a><br />
	<a href="http://www..../news">News</a><br />
	<a href="http://www..../contact">Contact</a><br />
</body>
</html>

javaファイルの変更

javaでは、CartOpsController.javaのaddの表示をカートの中身ではなく、カタログに 変更します。

    public ModelAndView add(HttpServletRequest request, HttpServletResponse response) throws Exception {
        Integer productId = new Integer(ServletRequestUtils.getRequiredIntParameter(request, "id"));
    	setupCartService(request);
    	Product product = manager.findById(productId);
    	LineItem item = new LineItem();
    	item.setProductId(productId);
    	item.setProduct(product);
    	cartService.addLineItem(item);
    	
    	ModelAndView modelAndView = new ModelAndView("redirect:/productops/catalog.htm");
        return modelAndView;
    }

たったこれだけの変更でページレイアウトを追加できるとは、本当にSiteMeshはすばらしい フィルターですね。

コメント

この記事は、

選択肢 投票
おもしろかった 0  
そうでもない 1  
わかりずらい 0  

皆様のご意見、ご希望をお待ちしております。


(Input image string)


添付ファイル: filepagelayout.jpg 731件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-08-15 (土) 20:27:39 (2776d)
SmartDoc