レイアウトの作成
では、レイアウトを作成してみましょう。ここでは、WebContent内に「layout」フォルダを用意し、そこに「default.jsp」というファイル名で用意することにしましょう。
<%@ page language="java" contentType="text/html; charset=sjis"
pageEncoding="sjis"%>
<%@ taglib prefix="stripes"
uri="http://stripes.sourceforge.net/stripes.tld"%>
<stripes:layout-definition>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=sjis">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/style/default.css" />
<stripes:layout-component name="html_head" />
</head>
<body>
<stripes:layout-component name="header">
<jsp:include page="/layout/_header.jsp" />
</stripes:layout-component>
<div class="pageContent">
<stripes:layout-component name="contents" />
</div>
<stripes:layout-component name="footer">
<jsp:include page="/layout/_footer.jsp" />
</stripes:layout-component>
</body>
</html>
</stripes:layout-definition>
注意して欲しいのは、テキストエンコーディングです。レイアウトで日本語を利用する場合、UTF-8ではフォームの送信時に文字化けを引き起こす現象が確認されたため、今回はすべてSJISを使用しています。
ここでは、<stripes:layout-definition>というタグの中に、HTMLのコードが記述されています。このように<stripes:layout-definition>を用意することで、この中に書かれたコードがレイアウト用のものであると認識されるようになります。
また、通常のHTMLのソースコードの中に、ところどころ<stripes:layout-componentというタグが埋め込まれています。これが、レイアウトコンポーネントです。ヘッダーとフッターでは、<jsp:include>を使い、特定のJSPファイルを埋め込んでいます。その他に、ヘッダー部分とボディ内に、<stripes:layout-component name="html_head" />と<stripes:layout-component name="contents" />の2つのレイアウトコンポーネントが埋め込まれています。ここに、Webページに用意した内容がはめ込まれ、表示されるようになります。
レイアウト関係のファイルを用意する
では、このdefault.jspで使用するその他のファイル類を完成させましょう。まずは、スタイルシートからです。WebContent内に「style」というフォルダを用意し、この中に「default.css」というファイル名で作成してください。
body {
background: #ffe;
}
h1.header {
background: #faa;
color: #A00;
font-size: 14pt;
font-weight: bold;
padding: 1px 10px 1px 10px;
margin: 0px 0px 25px 0px;
}
p.footer {
text-align: right;
color: #666;
font-size: 8pt;
border-width: 1pt;
border-style: none none solid none;
margin: 35px 0px 0px 0px;
}
div.pageContent {
color: #900;
font-size: 10pt;
padding: 0px 5px 0px 5px;
}
ここでは、ボディ、ヘッダー、フッター、コンテンツのそれぞれのスタイルシートを用意しておきました。これはあくまでサンプルなので、自由に設定変更してかまいません。その他、ヘッダーとフッターのJSPファイルも用意しておきましょう。いずれも「layout」フォルダ内に配置してください。
<h1 class="header">This is Header.</h1>
<p class="footer">copyright SYODA-Tuyano 2010.</p>
これらの内容も、それぞれ適当に書き換えてOKです。これらのファイルは、default.jspのレイアウトに用意した<jsp:include>タグでロードされ表示されます。
