reactive-web: Lift をシンプルに

Messages

Messages ウィジェットを使うと、モードレスで閉じることのできるアラートを非常に簡単にアプリケーションに追加できます。最も簡単な利用方法は、アプリケーションワイドなリクエストスコープのシングルトン Messages オブジェクトを介してアクセスする方法です。それには、BootMessages.init を呼び出す必要があります。この方法を使う場合、デフォルトテンプレートスニペット reactive.Messages を surround テンプレート (templates-hidden/default.html など) に含めることができ、ほかのすべてのスニペットの外部に置くことができます。

別の方法として、ローカルな Messages インスタンスを使用することもできます。この場合は、CSS セレクタを使ってインスタンスをページに挿入するだけです。たとえば、"#messages" #> myMessages.renderWithTemplate() のようにします。

メッセージ用の別のテンプレートを用意することもできます。それには、NodeSeq としてテンプレートを renderWithTemplate(myTemplate) に渡すか、またはテンプレートを自分独自のテンプレートに埋め込んで render を呼び出します。

独自の css を用意したり、提供されている css を使ったりすることができます。提供されている css は、メッセージを半透明でオーバーレイし、position: fixed でビューにピン止めします。

以下に示すのはライブデモです。

ライブデモ
[このライブデモは原文サイトでご覧ください]
Scala ソースファイル
package reactive.web.demo.snippet.widgets

import scala.xml.Text
import scala.xml.NodeSeq

import net.liftweb.util.Helpers._

import reactive.Observing
import reactive.web.DomEventSource
import reactive.web.widgets.Messages
import reactive.web.html.Button

class MessagesDemo extends Observing {
  def render = "button" #> (DomEventSource.click ->> {
    Messages += "This is a string"
    var counter = 1
    Messages += Text("This is html") ++ Button("Click me"){
      def count {
        lazy val m: NodeSeq = Text("Message #"+counter) ++ Button("Next"){
          Messages -= m
          counter += 1
          count
        }.render
        Messages += m
      }
      count
    }.render
  })
}
テンプレート Xml
<div>
    <head>
<link href="/classpath/reactive-web-default.css" rel="stylesheet" type="text/css"></link>
    </head>
    <div class="l:reactive.Messages"></div>
    <button>Click here</button>
  </div>