フォームを作成する
では、実際にテンプレートとSnippetを利用して、Twitterのクローンのようなアプリケーションを作成します。まずは、簡単な入力フォームを作成してみましょう。次のような画面です。
図2：簡単な入力フォーム
プロジェクトの作成
前回と同様に、mavenコマンドでLiftプロジェクトを作成します。コマンドラインから、リスト4のように入力することで、プロジェクトが作成されます。
［リスト4］プロジェクト作成
mvn archetype:generate -U \ -DarchetypeGroupId=net.liftweb \ -DarchetypeArtifactId=lift-archetype-basic \ -DarchetypeVersion=1.0 \ -DremoteRepositories=http://Scala-tools.org/repo-releases \ -DgroupId=demo.twitterclone \ -DartifactId=twitterclone \ -Dversion=1.0
それでは、実際に入力フォームを持つ画面をテンプレートとSnippetを利用して作成してみます。以下の3つの手順となります。
- テンプレートを作成する
- Snippetを作成する
- テンプレートをメニューに登録する
テンプレートを作成する
では、入力フォームを持つテンプレートを作成します。
「src/main/webapp」ディレクトリに、「twit.html」というファイル名で新しいファイルを作成します。ファイルの内容はリスト4の通りで、ファイルの文字コードはutf-8とします。
［リスト4］twit.html
<lift:surround with="default" at="content">
<style>
/* <![CDATA[ */
.status{
border-bottom:2px dashed #D2DADA;
line-height:1.1em;
}
.status li{
list-style:none;
}
.status textarea{
height:100%;
width :60%;
}
.message{
font-size:1.8em;
line-height:2.0em;
color:#666666;
}
/* ]]> */
</style>
<lift:Twit.post form="POST"> *1
<h2>こんにちわ!<twit:name/>さん!</h2>
<h2>いま何してる?</h2>
<ul class="status">
<li> <twit:status/> </li>
<li> <twit:submit/> </li>
</ul>
</lift:Twit.post>
<ul class="status"> *2
<lift:Twit.show>
<li class="message"> <twit:message/> </li>
</lift:Twit.show>
</ul>
</lift:surround>
このテンプレートの中には、2つのSnippetタグが含まれています。*1は「Twit.post」というSnippetで、*2は「Twit.show」というSnippetです。テンプレートを作成する段階では、Snippet側で動的に出力を置き換えたい部分を、<twit:name/>のような任意の名前空間のXMLタグにしておきます。
