- 追加された行はこの色です。
- 削除された行はこの色です。
[[Cart問題]]
2008/04/30からのアクセス回数 &counter;
#contents
Cart問題にページレイアウトを追加します。
ページレイアウトには、SiteMapを使用し、サイドメニューにはカートの内容も
追加しました。
** SiteMeshを使う [#d9bdfa80]
今回はじめて使ったSiteMeshですが、WebDB Press Vol. 18に紹介記事がでています。
Cart問題をヘッダ、サイドメニュー、本体の構成にしました。
今回例題に使用したワインは、ドイツのWeingut Dr. Schnellさんのものです。
#ref(pagelayout.jpg);
*** SiteMeshの特徴 [#y16cfa18]
SiteMeshはtomcatのフィルターとして存在し、
SiteMeshはservletのフィルターとして存在し、
複数のHTMLの内容を分解し、一つのHTMLページに再構成するツールです。
これによってframeを使わなくてもサイドメニューを表示したり、複数の画面の同時更新
が可能です。
*** ライブラリーの追加 [#v1599590]
いつものように必要なjarファイルをpom.xmlに追加します。
今回必要となるのは、sitemeshとdisplaytagです。
dependecyタグは以下のようになります。
#pre{{
<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プラグインの起動は不要です。
*** 追加ファイル [#bdf0ec19]
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の変更について [#mdbe88cd]
sitemeshは、フィルターとして実装されていますので、web.xmlでフィルターの定義を
する必要があります。
web.xmlに追加された定義は以下の通りです。
#pre{{
<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の設定について [#f0c97a03]
decorators.xmlでは、decoratorsディレクトリにある出力用jspファイルの
設定を行います。
ここでは、main.jsp, side.jpsの設定を行っています。
#pre{{
<decorators defaultdir="/WEB-INF/decorators">
<decorator name="main" page="main.jsp">
<pattern>/*</pattern>
</decorator>
<decorator name="side" page="side.jsp"/>
</decorators>
}}
*** declarations.jspfについて [#v280efe4]
declarations.jspfは、あまり変更することはないでしょう。
#pre{{
<%@ 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について [#z685711e]
side.jspでは、設定されたHTML入力をそのまま出力するだけなので、
以下のようになります。
#pre{{
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<decorator:body/>
}}
*** main.jsp [#a00279de]
サイドにmain.jspですが、
id="side"のdivタグでサイドメニューに入力されるページを指定し、id="main"のdivで
メインのページを指定します。
特に、sideには、2つの入力を指定しているところに注意してください。
- /cartops/list.htm：カート内容を表示するURL
- /menu.jsp：サイドメニューを定義したjspファイル
です。このようにjspの他に別のページへのURLが指定できることが最大の特徴と言えます。
#pre{{
<%@ 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="Pragprog Books Online Store"/></title>
<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の変更 [#r8a6a02a]
表示をカタログファイルに変更しました。
#pre{{
<%@ 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 [#x2a8d96b]
メニューはHome以外は、ダミーのメニューとしました。
#pre{{
<%@ 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ファイルの変更 [#nda7ed9e]
javaでは、CartOpsController.javaのaddの表示をカートの中身ではなく、カタログに
変更します。
#pre{{
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はすばらしい
フィルターですね。
** コメント [#z6cdda54]
この記事は、
#vote(おもしろかった,そうでもない,わかりずらい)
皆様のご意見、ご希望をお待ちしております。
#comment
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
