Spring MVC 視圖技術全景：JSP、Tiles、Velocity 與 PDF 導出實戰

系列背景

本文為「Apache Geronimo 與 Spring 框架」系列第 6 部分（最終回），展示 Spring MVC 內建視圖技術的整合與切換，以電話簿應用為例。

核心視圖技術對比

Tiles 整合：版面管理器

1. web.xml 註冊標籤庫

<jsp-config>
  <taglib>
    <taglib-uri>/tiles</taglib-uri>
    <taglib-location>/WEB-INF/struts-tiles.tld</taglib-location>
  </taglib>
</jsp-config>

2. 版面模板 phonebook-layout.jsp

<%@ taglib prefix="tiles" uri="/tiles" %>
<tiles:insert name="header"/>
<tiles:insert name="body"/>
<tiles:insert name="footer"/>

3. Spring 配置 TilesConfigurer 與 ResourceBundleViewResolver

<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles.TilesConfigurer">
  <property name="definitions">
    <list><value>/WEB-INF/defs/phonebook-definitions.xml</value></list>
  </property>
</bean>

<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.ResourceBundleViewResolver">
  <property name="order" value="1"/>
  <property name="basename" value="views-phonebook-tiles"/>
</bean>

4. 視圖定義 phonebook-definitions.xml

<tiles-definitions>
  <definition name="template" page="/WEB-INF/jsp/phonebook-layout.jsp">
    <put name="header" value="/WEB-INF/jsp/header.jsp"/>
    <put name="footer" value="/WEB-INF/jsp/footer.jsp"/>
  </definition>

  <definition name="home-mvc" extends="template">
    <put name="body" value="/WEB-INF/jsp/home-mvc.jsp" type="page"/>
  </definition>
  <!-- addentry-mvc, modifyentry-mvc 同理 -->
</tiles-definitions>

5. 視圖名稱對應 views-phonebook-tiles.properties

home-mvc.class=org.springframework.web.servlet.view.tiles.TilesView
home-mvc.url=home-mvc

Velocity 整合：模板引擎

1. Controller 處理資料並指定模板

public class PhonebookVelocityController implements Controller {
    public ModelAndView handleRequest(HttpServletRequest req, HttpServletResponse resp) {
        ModelAndView mv = new ModelAndView("phonebook-template"); // 對應 phonebook-template.vm
        mv.addObject("viewId", "home");
        mv.addObject("time", new Date());
        mv.addObject("phEntries", phonebookDao.getEntries());
        return mv;
    }
}

2. 版面模板 phonebook-template.vm

#set ($viewName = "${viewId}.vm")
#parse("header.vm")
#parse($viewName)
#parse("footer.vm")

3. 內容模板 home.vm（片段）

#foreach( $pbEntry in $phonebook )
  <tr>
    <td>$pbEntry.firstName $pbEntry.lastName</td>
    <td>$pbEntry.homeNumber</td>
    ...
  </tr>
#end

4. Spring 配置 VelocityViewResolver

<bean id="velocityViewResolver" class="org.springframework.web.servlet.view.velocity.VelocityViewResolver">
  <property name="suffix" value=".vm"/>
  <property name="prefix" value=""/>
</bean>

5. URL 映射 *.vel

<servlet-mapping>
  <servlet-name>phonebook</servlet-name>
  <url-pattern>*.vel</url-pattern>
</servlet-mapping>

PDF 導出：AbstractPdfView 實作

1. Controller 準備資料

public class PhonebookPDFController extends MultiActionController {
    public ModelAndView handlePdf(HttpServletRequest req, HttpServletResponse resp) {
        List entries = phonebookDao.getEntries();
        return new ModelAndView("phonebook_pdfView", "phonebook", entries);
    }
}

2. View 類繼承 AbstractPdfView

public class PhonebookPdfView extends AbstractPdfView {
    protected void buildPdfDocument(Map model, Document doc, PdfWriter writer, 
                                    HttpServletRequest req, HttpServletResponse resp) {
        List phonebook = (List) model.get("phonebook");
        // 使用 iText API 建立表格、字體、段落...
        PdfPTable table = new PdfPTable(5);
        table.addCell(new Phrase("Name", headerFont));
        // ...
        for (PhonebookEntry e : phonebook) {
            table.addCell(new Phrase(e.getFirstName() + " " + e.getLastName(), bodyFont));
            // ...
        }
        doc.add(table);
    }
}

3. 視圖解析器配置

<bean id="pdfViewResolver" class="org.springframework.web.servlet.view.ResourceBundleViewResolver">
  <property name="order" value="2"/>
  <property name="basename" value="views-phonebook-pdf"/>
</bean>

# views-phonebook-pdf.properties
phonebook_pdfView.class=phonebook.pdf.PhonebookPdfView

4. URL 映射 *.pdf

<servlet-mapping>
  <servlet-name>phonebook</servlet-name>
  <url-pattern>*.pdf</url-pattern>
</servlet-mapping>

架構優勢總結

• 視圖與邏輯解耦：Controller 僅準備 Model，ViewResolver 決定最終渲染技術。
• 無縫切換：修改配置即可在 JSP/Tiles/Velocity/PDF 間切換，Java 代碼零修改。
• 角色分工明確：開發人員專注業務邏輯，前端設計師專注模板/樣式。
• 測試容易：可針對單一視圖技術編寫獨立測試。

Spring MVC 的視圖抽象層證明了「配置勝過程式碼」的威力，讓團隊能根據專案階段與團隊技能，靈活選擇最適合的視圖技術組合。