Apache Wicket 入門實戰：基於組件的 Web 開發範式與 NetBeans 整合

前言：Java 與 HTML 完全分離的組件框架

Wicket 最大特色：**每個 UI 組件對應一個 Java 類與同名 HTML 檔**，透過 wicket:id 綁定。Java 端負責邏輯與資料，HTML 端純粹負責呈現，設計師與開發者可平行作業。NetBeans Wicket Support 插件提供專案模板、組件向導、雙向導航，極大提升開發效率。

環境建置

1. NetBeans IDE 6.0 Web & Java EE
2. JDK 5.0/6.0
3. 安裝兩個 NBM 插件（Tools → Plugins → Downloaded）：
   • org-netbeans-modules-web-wicket.nbm（模板與功能）
   • org-netbeans-modules-wicket-library.nbm（Wicket JAR 庫）

建立第一個 Wicket 專案

1. File → New Project → Web → Web Application。
2. 專案名 MyFirstWicketApp，伺服器任選（支援 J2EE 1.4/EE 5）。
3. Frameworks 面板勾選 Wicket，保持預設值：

• Action Servlet Name: WicketApplication
• Action URL Pattern: /wicket/*
• Wicket Application Class: com.myapp.wicket.WicketApplication
• Wicket Home Page: Home（生成 Home.java + Home.html）
• Dummy POJO: 生成範例 JavaBean
• Main Package: com.myapp.wicket
• Add Example Formatting: 生成可重用 Header 組件與 CSS

Finish 後專案結構：

核心檔案解析

1. web.xml：Wicket Servlet 定義

<servlet>
  <servlet-name>WicketApplication</servlet-name>
  <servlet-class>org.apache.wicket.protocol.http.WicketServlet</servlet-class>
  <init-param>
    <param-name>applicationClassName</param-name>
    <param-value>com.myapp.wicket.WicketApplication</param-value>
  </init-param>
  <load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
  <servlet-name>WicketApplication</servlet-name>
  <url-pattern>/wicket/*</url-pattern>
</servlet-mapping>

2. WicketApplication.java：應用級設定（相當於 struts-config.xml/faces-config.xml）

public class WicketApplication extends WebApplication {
    public Class getHomePage() { return Home.class; } // 必須實作
}

3. Home.java / Home.html：首頁組件雙子星

// Home.java
public class Home extends WicketExamplePage { public Home() {} }

<!-- Home.html -->
<html><head><link rel='stylesheet' href='style.css'/></head><body>
  <span wicket:id='mainNavigation'/>  <!-- 佔位符，對應 Header 組件 -->
</body></html>

4. WicketExamplePage.java：所有頁面共同父類，自動掛載 Header

public class WicketExamplePage extends WebPage {
    public WicketExamplePage() { this(null); }
    public WicketExamplePage(IModel model) {
        super(model);
        add(new WicketExampleHeader("mainNavigation", 
            Strings.afterLast(getClass().getPackage().getName(), '.')));
    }
}

5. WicketExampleHeader.java / .html：可重用 Header 面板組件

// Java 端
public class WicketExampleHeader extends Panel {
    public WicketExampleHeader(String id, String title) {
        super(id);
        add(new Label("exampleTitle", title));
    }
}

<!-- HTML 端 -->
<html xmlns:wicket><body>
  <wicket:panel>
    <h1>Wicket Example</h1>
    <p id="titleblock"><b><font size="+1">Start of 
      <span wicket:id="exampleTitle">Example Title Goes Here</span>
    </font></b></p>
  </wicket:panel>
</body></html>

NetBeans 雙向導航： 在 HTML wicket:id 按 Ctrl 點擊 → 跳轉到 Java add(new Label(...))；Java 端按 Alt+Left 返回 HTML。

新增第一個自訂組件：Label

1. Home.html 添加 <span wicket:id="message1">this text will be replaced</span>
2. Home.java 建構子添加 add(new Label("message1", "Hello Wicket!"));
3. Run 專案，瀏覽器顯示「Hello Wicket!」。

HTML 標籤（如 <h2>）包裹 <span wicket:id> 即可控制樣式，Java 端完全不涉及 HTML 結構。

建立可重用面板組件：FooterPanel

1. 右鍵專案 → New → File/Folder → Wicket → Panel，類名 FooterPanel，包 com.myapp.wicket。
2. 生成 FooterPanel.java/.html。
3. FooterPanel.html 已含 <span wicket:id="message">；Java 端已 add(new Label("message", "I am a reusable component!"));。
4. Home.java 建構子添加 add(new FooterPanel("footerPanel"));
5. Home.html </body> 前添加 <span wicket:id='footerPanel'/>
6. Run 專案，頁腳出現在指定位置。

進階學習建議

完成本教程後，建議研讀 David R. Heffelfinger《A First Look at the Wicket Framework》中的 Pizza Application 範例，深入掌握 Model、Behavior、AJAX 整合、測試等進階主題。