2010.12.29 追記
下記の方法では、エスケープされるべき文字列があるとそれ以降の処理が行われないというバグが発生します。JSPに詳しくないのでよくわかっていないのですが、テンプレート作成をjsp:includeを使って行うと、おかしくなるようです。c:importを使うと、バグが発生しなくなります。
この記事を参考にしてくださったmatsukazさんのサイトでやり方が紹介されていますので、そちらを参考にしてください。宜しくお願いします。
以下、元の記事です。
ネタ的にはJSPなので、Slim3ネタではないといえばそうなのですが、自分みたいにGAE for Javaで初めてJSPを触る人もいるだろうから、自分のメモも兼ねて書いていこうと思います。
まずはこれが基本のテンプレートのlayout.jsp。
layout.jspの中で、さらにheader.jspとmenu.jspとfooter.jspをincludeしています。
header.jspに値を渡すために、layout.jspを読み込むファイルからparam.titleを再度代入しています。
param.contentが、各々のページで書かれる本文です。
<%@page contentType="text/html" pageEncoding="UTF-8" isELIgnored="false" session="false"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <%@taglib prefix="f" uri="http://www.slim3.org/functions"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>${param.title}</title> </head> <body> <div id="container"> <jsp:include page="/header.jsp"> <jsp:param name="title" value="${param.title}"/> </jsp:include> <div id="main"> <div id="content"> ${param.content} </div> <jsp:include page="/menu.jsp" /> </div> <jsp:include page="/footer.jsp" /> </div> </body> </html>
次は、header.jsp。layout.jspで読み込まれてますね。
単純にヘッダーを定義してるだけです。
<%@page pageEncoding="UTF-8" isELIgnored="false"%> <div id="header"> <h1>${param.title}</h1> </div>
次はfooter.jsp。これもlayout.jspで読み込まれています。
単純にフッターを定義しているだけです。
<%@page pageEncoding="UTF-8" isELIgnored="false"%> <div id="footer"> footer </div>
次はmenu.jsp。これもlayout.jspで読み込まれています。
単純にサイドバー用のメニューを定義しているだけです。
(今回はcss当ててないのでずらーっと出るだけ)
ちなみにslim3のdemoプロジェクトから取ってきただけですw
<%@page pageEncoding="UTF-8" isELIgnored="false"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="f" uri="http://www.slim3.org/functions"%> <div id="menu"> <ul> <li><a href="${f:url('/performance/')}">Performance<br />Slim3 vs JDO</a></li> <li><a href="${f:url('/gtx/')}">Global<br />Transaction</a></li> <li><a href="${f:url('/blog/')}">CRUD</a></li> <li><a href="${f:url('/checkbox/')}">Checkbox</a></li> <li><a href="${f:url('/multibox/')}">Multibox</a></li> <li><a href="${f:url('/radio/')}">Radio</a></li> <li><a href="${f:url('/select/')}">Select</a></li> <li><a href="${f:url('/multiselect/')}">Multiselect</a></li> <li><a href="${f:url('/upload/')}">Upload</a></li> <li><a href="${f:url('/blobstore/')}">Blobstore</a></li> <li><a href="${f:url('/locale/')}">Locale</a></li> <li><a href="${f:url('/timezone/')}">TimeZone</a></li> <li><a href="${f:url('/ajax/')}">HTML with Ajax</a></li> <li><a href="${f:url('/ktrwjr/index.html')}">Server side test</a></li> </ul> </div>
さて、ここからが本番です。
index.jspで、このlayout.jps群を使って簡単にページを作ろうと思います。
<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%> <jsp:include page="/layout.jsp"> <jsp:param name="title" value="Index"/> <jsp:param name="content"> <jsp:attribute name="value"> <p>Hello Index !!!</p> </jsp:attribute> </jsp:param> </jsp:include>
param.contentの値が、jsp:attribute name=”value”内の文字列になるので、layout.jspの${param.content}にHello Index!!!が入ります。タイトルはページ毎に変えたいので、各ページ側からjsp:param name=”title” value=”タイトル”で変えていきます。
ここまで分かれば、あとはlayout.jsp側や、そこから読み込んでいるheader, footer, menuを修正するのみ。コンテンツ制作者というかプログラマーはparam.contentに入れる値だけに注力すればいいはず!!
これでようやくやりたいことのスタート地点に立てたかなーという感じですね…。
今まで散々CakePHPとかのお世話になっているから、jspのやり方は全く分からなくて大変ですが、GAE使えるようになりたいんで頑張ってSlim3の流儀も覚えていきたいと思います。
Pingback: matsukazの日記
はじめまして、matsukazと申します。
久しぶりにJSPを利用したので、こちらの記事はとても参考になりました!
ただ、のボディ部に「&」という文字が含まれていると、そこで出力が止まってしまうという現象が発生しました。こちらの環境だけでしょうか?
を利用すれば回避できたので、今はそちらの方法でテンプレート化を行っています。
ブログにこの件の記事を書きましたので、トラックバックさせて頂きました。
matsukaz さん
コメントありがとうございます。
実は同じ現象に遭遇して対処方法がわからないで参っていました。
(僕の場合はダブルクォーテーションでしたが)
jsp自体もほとんどやったことがないのでトラックバック先の情報は非常に参考になりました。ありがとうございます。
記事のほうからリンクさせてもらおうと思います。
ダブルクォーテーションもだったんですか。
そちらは気付きませんでした!
対処方法が見つかって良かったですー。
あ、Twitterフォローさせて頂きました!
よろしくお願いします(^^