Thymeleaf教程 (三) 創建一個多語言的首頁

目錄(?)[+]

一個多語言的首頁

我們要創建一個多語言的首頁。

第一個版本我們將編寫的頁面將極其簡單:只是一個標題和一個歡迎信息。這是我們的/WEBINF/templates/home.html文件

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Good Thymes Virtual Grocery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" media="all"
              href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
    </head>
    <body>
        <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
    </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

你會發現,此xhtml文件使用瀏覽器單獨打開的話,可以被良好的顯示,因爲它並不包含其他非法的XHTML標籤(瀏覽器會忽視所有它不明白的屬性,比如 th:text )。

讓我們看看上面代碼做了什麼。

首先在thymeleaf名稱空間被描述爲th:*屬性:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
  • 1
  • 2

然後我們添加了 th:text=”#{home.welcome}”屬性到P裏。

<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
  • 1

在這裏我們用了兩種不同的Thymeleaf Standard Dialect特性:

  • ”th:text“屬性,將會解析出一個結果來替換”Welcome to our grocery store!“
  • ”#{home.welcome}“表達式,表達式將會在外部環境中獲取指定的KEY的文本並返回。

那麼外部的文本在哪裏呢?

Thymeleaf的外部化文本的位置是完全可配置的,並且它將取決於 org.thymeleaf.messageresolver。IMessageResolver的具體實現。通常我們會使用*.properties,但我們可以創造我們自己的實現,例如,從數據庫中獲取文本。

然而,在我們在初始化我們的模板引擎時沒有指定消息解析器,這意味着我們的應用程序使用標準的消息解析器,此類會實現類org.thymeleaf.messageresolver。StandardMessageResolver

那麼消息解析器會在”/WEB-INF/templates/home.html“文件的相同目錄下去尋找同名的 .properties文件,舉個栗子:

  • /WEB-INF/templates/home_en.properties for English texts.
  • /WEB-INF/templates/home_es.properties for Spanish language texts.
  • /WEB-INF/templates/home_pt_BR.properties for Portuguese (Brazil) language texts.
  • /WEB-INF/templates/home.properties for default texts 
    (if locale is not matched).

home.properties文件中的內容如下:

home.welcome=歡迎光臨本店。
  • 1

以上就是我們使用Thymeleaf創建的模板,接下來是服務端的controller。

環境

讓我們回到第二課創建的HomeController

public class HomeController implements IGTVGController {
    public void process(HttpServletRequest request, HttpServletResponse response,
                ServletContext servletContext, TemplateEngine templateEngine) {
        WebContext ctx =new WebContext(request, response, servletContext, request.getLocale());
        templateEngine.process("home", ctx, response.getWriter());
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

這步將創建運行的服務端的環境。並映射路徑。

templateEngine.process("home", ctx, response.getWriter());
  • 1

然後運行程序。結果如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Good Thymes Virtual Grocery</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <link rel="stylesheet" type="text/css" media="all" href="/gtvg/css/gtvg.css" />
    </head>
    <body>
        <p>歡迎光臨本店!</p>
    </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

更多的文本和值的特性

不需要轉義的文本

home.welcome=歡迎光臨 <b>此中有蹊蹺</b> 本店!
  • 1

此文本會最終顯示爲:

home.welcome=歡迎光臨&lt;b&gt;此中有蹊蹺&lt;/b&gt; grocery store!
  • 1

對於這種不需要轉義的文本,則用th:utext屬性。

使用和顯示變量

現在讓我們添加更多的內容到我們的主頁。例如,我們可能希望顯示下面的日期我們的消息文本中,像這樣:

Welcome to our fantastic grocery store!
Today is: 12 july 2010
  • 1
  • 2

那麼首先我們將更改controller文件,並把日期參數添加進去。

public void process(HttpServletRequest request, HttpServletResponse response,
            ServletContext servletContext, TemplateEngine templateEngine) {
    SimpleDateFormat dateFormat = new SimpleDateFormat("dd MMMM yyyy");
    Calendar cal = Calendar.getInstance();
    WebContext ctx =new WebContext(request, response, servletContext, request.getLocale());
    ctx.setVariable("today", dateFormat.format(cal.getTime()));
    templateEngine.process("home", ctx, response.getWriter());
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

我們增加了一個String類型的日期。並且把此日期”today“放到模板中

<body>
    <p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
    <p>Today is: <span th:text="${today}">13 February 2011</span></p>
</body>
  • 1
  • 2
  • 3
  • 4

這樣就完成了。這裏使用了${。。}表達試,這是一個變量表達式,它能解析OGNL表達式的語言,此語言將會解析上下文環境中的變量。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章