Liftを用いたWebアプリケーションの作り方 その3

今回は、で作成したto-doの登録結果を一覧表示できるようにします。

完成後の画面は以下のようになります。

TD.scalaの変更

to-do一覧には、to-doが完了したものを含めて表示するか、除いて表示するかのチェックボックスを設けます。このチェックボックスの設定内容は、セッションで管理することにするので、boolean値のセッション情報を表すオブジェクトを作成します。
src/main/scala/com/liftworkshop/snippet/TD.scala の最下部に以下のオブジェクトを追加します。

class TD { 
・・・
}
object QueryNotDone extends SessionVar(false)

引き続き、TD クラスの中にto-doをデータベースから検索する toShow メソッドを追加します。子のメソッドでは、検索条件として、ToDo.owner が現在のユーザであることを指定します。さらに、先ほど追加したオブジェクト、つまり、完了済みの to-do かどうかを判断し、ToDo.done の検索条件を追加します。

class TD { 
・・・
   doBind(form) 
 }

  private def toShow = 
    ToDo.findAll(By(ToDo.owner, User.currentUser), 
        if (QueryNotDone) By(ToDo.done, false) 
        else Ignore[ToDo], 
        OrderBy(ToDo.done, Ascending), 
        OrderBy(ToDo.priority, Descending), 
        OrderBy(ToDo.desc, Ascending))

}
object QueryNotDone extends SessionVar(false)

さらにその下に以下のdescメソッドを追加します。このメソッドは一覧のto-doの内容を表示します。to-doの内容を編集時にはテキストボックスを表示し、リターンを押すことで反映できるようにしています。この処理はajaxで行います。

class TD { 
・・・
  private def desc(td: ToDo, reDraw: () => JsCmd) = 
      swappable(<span>{td.desc}</span>, 
      <span>{ajaxText(td.desc, 
             v => {td.desc(v).save; reDraw()})} 
      </span>)
}
object QueryNotDone extends SessionVar(false)

最後にリストを表示するためのlistメソッドと、ヘルパーメソッドであるdoListを追加します。先ほどまでで追加したメソッドも、ここから呼ばれます。

class TD { 
・・・
  def list(html: NodeSeq) = { 
    val id = S.attr("all_id").open_! 
 
    def inner(): NodeSeq = { 
      def reDraw() = SetHtml(id, inner()) 
 
      bind("todo", html, 
        "exclude" -> 
          ajaxCheckbox(QueryNotDone, v => {QueryNotDone(v); reDraw}), 
        "list" -> doList(reDraw) _) 
    }
    inner() 
  }

  private def doList(reDraw: () => JsCmd)(html: NodeSeq): NodeSeq = 
    toShow. 
    flatMap(td => 
      bind("todo", html, 
        "check" -> ajaxCheckbox(td.done, 
               v => {td.done(v).save; reDraw()}), 
        "priority" -> 
        ajaxSelect(ToDo.priorityList, Full(td.priority.toString), 
               v => {td.priority(v.toInt).save; reDraw()}), 
        "desc" -> desc(td, reDraw) 
   ))
}
object QueryNotDone extends SessionVar(false)

to-do一覧表示の追加

登録したアイテムを表示するよう、src/main/webapp/index.html の最下部に以下のコードを追加します。lift:TD.list にて追加した snippet が呼ばれます。

  ・・・
  <lift:TD.list all_id="all_todos"> 
   <div id="all_todos"> 
     <div>Exclude done <todo:exclude/></div> 
     <ul> 
      <todo:list> 
        <li> 
         <todo:check><input type="checkbox"/></todo:check> 
         <todo:priority> 
           <select><option>1</option></select> 
         </todo:priority> 
         <todo:desc>To Do</todo:desc> 
        </li> 
      </todo:list> 
     </ul> 
   </div> 
  </lift:TD.list>
 </lift:Util.in>
</lift:surround>

ajax による編集も可能となっています。