2012年9月15日

Play Framework 實作教學 (2) - HTML 與模板引擎 ( Use template engine )

在我們開始更複雜的網站頁面設計之前,必須先來瞭解兩個基本的問題,
(1). HTML 寫法在 Play Framework 是否有甚麼不同 ?
(2). 該怎麼使用 Play Framework 提供的模板引擎 ( Template Engine ) ?



先來針對第一個問題來討論:
以 HTML <img> 標籤為例,一般我們在取得圖片 src 屬性時可能會指到相對路徑或絕對路徑,但我們在 Play Framework 架構底下時,可以先看到 conf 資料夾底下的 routes 設定檔,


這裡設定我們在取得資源時路徑,因此 Css、JavaScript、Image 檔案都可以放在 public 資料夾底下,所以然後我們可以在 href、src 的屬性這樣寫:


另外,當我們要使用 Ajax 時也可以利用 routes 內定義好的參數,
這邊必須注意一下 routes 定義的方式為 GET 或 POST ,Ajax 的方法也要搭配 $.get() 或 $.post(),


以上針對 HTML 取得資源路徑時可以搭配 routes 設定檔,routes 設定檔可以有更多的應用,可以參考官方網站 routes 介紹

接下來我們針對模板引擎來介紹一下,
在 Play Framework 要使用模板引擎必須要認得奇幻的關鍵字符 @  ( 官方說的!!!!! ),
若要針對 @ 來研究可以參考官方網站 @ 介紹,另外還有常用方式可以參考模板引擎常用範例,因為用法太多所以我只選擇幾個常用的來說明:

首先介紹參數使用方法,當我們在 Action 傳了一個 String 型態參數


我們可以在 index.scala.html 的頁面來定義 @(message : String),
要在頁面中使用則直接使用 @message 顯示時就會秀出 Your String Parameter 字串,


當我們 Action 回傳為物件時,我們也可以在頁面直接使用,例如:


再來就是 @if 與 @for ,例如:
可以看到 List<Profile> 型態的變數 list 以 for 迴圈來呈現, 中間加了 if 與 else 判斷,


最後介紹一個套版的用法,將要當 Master 的頁面加入 @content,@content 所在地方即 Sub 頁面插入位置,而 Sub 頁面需要加上 @main 把內容包裹起來,

例如:
Master 頁面


Sub 頁面


以上介紹幾個常用的模板用法,希望有幫助到需要的人。其他 Play Framework 相關教學可以參考本篇整理


熱門文章