Wicket framkework 使用邏輯及設計頁面分離概念,
不但使元件更能重用, 而且網頁設計師及程式員可以同時工作.
網頁設計師使用網頁編輯器設計網頁, 程式員則在頁面裡插入 Wicket 特有的 html attribute.
這方面與 Tapestry 很相似.
開始備忘記：
[1] 安裝及準備
[2] 建立第一個 Wicket Project
[1] 安裝及準備：
下載 jdk-6u2-windows-i586-p.exe
http://java.sun.com/javase/downloads/index.jsp
雙擊 jdk-6u2-windows-i586-p.exe 安裝至 C:\jdk1.6.0_02\
將 JAVA_HOME=C:\jdk1.6.0_02 加入至環境變數中
下載 apache-tomcat-6.0.14.zip
http://tomcat.apache.org/download-60.cgi
解壓縮至 C:/apache-tomcat-6.0.14
下載 apache-wicket-1.3.0-beta3.zip
http://www.apache.org/dyn/closer.cgi/wicket/1.3.0-beta3/
解壓縮至 C:\apache-wicket-1.3.0-beta3
然後再解至縮 C:\apache-wicket-1.3.0-beta3\wicket-examples-1.3.0-beta3.war
至 C:\apache-wicket-1.3.0-beta3\lib\wicket-examples-1.3.0-beta3
下載 eclipse-java-europa-win32.zip
http://www.eclipse.org/downloads/
解壓縮至 C:\eclipse-java-europa-win32
雙擊 C:\eclipse-java-europa-win32\eclipse\eclipse.exe 啟動 Eclipse
下載 wtp-all-in-one-sdk-R-2.0-200706260303-win32.zip
http://download.eclipse.org/webtools/downloads/drops/R2.0/R-2.0-200706260303/
解壓縮至 C:\wtp-all-in-one-sdk-R-2.0-200706260303-win32
雙擊 C:\wtp-all-in-one-sdk-R-2.0-200706260303-win32\eclipse\eclipse.exe 啟動 Eclipse
[2] 建立第一個 Wicket Project：
Eclipse 加入 Tomcat 為 Server：
Eclipse：Window -> Show View -> Other ->> Server -> Servers
右鍵點選 Server -> New -> Server ->> Apache -> Tomcat v6.0 Server
Tomcat installation directory 選擇 C:\apache-tomcat-6.0.14
然後按 Finish
Eclipse 建立 FirstWicket project：
Eclipse：File -> New -> Other ->> Web -> Dynamic Web Project
Project name: FirstWicket
然後按 Finish
將 C:\apache-wicket-1.3.0-beta3\lib\wicket-examples-1.3.0-beta3\WEB-INF\lib\*.jar
複製至 FirstWicket/WebContent/WEB-INF/lib
右鍵點擊 FirstWicket -> Run As -> Run on Server
選擇 Tomcat v6.0 Server at localhost -> Next -> Finish
輸入網址 http://localhost:8080/FirstWicket/lab1/
出現如下圖所示：
/**************** Lab1.java *******************/
package cm269.lab1;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
public class Lab1 extends WebPage {
private static final long serialVersionUID = 1L;
public Lab1() {
DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd");
DateFormat timeFormat = new SimpleDateFormat("hh:mm:ss");
add(new Label("date",dateFormat.format(new Date())));
add(new Label("time",timeFormat.format(new Date())));
add(new Label("owner","Joeyta Chan"));
}
}
/**************** Lab1.java *******************/
在 Web Page 裡定義 3 個 Label 為 date, time, owner
<!--------------- Lab1.html -------------->
<html>
<head>
<title>FirstWicket</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">CM269 Lab1</th>
</tr>
<tr>
<td>Current Date</td>
<td><span wicket:id="date">date</span></td>
</tr>
<tr>
<td>Current Time</td>
<td wicket:id="time"><span>time</span></td>
</tr>
<tr>
<td>Done By</td>
<td wicket:id="owner"><span>owner</span></td>
</tr>
</table>
</body>
</html>
<!--------------- Lab1.html -------------->
可以使用 html attribute wicket:id 將 web page 裡的 label 呼叫出來.
/**************** FirstWicket.java *******************/
package cm269.lab1;
import org.apache.wicket.protocol.http.WebApplication;
public class FirstWicket extends WebApplication {
public Class getHomePage() {
return Lab1.class;
}
}
/**************** FirstWicket.java *******************/
這裡返回 Lab1 生成後的網頁.
<!--------------- web.html -------------->
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>FirstWicket</display-name>
<servlet>
<servlet-name>FirstWicket</servlet-name>
<servlet-class>org.apache.wicket.protocol.http.WicketServlet</servlet-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>cm269.lab1.FirstWicket</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FirstWicket</servlet-name>
<url-pattern>/lab1/*</url-pattern>
</servlet-mapping>
</web-app>
<!--------------- web.html -------------->
項目結構如下圖所示：
沒有留言:
發佈留言