はじめに
Webアプリケーションでは視覚的デザインが重要になります。フレームワークを利用する場合も、「便利で強力だからデザインはある程度あきらめる」では使えません。逆に、フレームワークを使うからこそ、こんなにデザインも便利に行えるようになる、というものがなければいけません。
そこで今回は、デザインを強化するために「レイアウト機能」「サイト移動用のメニュー」「表示の国際化対応」「独自表示を持ったオリジナルコントロールの作成」といった点について、その基本を紹介していきましょう。
対象読者
- Javaで手ごろなフレームワークを探している技術者。
- 最近のフレームワークをごくざっと理解しておきたい方。
- Web開発の手法がどうも気に入らない、と常々考えているJavaプログラマ。
レイアウトを考える
Webアプリケーションを作成する場合、重要になるのは内部の処理だけでなく、ページのデザインやレイアウトなどもでしょう。特に、全体を統一したレイアウトとして作成する場合、1つずつのページを個別に作成するのはあまりよい方法とは言えません。全体のレイアウトを用意し、そこに必要に応じてコンテンツをはめ込んで表示するような仕組みがあれば、簡単に統一感あるWebサイトを構築できます。
Apache Clickの場合、テンプレートエンジンにVelocityを採用していますので、このVelocityの機能を利用することで、こうしたレイアウト機能を作ることができます。まず、全体のレイアウト用のテンプレートを作り、それを利用するPageを作成するのです。そして個々のページは、このレイアウトにはめ込んで表示していきます。Pageクラスも、レイアウト用のPageクラスを継承して作ることで、レイアウト関係の機能が実装されるようにすればよいでしょう。
レイアウトのテンプレート
では、実際にレイアウトの基本的な仕組みを作ってみましょう。まずはレイアウト用のテンプレートを作成します。ここでは「layout.htm」というファイル名で用意することにしましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>$title</title>
<link rel="stylesheet" type="text/css" href="layout.css"></link>
$imports
</head>
<body>
<h1 id="header">$header</h1>
<div>#parse($path)</div>
<div id="footer">$footer</div>
</body>
</html>
ここでは、いくつかの変数が埋め込まれています。$title、$header、$footerは、それぞれページタイトル、ヘッダー表示、フッター表示を出力するものです。実際にページに表示されるコンテンツは、#parse($path)になります。「parse」は、引数に指定されたテンプレートをレンダリングし出力する働きをするVelocityのディレクティブです。
$pathは、Pageクラスに用意されているpathというpublicフィールドで、これに要求されたパスが保管されています。例えば"/helo.htm"といった値がここに入っているわけです。つまり、#parse($path)によって、要求されたテンプレートがロードされレンダリングされた結果が出力される、というわけです。
スタイルシートの用意
続いて、レイアウトのテンプレート用スタイルシートを用意しましょう。これは「layout.css」というファイル名で用意します。
body {
background: #EEFFFF;
color: #336666;
}
#header {
background:#AAAAFF;
color: #000099;
font-size: 14pt;
padding: 0px 5px 0px 5px;
}
#footer {
text-align: right;
font-size: 8pt;
border-top-style: solid;
border-top-width: 1px;
}
#title {
font-size: 12pt;
font-weight: bold;
}
内容は、それぞれで適当にアレンジしてかまいません。ここではbodyの他、header、footer、titleといったID用のスタイルを用意しておきました。これらは、レイアウト・テンプレートなどで使用されるものになります。
レイアウト用Pageクラス
続いて、レイアウト用のPageクラスを作成します。これはjp.codezine.clickパッケージに「LayoutPage.java」というファイル名で用意します。ソースコードは次のようになります。
package jp.codezine.click;
import org.apache.click.Page;
public class LayoutPage extends Page {
@Override
public void onInit() {
super.onInit();
}
@Override
public String getTemplate() {
return "/layout.htm";
}
}
ここでは、「getTemplate」メソッドをオーバーライドして、そこでロードするテンプレートを"/layout.htm"に設定しています。これにより、このLayoutPageおよびこれを継承するサブクラスでは、常にlayout.htmがテンプレートとしてロードされるようになります。
ロードされたlayout.htmでは、#parse($path)により、要求されたテンプレートがロードされはめ込まれます。このように「レイアウト用のテンプレートの中で、本来のテンプレートをロードして1つのページとして表示する」ということで、統一されたデザインによるページ表示を実現します。
