本文中的示例要求安裝 Eclipse 和 Web 應用服務器。這些示例使用 Tomcat 6.0,但是使用 WebSphere? Application Server Community Edition、Jetty 或 Tomcat 的老版本等其他 Web 應用服務器應該也可以。如果還沒有安裝 Web 應用服務器,可以通過 參考資料 下載并安裝 Apache Tomcat 6.0 或 WebSphere Application Server Community Edition。
Apache Click 是一個 Web 應用程序框架,可以用它快速地構建 Java Web 應用程序。Apache Click 的目標是提供一種無須使用 JSP 或 MVC 框架的構建 Web 應用程序的方法,這可以簡化 Web 應用程序的開發。Apache Click 采用 Apache License 許可協議(見 參考資料)。
Apache Click 并不使用復雜的框架,而是使用 HTML 模板和普通舊式 Java 對象 (POJO)。HTML 模板由 Apache Velocity 模板引擎處理(關于 Apache Velocity 的更多信息見 參考資料),這使模板盡可能接近標準的 HTML,不需要特殊的標記。使用 Velocity 模板不需要學習復雜的語法,讓 Web 開發人員可以發揮現有的 HTML 技能。
POJO 繼承由 Apache Click 發行版提供的基類。Apache Click 提供一個 Page
類和組件類,通過編寫它們的子類實現每個頁面的處理代碼。這些組件提供開箱即用的功能,可以用它們構建 HTML 控件并響應事件。
Apache Click 還包含一個用于 mock 測試的 API,可以用它改進單元測試、連續集成構建和測試驅動開發 (TDD)。關于 Mock API 的更多信息見 參考資料。
org.apache.click.Page
類是所有頁面組件的基類。可以使用 Page
基類中的方法處理多種事件,比如頁面初始化 (onInit()
)、頁面顯示 (onRender()
) 和頁面安全檢查 (onSecurityCheck()
)。在擴展 Page
的類中,可以通過覆蓋這些方法提供定制的功能。擴展 Page
的每個類還可以包含處理頁面事件的方法。
通過實現 java.io.Serializable
接口并在構造方法中調用 Page
基類的 setStateful()
方法,可以創建有狀態的頁面(見清單 1)。
清單 1. 在構造方法中設置 stateful 屬性
public WelcomePage() { setStateful(true); } |
Apache Click 提供幾個與 HTML 元素對應的控件組件。通過動態地添加這些控件組件,可以以編程方式構建表單。通過使用這些控件,可以在 Java 代碼中以編程方式獲取和設置 HTML 控件數據。
通過使用字段控件(即 TextField
、Select
)的 setEventListener()
方法,可以在擴展 Page
的類上定義一個方法,如果字段中的輸入是有效的,在處理表單期間就會執行這個方法。
按鈕和鏈接也提供事件處理??梢栽诒韱紊蟿摻ㄐ碌奶峤话粹o并把它鏈接到 Page
類中的一個方法,使用的聲明見清單 2。
清單 2. 用
onClick
事件處理方法創建提交按鈕Submit submitButton = new Submit("Submit Me", this, "onClick"); |
在單擊按鈕時,事件被分派給定制的 Page
類的 onClick()
方法。執行 onClick()
方法中的所有代碼,包括把數據保存到數據庫中或轉發給另一個頁面的代碼。
關于這個 API 的更多信息見 參考資料。
在默認情況下,Apache Click 使用 Apache Velocity 模板引擎。根據一些默認的映射規則,模板自動地與應用程序中擴展 Page
的類匹配。例如,名為 HelloPage
的頁面類自動地與 Web 項目中的 HTML 文件 hello.html 匹配。名為 HelloWorldPage
的頁面類自動地映射到 helloWorld.html 或 hello-world.html 文件。
如果不喜歡默認的頁面映射,可以修改 click.xml 文件,添加自己的定制映射。
除了修改 Velocity 使用的頁面映射外,還可以決定不使用 Velocity 作為模板引擎。Apache Click 允許使用 JSP 顯示頁面,這有助于使用現有的 JSP。
從網站下載 Apache Click(見 參考資料)。下載之后,把壓縮 (.zip) 文件解壓到容易記住的位置。
如果想看看 Apache Click 附帶的示例,可以把 dist 文件夾中的 click-examples.war 文件部署到 Web 應用服務器中。示例包括許多不同的場景,比如構建表格、使用不同的控件和使用不同的模板。
下載和解壓文件之后,就可以開始創建包含 Apache Click 庫的 Web 應用程序了。
把所需的 Java Archive (JAR) 文件放在 Web 項目中就可以安裝 Apache Click。在 Web 項目中包含 Apache Click 之后,把項目部署到 Web 應用服務器中。
在 Eclipse 中,按以下步驟創建使用 Apache Click 的 Web 應用程序:
- 從菜單中選擇 New > Other。
- 在 Select a Wizard 中,選擇 Web / Dynamic Web Project 并單擊 Next。
- 輸入一個名稱作為 Project Name(例如,
MyFirstClick
)。 - 選擇一個 Target Runtime,比如 Apache Tomcat 6.0。關于為 Eclipse 配置運行時的更多信息見 參考資料。
- 單擊 Finish — 其他設置可以保持默認值。
完成這些步驟之后,在 Eclipse 中應該有一個新的空 Web 項目(見圖 1)。
圖 1. 空的 Web 項目

現在,可以導入 Apache Click 庫。按以下步驟導入庫:
- 單擊 File > Import。
- 從列表中選擇 General / File System 并單擊 Next。
- 瀏覽到解壓 Apache Click 文件的目錄并選擇 dist 目錄。
- 在文件列表中,選擇 click-{version}.jar 和 click-{version}-extras.jar 文件(見圖 2)。
圖 2. 導入 JAR 文件 - 確認在 Into folder 字段中選擇了 WebContent/WEB-INF/lib 文件夾,然后單擊 Finish。
在 WEB-INF 目錄中導入 JAR 文件之后,修改 Web 應用程序的 web.xml 文件以包含 ClickServlet
,Apache Click 使用這個 servlet 分派事件。配置這個 servlet 之后,就不再需要修改 web.xml 文件了。web.xml 的內容見清單 3。
清單 3. web.xml 文件
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>MyFirstClick</display-name> <servlet> <servlet-name>ClickServlet</servlet-name> <servlet-class>org.apache.click.ClickServlet</servlet-class> <load-on-startup>0</load-on-startup> </servlet> <servlet-mapping> <servlet-name>ClickServlet</servlet-name> <url-pattern>*.html</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>welcome.html</welcome-file> </welcome-file-list></web-app> |
現在創建一個包(比如 com.example.myfirstclick.pages
),您的頁面類將放在這里。創建包之后,在 Web 項目的 WEB-INF 文件夾中創建新文件 click.xml。在 click.xml 文件中指定剛才創建的包的名稱,見清單 4。
清單 4. click.xml 文件
<?xml version="1.0" encoding="UTF-8"?><click-app> <pages package="com.example.myfirstclick.pages" /></click-app> |
既然項目已經設置好了,就可以開始編寫擴展 Apache Click 類的類了。第一個類擴展 Page
(所有頁面組件的基類)。通過選擇 File > New > Other 并選擇 Java / Class 在包中創建新的類。一定要輸入 org.apache.click.Page
作為 Superclass。
在新類中添加清單 5 所示的內容。
清單 5.
WelcomePage
類package com.example.myfirstclick.pages;import org.apache.click.Page;public class WelcomePage extends Page { // Initialize the value to something protected String theMessage = "Welcome!"; public WelcomePage() { // Add the value to the map ("message" = "$message") addModel("message", theMessage); }} |
創建了 WelcomePage
類之后,需要創建一個 HTML 頁面,它是為瀏覽器提供輸出的模板。因為 Apache Click 的默認模板引擎是 Apache Velocity,HTML 文件與一般的靜態 HTML 頁面相似。
在 Web 項目的 WebContent 文件夾中創建新的 HTML 頁面(名為 welcome.html),添加清單 6 所示的內容。
清單 6. welcome.html 文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>MyFirstClick Welcome</title></head><body><p>$message</p></body></html> |
注意 HTML 文件中的 $message
變量。在生成頁面時,Velocity 模板引擎會替換這個變量。ClickServlet
把 WelcomePage
類與 welcome.html 文件匹配起來。WelcomePage
類把它的 message 字段初始化為一個值 (Welcome
),然后在構造方法中通過傳遞變量名(message
映射到 $message
)和值(theMessage
字段),使用 addModel()
方法把這個值添加到模塊中。分配給這個字段的值顯示在瀏覽器中。
創建文件之后,可以以 Web Archive (WAR) 的形式把文件導出到 Tomcat webapps 文件夾,從而試用這個應用程序。最簡便的方法是在 Eclipse 中執行以下步驟:
- 單擊這個項目并選擇 File > Export。
- 選擇 Web / WAR 文件并單擊 Next。
- 在 Destination 字段中,瀏覽到 Tomcat webapps 文件夾。
- 確保選擇 Overwrite existing files 并單擊 Finish(見圖 3)。
圖 3. 以 WAR 的形式導出項目
把 WAR 文件導出到 Tomcat webapps 目錄之后,可以通過在瀏覽器中訪問 http://localhost:8080/MyFirstClick/welcome.html 來瀏覽這個新頁面(如果 Web 應用服務器使用不同的端口,或者 Web 應用程序使用不同的名稱,URL 可能有變化)。
修改 WelcomePage
中 message 字段的值,然后把它重新部署到 Web 應用服務器中。如果看到修改后的值,就說明應用程序運行正常,可以研究更動態的示例了。
既然已經完成了簡單的歡迎頁面,就可以試試更復雜的功能了。動態的網站不僅僅包含只讀的數據,其中大多數都需要用戶輸入并使用用戶輸入執行某些操作。典型的示例是通過表單接收輸入,然后在另一個網頁上顯示輸入。
對于這個示例,創建另一個擴展 Page
的類。把這個新類命名為 InputPage
(見清單 7)。
清單 7.
InputPage
類package com.example.myfirstclick.pages;import org.apache.click.Page;import org.apache.click.control.Form;import org.apache.click.control.Submit;import org.apache.click.control.TextField;public class InputPage extends Page { public Form form = new Form(); private TextField nameField; public InputPage() { form.setLabelsPosition(Form.POSITION_TOP); nameField = new TextField("Enter your name"); form.add(nameField); form.add(new Submit("Submit", this, "onSubmitClick")); } public boolean onSubmitClick() { SayHelloPage nextPage = (SayHelloPage)getContext().createPage("/sayHello.html"); nextPage.setName(nameField.getValue()); setForward(nextPage); return false; }} |
這個新類在構造方法中創建一個 Form
對象,在其中添加一個用于輸入的字段。然后,添加一個 HTML 提交按鈕和處理方法(onSubmitClick()
方法)。當單擊提交按鈕時執行這個處理方法,所以應該在其中創建下一個頁面。在添加下一個頁面(即 SayHelloPage
)之前,代碼無法編譯。
現在,在 Web 項目的 WebContent 文件夾中創建一個新的 HTML 文件并命名為 input.html。在這個頁面上添加一個 $form
變量,它將被替換為 InputPage
類中表單字段的 HTML 輸出。完成之后,input.html 文件應該像清單 8 這樣。
清單 8. input.html 文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>MyFirstClick Input Sample</title></head><body>$form</body></html> |
現在,添加顯示輸入的頁面,這個類名為 SayHelloPage
,它也擴展 org.apache.click.Page
。這個新類應該像清單 9 這樣。
清單 9.
SayHelloPage
類package com.example.myfirstclick.pages;import org.apache.click.Page;public class SayHelloPage extends Page { private String name; @Override public void onInit() { super.onInit(); if (name != null) { addModel("name", name); } } public void setName(String name) { this.name = name; } } |
這個類通過覆蓋 Page
基類的 onInit()
方法設置頁面上顯示的值。應該檢查通過 addModel()
方法添加到模塊中的任意值是否為 null — 如果試圖添加 null 值,它會拋出 IllegalArgumentException
。這要求您編寫出在值為 null 時以適當方式顯示頁面的代碼。
通過一個公共的 getter 方法 setName()
公開 SayHelloPage
類中的 name 字段。InputPage
中的 onSubmitClick()
事件處理方法在獲得頁面的新實例之后調用這個 accessor 方法。
onSubmitClick()
方法使用來自 nameField
控件的值 (nameField.getValue()
) 設置名稱。然后使用 setForward()
方法轉移到下一個頁面。結果是 SayHelloPage
上的 name 字段被填入輸入框中的值并把它放在 $name
中。
現在添加 HTML 文件 sayHello.html,它包含 $name
變量。sayHello.html 的內容見清單 10。
清單 10. sayHello.html 頁面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Results</title></head><body><p>Hello, $name!</p></body></html> |
在 Web 瀏覽器中訪問 http://localhost:8080/MyFirstClick/input.html 以運行這個示例。在文本框中輸入一個值并單擊 Submit。現在瀏覽器中會顯示這個值。
通過使用 Apache Click,可以用輕量模型快速編寫 Web 應用程序,不需要使用復雜的框架。Apache Click 的簡單性讓我們能夠使用自己的面向對象編程實踐和模式。默認的模板引擎 Velocity 不需要定制的標記,讓 HTML 代碼更接近 HTML 規范的要求。
Apache Click 中的組件和事件模型提供了一種構建 HTML 控件和處理事件的方法,非常容易掌握。
學習
- 閱讀 Apache License。
- 進一步了解 Apache Velocity。
- 進一步了解 Apache Click Mock API。
- 進一步了解 Apache Click API。
- 閱讀 “用 Tomcat 和 Eclipse 開發 Web 應用程序”(developerWorks,2007 年 5 月),進一步了解如何使用 Apache Tomcat 和 Eclipse 構建 Web 應用程序。
- 在 技術書店 瀏覽關于這些主題和其他技術主題的圖書。
獲得產品和技術
- 下載 Apache Tomcat。
- 下載 Apache Click。
- 下載 WebSphere Application Server Community Edition,這是一個基于 Apache Geronimo 技術構建的輕量 Java EE 應用服務器。
- 下載 IBM 產品評估版 或者在 IBM SOA Sandbox 中在線試用,開始使用這些來自 DB2?、Lotus?、Rational?、Tivoli? 和 WebSphere 的應用程序開發工具和中間件產品。