Play Framework 的模板引擎


Play 框架有自己的模板引擎來生成HTML頁面,該引擎使用 Groovy 做為表達式語言。你可以直接使用 Groovy 語言來創建動態的網頁,但並無需學習 Groovy 所有的知識,你需要了解的只是跟 Java 非常相近的一部分。Play 將所有的模板文件都放在 app/views 目錄下,所有頁面都是在請求時即時解析的。

接下來我們創建一個簡單應用:

oschina@oschina.net:~/dev/play$ /usr/share/play/play new views
~        _            _
~  _ __ | | __ _ _  _| |
~ | '_ \| |/ _' | || |_|
~ |  __/|_|\____|\__ (_)
~ |_|            |__/
~
~ play! 1.0.3, http://www.playframework.org
~
~ The new application will be created in /home/wichtounet/dev/play/views
~ What is the application name? Views
~
~ OK, the application is created.
~ Start it with : play run views
~ Have fun!
~

接下來檢查生成的文件,進入 app/views 目錄,我們可以看到下面這些內容:

  • Application : 存放應用主 controller 程序的模板
  • errors : 存放錯誤頁面模板,例如 404、500等
  • main.html : 主頁面模板

打開  Application/index.html ,代碼如下:

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

第一行表明此模板擴展自 main.html,接下來使用了 Play 框架的 set 指令來設置頁面的標題,這些指令都要進行關閉,最后一行打印一行歡迎信息。

然后我們再來看看 main.html 模板:

<!DOCTYPE html>
 
<html>
    <head>
        <title>#{get 'title' /}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">
        #{get 'moreStyles' /}
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
        <script src="@{'/public/javascripts/jquery-1.4.2.min.js'}" type="text/javascript" charset="utf-8"></script>
        #{get 'moreScripts' /}
    </head>
    <body>
        #{doLayout /}
    </body>
</html>

這個模板中包含一些特殊的指令:

  • #{get ‘title’ /} : 獲取變量 title 的值,該值僅在模板頁面中有效
  • @{‘/public/stylesheets/main.css’} : 引入某個靜態資源
  • #{doLayout /} : 此處插入子模板的內容,在本例中就是前面提到的 index.html 頁面,index.html 擴展自 main.html

如何在模板間傳遞參數呢?

傳遞參數很重要,例如我們在 controller 中讀取一些數據,並將這些數據傳遞到 view 中進行顯示。在 Play 框架中可以使用 render 方法來處理,例如:

package controllers;
 
import play.mvc.*;
 
public class Application extends Controller {
    public static void index() {
        String hello = "Hello World from Controller !";
 
        render(hello);
    }
}

index 方法中向模板傳遞了一個名為 hello 的變量,要在模板中獲取這個變量的值,只需 ${hello} 即可:

#{extends 'main.html' /}
#{set title:'Home' /}
 
Hello from the view
<br />
${hello}

怎樣,很簡單吧?

來個更復雜點的類吧

package models;
 
public class Book {
    private final String title;
 
    public Book(String title) {
        super();
 
        this.title = title;
    }
 
    public String getTitle() {
        return title;
    }
}

然后在 controller 傳遞此類的實例:

public static void index() {
    Book book = new Book("Hello Play !");
    render(book);
}

接下來在模板中獲取該對象

#{extends 'main.html' /}
#{set title:'Home' /}
 
Hello from the view
<br />
I've a book for you "${book.title}".

這里使用了 JavaBean 的 getting 方法,因此我們的Bean 必須有 getTitle 方法。

所有動態內容的輸出,Play 框架都做了轉碼處理,以防止XSS跨站點攻擊,如果你不想這樣做,那么可使用 raw() 方法,例如

${book.title.raw()}

但這不是一個好習慣,僅在你確認會帶來什么后果時才使用。

模板的注釋方式如下:

*{Will not be evaluated by the template engine}*

數組和列表

在實際使用過程中,列表和數組是經常要用到的,下面是一個傳遞列表的實例:

public static void index() {
        List<Book> books = new ArrayList<Book>(3);
        books.add(new Book("Hello Play !"));
        books.add(new Book("Hello Template !"));
        books.add(new Book("Hello Engine !"));
        render(books);
}

模板中使用該列表對象的代碼如下:

#{extends 'main.html' /}
#{set title:'Home' /}
I've some books for your :
<ul>
    #{list items:books, as:'book'}
        <li>${book.title}</li>
    #{/list}
</ul>

不是很復雜吧:)

使用腳本

如果你需要做更復雜的操作,我們可以在 Groovy 中使用腳本,在腳本中可以定義變量並可直接使用其他變量,例如:

#{extends 'main.html' /}
#{set title:'Home' /}
I've some books for your :
<ul>
    #{list items:books, as:'book'}
        %{
           bookTitle = book.title.toUpperCase();
        }%
        <li>${bookTitle}</li>
    #{/list}
</ul>

你可以做包括迭代、條件等一大堆復雜的事情,但記住,不要在模板中做過於復雜的功能,將這些業務邏輯放在 controller 或者是 models 中,模板應該越簡單越好。

定義標簽

Play 框架自帶很多的標簽,但你可以自己創建一些,為了創建標簽,我們必須在views目錄下創建名為 tags的子目錄,例如我們創建一個 booklist.html 文件,存放在 views/tags 目錄下,booklist.html 的代碼如下:

<ul>
    #{list items:_items, as:'book'}
        %{
            bookTitle = book.title.toUpperCase();
        }%
        <li>${bookTitle}</li>
    #{/list}
</ul>

使用 '_' 來獲取參數,本例中是 _items

有了這個自定義的tag,我們就可以將上面那個模板修改為:

#{extends 'main.html' /}
#{set title:'Home' /}
I've some books for your : 
#{booklist items:books /}

盡量利用參數來使得 tag 更加靈活。

到此我們就介紹了 Play 模板的一些基本的要素,更多關於Play 框架的模板請看官方文檔


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM