摘要：所以任務會在第一個請求時同步執行。修改來展示這些對象你可以閱讀模板是怎么工作的。標簽只有兩個參數用于展示的文章對象以及展示的模式可以是全文，全文附評論，預告中的一種現在我們可以將冗余代碼替換成標簽，重寫主頁重載頁面，檢查是否一切安好。

既然我們完成了數據模型的初步定義，是時候開始創建應用的頁面了。這個頁面將僅僅展示最近的博文，以及一個舊文章的列表。

下面是我們想要實現的目標的草圖：

事實上，在開始編寫第一個頁面之前，我們還有一件事要做。編寫一個缺乏數據的Web應用是乏味的。你甚至不能測試正在做的事情。但因為我們還沒完成編輯頁面，所以不能發布新的文章作為測試。

有一個注入默認數據到博客中的方法是在應用加載時加載一個fixture文件。要想這么做，我們得創建一個啟動（Bootstrap）任務。一個Play任務可以在任意HTTP請求之外執行，比如在應用啟動時或者通過CRON，或在特定時間點執行。

讓我們來創建/yabe/app/Bootstrap.java任務，通過Fixtures加載一堆數據：

import play.*;
import play.jobs.*;
import play.test.*;

import models.*;

@OnApplicationStart
public class Bootstrap extends Job {

    public void doJob() {
        // Check if the database is empty
        if(User.count() == 0) {
            Fixtures.loadModels("initial-data.yml");
        }
    }

}

我們用@OnApplicationStart注解這個任務，告訴Play我們希望在應用啟動時，同步執行該任務。

  
事實上該任務的啟動時機取決于是在開發模式還是在生產模式。在開發模式，Play會等待第一個請求才開始。所以任務會在第一個請求時同步執行。這樣，當任務失敗，你將在瀏覽器中看到錯誤信息。在生產模式，任務會在應用啟動時執行（就在運行play run的時候），如果出錯，應用將無法啟動。

你可以在yabe/conf/文件夾下創建一個initial-data.yml。你當然可以重用我們之前用過的data.yml文件。

現在用play run運行應用，并在瀏覽器打開http://localhost:9000/

終于，是時候編寫主頁了。

你還記得第一個頁面是如何輸出的么？首先路由文件指定/URL將調用controllers.Application.index()action方法。然后這個方法調用render()并執行/yabe/app/views/Application/index.html模板。

我們將保持這些組件，不過給它們添加新的代碼來加載文章列表并展示。

打開/yabe/app/views/Application/index.html控制器，修改index()action來加載文章列表，就像這樣：

package controllers;

import java.util.*;

import play.*;
import play.mvc.*;

import models.*;

public class Application extends Controller {

    public static void index() {
        Post frontPost = Post.find("order by postedAt desc").first();
        List olderPosts = Post.find(
            "order by postedAt desc"
        ).from(1).fetch(10);
        render(frontPost, olderPosts);
    }

}

你可以看懂我們是怎樣向render方法傳遞對象的嗎？這將允許我們用同樣的名字在模板中訪問它們。在這個例子，變量frontPage和olderPosts將在模板中可用。

修改/yabe/app/views/Application/index.html來展示這些對象：

#{extends "main.html" /}
#{set title:"Home" /}

#{if frontPost}
    

        

            ${frontPost.title}
        
        

            by ${frontPost.author.fullname}
            ${frontPost.postedAt.format("MMM dd")}
            
                 |  
                ${frontPost.comments.size() ?: "no"} 
                comment${frontPost.comments.size().pluralize()}
                #{if frontPost.comments}
                    , latest by ${frontPost.comments[-1].author}
                #{/if}
            
        
        

            ${frontPost.content.nl2br()}
        
    

    #{if olderPosts}
        
    
            
Older posts from this blog

            #{list items:olderPosts, as:"oldPost"}
                

                    

                        ${oldPost.title}
                    
                    

                        
                            by ${oldPost.author.fullname}
                        
                        
                            ${oldPost.postedAt.format("dd MMM yy")}
                        
                        

                            ${oldPost.comments.size() ?: "no"} 
                            comment${oldPost.comments.size().pluralize()}
                            #{if oldPost.comments}
                                - latest by ${oldPost.comments[-1].author}
                            #{/if}
                        
                    
                
            #{/list}
        

    #{/if}

#{/if}

#{else}
    

        There is currently nothing to read here.
    
#{/else}

你可以閱讀模板是怎么工作的。簡單地說，它允許你動態訪問Java對象。在幕后我們使用Groovy的語法。大多數你看到的優雅的結構（比如?:運算符）就來自Groovy。但你并不需要為了寫Play模板而學習Groovy。如果已經熟悉其他像JSP with JSTL的模板語言，你不會感到惘然無所適。

Ok，現在刷新博客的首頁。

不是很美觀，但是至少有內容了！

但是因為需要通過多種方式展示文章（全文，全文附評論，預告），現在我們不得不寫了過于冗余的代碼。我們應該創建一些類似函數的東西，這樣就可以在不同的模板中調用它們了。這實際就是Play標簽所做的事情！

要想創建一個標簽，僅需創建新的/yabe/app/views/tags/display.html文件。一個標簽只是另一個模板。它就像函數一樣可以接受參數。#{display /}標簽只有兩個參數：用于展示的文章對象以及展示的模式（可以是全文，全文附評論，預告中的一種）

*{ Display a post in one of these modes: "full", "home" or "teaser" }*


    

        ${_post.title}
    
    

        by ${_post.author.fullname},
        ${_post.postedAt.format("dd MMM yy")}
        #{if _as != "full"}
            
                 |  ${_post.comments.size() ?: "no"} 
                comment${_post.comments.size().pluralize()}
                #{if _post.comments}
                    , latest by ${_post.comments[-1].author}
                #{/if}
            
        #{/if}
    
    #{if _as != "teaser"}
        

            
Detail: 
            ${_post.content.nl2br()}
        
    #{/if}


#{if _as == "full"}
    

        

            ${_post.comments.size() ?: "no"} 
            comment${_post.comments.size().pluralize()}
        

        #{list items:_post.comments, as:"comment"}
            

                

                    by ${comment.author},
                    
                        ${comment.postedAt.format("dd MMM yy")}
                    
                
                

                    
Detail: 
                    ${comment.content.escape().nl2br()}
                
            
        #{/list}

    
#{/if}

現在我們可以將冗余代碼替換成標簽，重寫主頁：

#{extends "main.html" /}
#{set title:"Home" /}

#{if frontPost}

    #{display post:frontPost, as:"home" /}

    #{if olderPosts.size()}

        

            
Older posts from this blog

            #{list items:olderPosts, as:"oldPost"}
                #{display post:oldPost, as:"teaser" /}
            #{/list}
        

    #{/if}

#{/if}

#{else}
    

        There is currently nothing to read here.
    
#{/else}

重載頁面，檢查是否一切安好。

如你所見，index.html繼承自main.html。因為我們需要給所有的博客頁面提供通用的布局，包括博客標題和驗證鏈接，我們需要修改這個文件。

編輯/yabe/app/views/main.html：

    
             
        
        
        
    
    

        

            

                yabe.
            
            

                

                    Log in to write something
                
            
            

                About this blog
                
${blogTitle}
                
${blogBaseline}
            
        

        

            #{doLayout /} 
        

        

            Yabe is a (not that) powerful blog engine built with the 
            Play framework
            as a tutorial application.
        

    

刷新并檢查結果。大體上能工作，除了blogTitle和blogBaseLine變量未能顯示。這是因為我們還沒把它們傳遞給render(...)調用。當然我們可以在index action的render()調用中加入它們。但因為main.html將被作為整個應用的主模板，我們不想每次都添加它們。

要讓一個控制器（或者其子類）的每個action都執行同樣的代碼，有一個方式是定義@Before攔截器。

讓我們給Application控制器添加addDefaults()方法：

@Before
static void addDefaults() {
    renderArgs.put("blogTitle", Play.configuration.getProperty("blog.title"));
    renderArgs.put("blogBaseline", Play.configuration.getProperty("blog.baseline"));
}

  
你需要在Application.java中導入play.Play。

所有添加進renderArgs作用域的變量將可被模板訪問。并且你可以看到這個方法從Play.configuration對象中讀取變量的值。Play.configuration對象包括/yabe/conf/application.conf的所有配置鍵。

在配置文件中添加這兩個鍵：

# Blog engine configuration
# ~~~~~
blog.title=Yet another blog
blog.baseline=We will write about nothing

刷新主頁，檢查現在能否正常展示。

現在博客的主頁已經基本完成，但不是很美觀。我們需要添加一些樣式來裝扮它。如你所見，主模板main.html文件引入了/public/stylesheets/main.css。我們將往它里面添加更多樣式。

從這里下載一份樣式表，然后復制到/public/stylesheets/main.css。（譯者注：最困難的部分就這樣一筆帶過了，這讓我想到了如何畫一匹馬）

刷新頁面，你應該看到最終的完成稿了。

博客主頁已經完成。又到了提交修改的時候了：

$ bzr st
$ bzr add
$ bzr commit -m "Home page"