以下のWebページがすばらしいサンプルを提供してくれています。
Struts2 Tiles Example
1. Tilesに必要なライブラリ
2. web.xmlの設定
3. struts.xmlの設定
4. tiles.xml の設定
5. jsp の準備
6. Actionの設定(再び struts.xml)
1. Tiles に必要なライブラリ
Tilesを利用するのに, 追加すべき jar ファイルは以下です( Struts2.3.1 の場合)
struts2-core-2.3.1.2.jar
struts2-dojo-plugin-2.3.1.2.jar
struts2-tiles-plugin-2.3.1.2.jar
tiles-api-2.0.6.jar
tiles-jsp-2.0.6.jar
commons-beanutils-1.7.0.jar
commons-digester-2.0.jar
Struts2そのものにつきましては, 筆者のほかのブログGoogle App Engine(Struts2 との連携)
を参考にしてください
2. web.xmlの設定
tiles 用にListener を追加します
<listener>
<listener-class>org.apache.struts2.tiles.StrutsTilesListener</listener-class>
</listener>
3. struts.xmlの設定
tiles用に, result-type を追加します
<result-types>
<result-type name="tiles" class="org.apache.struts2.views.tiles.TilesResult" />
</result-types>
4. tiles.xml の設定
tilesで利用するページの設定を書きます
WEB-INF 以下にtiles.xml というファイルを作ります
今回は, index.jsp という枠をつくり, その中に, title, header, body, footer という一段組みのレイアウトを作る例を紹介します
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd ">
<tiles-definitions>
<definition name="index" template="/WEB-INF/jsps/index.jsp">
<put-attribute name="title" value="Resource Editor"/>
<put-attribute name="head" value="/WEB-INF/jsps/header.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsps/main.jsp"/>
<put-attribute name="footer" value="/WEB-INF/jsps/footer.jsp"/>
</definition>
</tiles-definitions>
ファイルでは, <tiles-definitions> のなかに, <definition> を, tile を1つ作るたびに増やします。
template というところに, 実際に使うテンプレート(JSPを挿入していく枠)をつくります。
ここでは, index.jsp が表示するページであり, 枠です。
その中に, <put-attribute> で, 挿入していくJSPを書いていきます。
これで, index.jsp には, header.jsp, main.jsp, footer.jsp を挿入できる準備ができました。
5. jsp の準備
4までで, 使う jsp の準備が整いました。しかし, 実際にテンプレートとなるところで, 挿入する位置を
指定しなければなりません。 それでは, まずテンプレートです。
ex ) index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!DOCTYPE html>
<html>
<head>
<title><tiles:insertAttribute name="title"/></title>
<link rel="stylesheet" href="styles/index.css" type="text/css" />
</head>
<div id="container">
<div id="head">
<tiles:insertAttribute name="head" />
</div>
<div id="content">
<tiles:insertAttribute name="body" />
</div>
<div id="foot">
<tiles:insertAttribute name="footer" />
</div>
</div>
</html>
重要なところは, taglib で, tiles を利用するために設定をいれること
tiles.xml で定義したtile を tiles:insertAttribute でいれるところです。
これで1段組のレイアウトができました。(CSSは省略)
ex) header.jsp
<h1>
Header
</h1>
ex) footer.jsp
<hr>
<b>
Footer
</b>
ex) main.jsp
<div class="imglist">
<div class="imagecaption">
<a href="/index"><p><img src="img/product.png"/></p></a>
<p class="menu_title">Product</p>
</div>
<div class="imagecaption">
<a href="/index"><p><img src="img/file.png"/></p></a>
<p class="menu_title">File</p>
</div>
<div class="imagecaption">
<a href="/index"><p><img src="img/pencil.png"/></p></a>
<p class="menu_title">Resources</p>
</div>
</div>
6. Actionの設定(再び struts.xml)
最後に, tilesを利用した場合に, index.jsp を表示させるための設定を struts.xml にします
<action name="index"
class="com.daiji110.resourceeditor.web.action.IndexAction">
<result name="index" type="tiles">index</result>
</action>
重要なところは, type に tilesというのを指定しています表示するjsp のところでは, tiles.xml で指定したtemplate の名前 index を入れている
これがActionです。 indexというターゲットに処理をお返ししています。
package com.daiji110.resourceeditor.web.action;
import com.opensymphony.xwork2.ActionSupport;
public class IndexAction extends ActionSupport
{
private static String RESULT = "index";
@Override
public String execute() throws Exception
{
return RESULT;
}
}
以上で終わりです。header, footer, menu など共通する部分をつくっておき, template, body を
ページごとに作るといった作業をしていくわけです。
0 件のコメント:
コメントを投稿