![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
2008/04/30からのアクセス回数 8795
Cart問題にページレイアウトを追加します。 ページレイアウトには、SiteMeshを使用し、サイドメニューにはカートの内容も 追加しました。
今回はじめて使ったSiteMeshですが、WebDB Press Vol. 18に紹介記事がでています。
Cart問題をヘッダ、サイドメニュー、本体の構成にしました。 今回例題に使用したワインは、ドイツのWeingut Dr. Schnellさんのものです。
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の追加で追加・変更のあるファイルは以下の通りです。
decoratorsには、組み立て後に使用するjspファイルを保存します。 declarations.jspは、必要なタグライブラリの宣言、文字コードの宣言をまとめてあります。 decorators.xmlが、sitemeshのdecoratorsの設定ファイルです。 menu.jpsは、サイドメニュー用のjspファイルです。
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ディレクトリにある出力用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は、あまり変更することはないでしょう。
<%@ 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では、設定されたHTML入力をそのまま出力するだけなので、 以下のようになります。
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %> <decorator:body/>
サイドにmain.jspですが、 id="side"のdivタグでサイドメニューに入力されるページを指定し、id="main"のdivで メインのページを指定します。
特に、sideには、2つの入力を指定しているところに注意してください。
です。このように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>
表示をカタログファイルに変更しました。
<%@ 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"/>
メニューは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では、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はすばらしい フィルターですね。
この記事は、
皆様のご意見、ご希望をお待ちしております。
