helo.htmの作成
では、Webページを作成しましょう。まずは、テンプレートファイルからです。「helo.htm」というファイルをWebContent内に作成し、次のように記述をしてください。
<!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>Helo</title> <link rel="stylesheet" type="text/css" href="style.css"></link> </head> <body> <h1>Hello Click!</h1> <p>$msg</p> </body> </html>
見れば分かるように、ごく一般的なHTMLのソースコードです。しかし、途中に「$msg」というテキストがあります。これは、Pageクラスで用意した変数を埋め込むものです。このようにApache Clickのテンプレートでは、「$名前」という形でJava側で用意した値を埋め込むことができます。
Apache Clickでは、テンプレートのレンダリングエンジンとして「Velocity」を採用しています。Velocityで利用できる機能は基本的にApache Clickのテンプレートファイルでも使える、と考えてよいでしょう。
ついで、スタイルシートも用意しましょう。ここでは「style.css」というファイル名で、helo.htmと同じWebContent内に用意をします。
h1 {
background:#FFAAAA;
font-size: 14pt;
padding: 0px 5px 0px 5px;
}
ここでは、h1タグの設定だけを用意しておきました。必要に応じてここに追記して利用していけばよいでしょう。
HeloPageクラスの作成
では、Pageクラスを作成しましょう。プロジェクトの「src」内に「jp.codezine.click」というパッケージを用意し、その中に「HeloPage.java」というソースコードファイルを作成します。そして次のように記述をしましょう。
package jp.codezine.click;
import org.apache.click.Page;
public class HeloPage extends Page {
public HeloPage(){
this.addModel("msg", "これは、Apache Clickのサンプルです。");
}
}
Pageクラスは、org.apache.click.Pageクラスを継承して作成をします。ここでは、コンストラクタだけが用意されています。この中で「addModel」というものを呼び出しています。これにより、指定した名前のモデル（値を保管するオブジェクト）に値を設定します。ここでは"msg"という名前のモデルに値を設定しています。これがテンプレートで$msgという形で埋め込まれ、値が表示されていたのです。
このように、テンプレートに渡す値は、addModelを使って値を「モデルマップ」と呼ばれるものに追加しておきます。テンプレート側では、「$モデル名」と記述することで、モデルマップにある指定のモデルの値を取り出し出力できます。（実をいえば、もっと簡単な方法があるのですが、それについては後述します）
これで基本的なソースコードが揃いましたので、サーバにデプロイして実際にアクセスをしてみてください。ここではclickappというプロジェクトで作成しましたので、サーバで実行したら、
または、
このようなアドレスにアクセスをしてみてください。画面に「Hello Click!」というタイトルが表示され、その下にメッセージが現れます。このメッセージは、先にHomePageクラス内で「addModel」を使ってモデルマップに追加したものです。addModelされたStringをいろいろと修正して、表示が変わることを確認すると良いでしょう。
