目次

Version 6, last updated by guy.bolton.king at Dec 01 11:17 UTC

デザイナーフレンドリなテンプレート

Lift 2.2-M1 で導入されたのが、デザイナーフレンドリな HTML テンプレートです。Lift のテンプレートはすべて、特別な名前空間を用意しなくても完全に有効な XHTML または HTML5 であり、同時に Lift の機能のすべてを備えています。Lift の機能強化点は次のとおりです。

2.2-M1 以前の典型的な Lift テンプレートは、次のようなものでした。

<lift:surround with="default" at="content"> 
  <h2>Welcome to your project!</h2> 
  <p> 
    <lift:HelloWorld.howdy> 
      <span class="my_class">Welcome to app at<b:time/></span> 
    </lift:HelloWorld.howdy> 
  </p> 
</lift:surround>

<lift:surround> タグで呼び出された “surround” スニペットによって、テンプレートのコンテンツがテンプレートページクロームで囲まれます。<lift:surround> タグと <lift:HelloWorld.howdy> タグはスニペットを呼び出しますが、これらのタグは、“lift” の名前空間を別に宣言しておかない限り、有効な XHTML または HTML5 ではありません。

2.2-M1 以降では、ノードの class 属性を介してスニペットを呼び出すことができます。次の例を見てください。

<div class="lift:surround?with=default;at=content"> 
  <h2>Welcome to your project!</h2> 
  <p> 
    <span class="my_class lift:HelloWorld.howdy"> 
      <span>Welcome to app at<b:time/></span> 
    </span> 
  </p> 
</div>

あともう少しで、新規の名前空間をテンプレートから取り除くことができます (以前は、Lift の NodeSeq => NodeSeq スニペット変換の一部としてバインディングを行うにはスニペット固有の名前空間が必要でした)。次に示すのは HelloWorld の Scala コードです。

class HelloWorld { 
  def howdy(in: NodeSeq): NodeSeq = 
    Helpers.bind("b", in, "time" ->Helpers.formattedTimeNow) 
} 

CSS セレクタトランスフォームを使えば、HelloWorld は次のようになります。

class HelloWorld { 
  def howdy = ".time" #>Helpers.formattedTimeNow 
} 

そして、テンプレートの方は次のようになります。

<div class="lift:surround?with=default;at=content"> 
  <h2>Welcome to your project!</h2> 
  <p> 
    <span class="my_class lift:HelloWorld.howdy"> 
      <span>Welcome to app at<span class="time">no time like the present</span></span> 
    </span> 
  </p> 
</div>

見ればわかるとおり、特別な名前空間は取り除かれています。あともう一歩で、ソースリポジトリに 1 つファイルを用意しておけば、デザイナーとコーダーのどちらもブラウザで表示したりファイルを開いて編集したりできるようになります。

さて、このページはまだブラウザに読み込むことはできません。なぜなら、このページには <html> タグや <body> タグがないからです。したがって、こうしたクロームをページの前後に配置する方法を見つける必要がありますが、Lift の "surround" のしくみを使って動的にクロームを置き換えさせてみましょう。

テンプレートファイルを最終的に次のようにしたいわけです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<title>Home</title>
  </head>
  <body>
    <div class="lift:surround?with=default;at=content">
      <h2>Welcome to your project!</h2>
      <p>
        <span class="lift:helloWorld.howdy">
          Welcome to your Lift app at<span id="time">Time goes here</span>
        </span>
      </p>
    </div>
  </body>
</html>

さて、どうすれば "surround" 機能を活かして、ボイラープレート・クロームをなくすことができるでしょうか。たとえば、こんなやり方はどうでしょう。実際のルート要素 ("surround" スニペットがある要素) に id (“real_content” など) でマークを付け、body タグに lift:content_id=real_content という class を付けます。テンプレートは次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<title>Home</title>
  </head> 
  <body class="lift:content_id=real_content"> 
    <div class="lift:surround?with=default;at=content" id="real_content"> 
      <h2>Welcome to your project!</h2> 
      <p> 
        <span class="lift:helloWorld.howdy"> 
          Welcome to your Lift app at<span id="time">Time goes here</span> 
        </span> 
      </p> 
    </div> 
  </body> 
</html>

どうでしょうか。これで、完全に有効でありながら、Lift のロジックをすべて備え、しかもデザイナーフレンドリーなテンプレートになりました。