本格派エンジニアの工具箱

第10回 Apache Clickにおけるテンプレートとコントロールの使い方

この記事を読むのに必要な時間:およそ 3 分

テンプレートを利用する

今回は,前回紹介した軽量WebアプリケーションフレームワークApache Clickにおいて,テンプレートやコントロールを利用する方法を解説します。まずはテンプレートからやっていきましょう。

Apahe ClickではApache Velocityによるテンプレート・エンジンを利用しています。これによって,Webサイト内の複数のページの共通部分をテンプレート化して簡単に見た目を整えることができるようになっています。テンプレートの作り方ですが,まずベースとなるhtmlファイルを作成します。ここでは次のような内容で,ファイル名を「my-template.htm」としました。

<html>
  <head>
    <title>Apache Click Sample - $title</title>
  </head>
  <body>

    <div id="header" style="background-color: #333333">
      <h1 style="color: white">$title</h1>
    </div>
    
    <div id="contents" style="padding: 1em 0.5em 1.5em">
      #parse($path)
    </div>

    <hr style="color: #333333" />
    <div align="right" style="color: #666666">$copyright</div>

  </body>
</html>

テンプレート内でも,通常のWebページと同様にサーバ上のJavaオブジェクトを利用することができます。この例では,$titleと$copylightが,関連付けられたJavaオブジェクトの値に置き換わる部分です。ページごとのコンテンツは「#parse($path)」と書いた部分に挿入されます。#parseはVelocityテンプレートエンジンを用いてパースされたテンプレートを描画するためのメソッドです。$pathはテンプレートファイルのパスで,ClickServletによって自動的に値がセットされます。

my-template.htmに関連付けるサーバ側のJavaクラスは,自動マッピングの規則にしたがって「MyTemplate」という名前にします。このクラスは,通常のWebページ用のクラスと同様にPageクラスを継承して作成し,以下のようにgetTemplate()メソッドをオーバーライドして対象となるテンプレート用ファイルを返すようにします。

MyTemplate.java

package jp.gihyo.toolbox.click;

import org.apache.click.Page;

public class MyTemplate extends Page {
  @Override
  public String getTemplate() {
    return "/my-template.htm";
  }
}

続いて,このテンプレートを適用するWebページを作成します。まずJavaプログラムの方はMyTemplateクラスを継承して作成します。ここで,次に示すようにテンプレート内で使用されているtitleとcopyrightの変数を宣言しておきます。

SecondPage.java

package jp.gihyo.toolbox.click;

public class SecondPage extends MyTemplate {
  public String title = "テンプレートの使用";
  public String copyright = "(C) 2011 杉山貴章";
}

クラス名が「SecondPage」なので,これに対応するhtmlは「second-page.htm」とします。内容は,テンプレートの「#parse($path)」の部分に挿入したい内容で,ここではシンプルに次のようにしました。

<p>Apache Clickでテンプレートを使用した例です。</p>

できたら,サーバに配備してWebブラウザからsecond-page.htmにアクセスすると,図1のようにテンプレートが適用されたページが表示されるはずです。

図1 テンプレートが適用されたWebページ

図1 テンプレートが適用されたWebページ

コメント

コメントの記入