一個多語言的首頁
我們要創建一個多語言的首頁。
第一個版本我們將編寫的頁面將極其簡單:只是一個標題和一個歡迎信息。這是我們的/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=歡迎光臨<b>此中有蹊蹺</b> 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表達式的語言，此語言將會解析上下文環境中的變量。