Twitterのクローン作成で学ぶLiftによる開発の流れ

Scala＋Liftによる実践Webアプリケーション開発（4）

Templateの作成

　つぎに、出力するHTMLのTemplateを作成します。今回作成する画面は、メッセージを投稿する入力欄と、送信するボタンがあり、その下にこれまで投稿されたメッセージが表示される形です。

　「src/main/webapp」ディレクトリに、「twit.html」というファイル名で新しいファイルを作成します。ファイルの内容はリスト6の通りで、ファイルの文字コードはutf-8とします。

［リスト6］ Templateの作成

<lift:surround with="default" at="content">

<style>
/* <![CDATA[ */
.status{
  border-bottom:2px dashed #D2DADA;
  line-height:1.1em;
  margin-top:10px;
  margin-bottom:10px;
}
.status li{
  list-style:none;
}
.status textarea{
  height:100%;
  width :60%;
}
.message{
  font-size:1.8em;
  line-height:2.0em;
  color:#666666;
}
.user{
  font-size:1.2em;
  color:#3333FF;
}
.dateOf{
  font-size:0.9em;
  color:#333333;
}
/* ]]> */
</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">
   <lift:Twit.show> *2
     <li class="message"> <twit:message/> </li>
     <li class="user"> <twit:user/> </li>
     <li class="dateOf"> <twit:dateOf/> </li>
     <hr/>
   </lift:Twit.show>
 </ul>

</lift:surround>

　*1の<lift:Twit.post form="POST">が、投稿用のフォームの出力と、送信されたメッセージを保存するためのSnippetであるTwit#post関数に対応しています。

　*2の<lift:Twit.show>は、投稿されたメッセージを表示するTwit#show関数です。