Lift

Yabe video tutorial: day 5 Snippets and css seletor transforms

[Original]: http://learn-lift.ayafish.com/read/5

You can download the source code of this tutorial from: https://github.com/pkufashuo400/yabe-lift/tree/yabe-day-5

For more information about liftweb snippet, please refer to: http://simply.liftweb.net/index-3.4.html#toc-Section-3.4 and http://exploring.liftweb.net/master/index-5.html#toc-Chapter-5

For more information about css selector tranforms, please refer to: http://simply.liftweb.net/index-7.10.html#toc-Section-7.10 and http://www.assembla.com/spaces/liftweb/wiki/Binding_via_CSS_Selectors

Vimeo video link: http://vimeo.com/28256135
Tudou video link: http://www.tudou.com/programs/view/O_IE0qFkml0/

Invoke snippets

A snippet is used to display dynamic content in template. So it is always invoked from templates. Here is a sample to display latest post at the index page:

src/main/webapp/index.html:

<div class=“post lift:Posts.latestPost”>
…
</div>

src/main/scala/code/snippet/Posts.scala

class Posts {
def latestPost:CssSel = {
…
}
}

The index.html template invoke Posts.latestPost method by adding ‘lift:Posts.latestPosts’ in the class attribute.

Binding via css selectors

Css selector transforms is also quite simple to use. Here is the example to bind post title, content, post date and number of comments.

src/main/webapp/index.html

<div class=“post lift:Posts.latestPost”>
<h2 class=“post-title”>
<a href=“/read/1”>post title</a>
</h2>
<div class=“post-metadata”>
<span class=“post-author”>by Charlie Chen</span>,
<span class=“post-date”>2011-08-02</span>
<span class=“post-comments”> 2 comments, latest by Charlie</span>
</div>
<div class=“post-content”>
<div class=“about”>Detail:</div>
<span class=“post-content-span”> this is the content of the post.</span>
</div>
</div>

src/main/scala/code/snippet/Posts.scala

class Posts {
def latestPost:CssSel = {
val latestPost = Post.find(OrderBy(Post.id, Descending))

latestPost match {
case Full(p) => {
“a *” #> p.title.get &
“a [href]” #> (“/read/” + p.id.get) &
“.post-author *” #> ("by " + p.author.getFullName) &
“.post-date *” #> p.postedAt.asHtml &
“.post-comments *” #> ("| " + p.countComments + " comments " + p.latestCommentAuthor ) &
“.post-content-span *” #> p.content.get
}

case _ => “*” #> <span></span>
}
}
}

中文版

本节的源码可以从: https://github.com/pkufashuo400/yabe-lift/tree/yabe-day-5下载

关于 liftweb snippet 的更多信息，请查看: http://simply.liftweb.net/index-3.4.html#toc-Section-3.4 and http://exploring.liftweb.net/master/index-5.html#toc-Chapter-5

关于 css selector tranforms 的更多信息，请查看: http://simply.liftweb.net/index-7.10.html#toc-Section-7.10 and http://www.assembla.com/spaces/liftweb/wiki/Binding_via_CSS_Selectors

执行snippets

snippet是用来在网页中显示可变化的或动态的内容的，例如从数据库中读出的数据. liftweb的核心概念是将视图放在第一位，所以所有的snippet都是在视图中被执行. 下面的这个例子是在首页显示最新的博客文章:

src/main/webapp/index.html:

<div class=“post lift:Posts.latestPost”>
…
</div>

src/main/scala/code/snippet/Posts.scala

class Posts {
def latestPost:CssSel = {
…
}
}

只要在首页index.html的css class里加入 ‘lift:Posts.latestPosts’ ， 就可以执行 Posts.latestPost 方法

通过css选择器绑定

通过css选择器绑定动态内容的方法很简单. 下面这个例子将博客最新文章的标题、内容、发布日期和评论数绑定到了首页.

src/main/webapp/index.html

<div class=“post lift:Posts.latestPost”>
<h2 class=“post-title”>
<a href=“/read/1”>post title</a>
</h2>
<div class=“post-metadata”>
<span class=“post-author”>by Charlie Chen</span>,
<span class=“post-date”>2011-08-02</span>
<span class=“post-comments”> 2 comments, latest by Charlie</span>
</div>
<div class=“post-content”>
<div class=“about”>Detail:</div>
<span class=“post-content-span”> this is the content of the post.</span>
</div>
</div>

src/main/scala/code/snippet/Posts.scala

class Posts {
def latestPost:CssSel = {
val latestPost = Post.find(OrderBy(Post.id, Descending))

latestPost match {
case Full(p) => {
“a *” #> p.title.get &
“a [href]” #> (“/read/” + p.id.get) &
“.post-author *” #> ("by " + p.author.getFullName) &
“.post-date *” #> p.postedAt.asHtml &
“.post-comments *” #> ("| " + p.countComments + " comments " + p.latestCommentAuthor ) &
“.post-content-span *” #> p.content.get
}

case _ => “*” #> <span></span>
}
}
}