精通 Grails：以 Groovy Server Pages (GSP) 重塑視圖層

Grails 採 MVC 架構，視圖存放於 grails-app/views，採用 Groovy Server Pages (GSP) 作為預設表示技術。本文深入 GSP 特性、標籤庫、片段模板與腳手架客製化，並概覽替代視圖技術。

視圖技術選擇：GSP 非唯一選項

Grails 為標準 Java EE 應用，視圖層可自由替換：

• JSF/Tapestry/Wicket：元件導向框架，透過插件或手動整合
• Dojo/YUI/jQuery：Ajax 庫放入 web-app/js 即可使用
• RichUI Plugin：整合多種 Ajax UI 元件
• RIA 平台：Flex、OpenLaszlo、GWT、ZK 插件支援
• JSP：原生支援，與 GSP 共存

但 GSP 以「HTML 上薄薄一層 Groovy」特性，提供最原生、可脫離框架的開發體驗。

GSP 核心標籤速覽

<g:each> 列表遍歷

<g:each in="${tripList}" status="i" var="trip">
    <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
        <td><g:link action="show" id="${trip.id}">${trip.id?.encodeAsHTML()}</g:link></td>
        <td>${trip.airline?.encodeAsHTML()}</td>
        <td>${trip.name?.encodeAsHTML()}</td>
        <td>${trip.city?.encodeAsHTML()}</td>
        <td>${trip.startDate?.encodeAsHTML()}</td>
        <td>${trip.endDate?.encodeAsHTML()}</td>
    </tr>
</g:each>

status 為計數器，var 命名當前項，?. 安全導航避免 NPE。

<g:link> / <g:createLink> / <g:createLinkTo> 連結生成

<div class="nav">
    <span class="menuButton"><a class="home" href="${createLinkTo(dir: '')}">Home</a></span>
    <span class="menuButton"><g:link class="create" action="create">New Trip</g:link></span>
</div>

支援屬性式（標籤體）與方法式（大括號）兩種呼叫風格。

<g:if> 條件渲染

<g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
</g:if>

其他常用標籤

• <g:paginate>：自動分頁導航
• <g:sortableColumn>：可排序欄位標題
• <g:form>/<g:submitButton>：表單與送出按鈕

自訂 TagLib：封裝可重用行為

簡單範例：動態年份版權宣告

class DateTagLib {
    def thisYear = { out << Calendar.getInstance().get(Calendar.YEAR) }
    def copyright = { attrs, body ->
        out << "<div id='copyright'>"
        out << "&copy; ${attrs['startYear']} - ${thisYear()}, ${body()}"
        out << " All Rights Reserved.</div>"
    }
}

使用：<g:copyright startYear="2002">FakeCo Inc.</g:copyright>

測試 TagLib：Grails 內建測試文化

class DateTagLibTests extends GroovyTestCase {
    def dateTagLib
    void setUp() { dateTagLib = new DateTagLib() }
    void testThisYear() {
        def expected = Calendar.getInstance().get(Calendar.YEAR)
        assertEquals("the years don't match", expected, dateTagLib.thisYear())
    }
}

執行 grails test-app，HTML 報告產出於 test/reports/html/index.html。

命名空間隔離

class DateTagLib {
    static namespace = 'trip'
    // ...
}

使用：<trip:copyright startYear="2002">...</trip:copyright>

片段模板：共用佈局片段

檔名以下劃線開頭（_footer.gsp），置於 grails-app/views 供全域共用：

<div id="footer">
    <g:copyright startYear='2002'>FakeCo, Inc.</g:copyright>
    <div id="powered-by">
        <img src="${createLinkTo(dir:'images', file:'grails-powered.jpg')}"/>
    </div>
</div>

引入：<g:render template="/footer" />（去掉底線，斜槓表相對 views 根目錄）。

客製化預設腳手架模板

1. grails install-templates 產生 src/templates
2. 結構：artifacts/（類別模板）、scaffolding/（視圖模板）、war/（web.xml）
3. 編輯 scaffolding/list.gsp 加入 <g:render template="/footer" />
4. 重啟伺服器生效

所有動態腳手架與 generate-views 產出的視圖將自動包含頁腳。

結語

GSP 與 TagLib、片段模板構建了強大且可測試的視圖層。下一篇將聚焦 Ajax：以「微型」HTTP 請求打造 Google Maps 風格的動態體驗，並實作多對多關聯的 AJAX 化介面。