本文將介紹基於 Web2.0 的 OpenSource Framework ZK 。具體闡述 ZK 框架的搭建、在 ZK 中使用 JDBC 介面與資料庫連接池操作,以及如何整合 Hibernate。
簡介
ZK 是一個事件驅動 (event-driven) 的,基於組件 (component-based) 的,用以豐富網路程序中用戶界面的框架。 ZK 包括一個基於 AJAX 事件驅動的引擎 (engine),一套豐富的 XUL 和 XHTML,以及一種被稱為 ZUML(ZK User Interface Markup Language,ZK 用戶界面標記語言 ) 的標記語言。
用戶可以利用 XUL 和 XHTML 的豐富特性來呈現您的 Web 應用,操縱它們來處理因用戶活動而引發的事件,就像在桌面應用程序中那樣。不同於大多數其它框架,就 ZK 而言,AJAX 是一種幕後 (behind-the-scene) 技術,組件內容的同步和流水線事件 (pipelining of events) 都由 ZK 引擎自動完成。
這樣大大簡化了應用程序的開發周期。同時又使得前端程序美觀,易用;
除了簡單的模型和豐富的組件,ZK 也支持一種文本標記語言,稱為 ZUML 。 ZUML,感興趣的朋友可以深入了解這種語言,從中體會到他的強大。
ZK 的安裝
作為一個基於 java 的 web framework,再使用 ZK 之前,我們需要成功安裝 JDK 和 tomcat5.5 或者更高的版本。 在這之後,我們可以去 ZK 的官方網站(http://www.zkoss.org)上 download 我們開發所需要的 library 。
創建第一個工程“ Hello World ”
創建一個新的工程對於 ZK 來說非常的簡單,在我們的 tomcat 的目錄下($TOMCAT_HOME/webapps),建立新的目錄 zkdemo 。其目錄結構如下所示:
+zkdemo +WEB-INF web.xml index.zul |
解壓縮我們剛才 download 的 library 並將 jar 文件 copy 到我們的目錄中, $TOMCAT_HOME/webapps/$PROJECT_NAME/WEB 。結果如下,
dist/lib/*.jar dist/lib/zkforge/*.jar dist/lib/ext/*.jar |
編輯 web.xml,將如下代碼加入其中:
<!-- ZK --> <listener> <description>Used to clean up when a session is destroyed</description> <display-name>ZK Session Cleaner</display-name> <listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class> </listener> <servlet> <description>ZK loader for ZUML pages</description> <servlet-name>zkLoader</servlet-name> <servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class> <init-param> <param-name>update-uri</param-name> <param-value>/zkau</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>zkLoader</servlet-name> <url-pattern>*.zul</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>zkLoader</servlet-name> <url-pattern>*.zhtml</url-pattern> </servlet-mapping> <servlet> <description>The asynchronous update engine for ZK</description> <servlet-name>auEngine</servlet-name> <servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>auEngine</servlet-name> <url-pattern>/zkau/*</url-pattern> </servlet-mapping> |
使用 zk 標記,創建 web 頁面 index.zul 。加入代碼:
<window title="My First window" border="normal" width="200px"> Hello, World! </window> |
重啟 Tomcat
打開瀏覽器,鍵入 URL:http://localhost:8080/zkdemo/index.zul。此時 , 您就能看到我們的第一個 ZK 的 web 程序。
當然,我們也可以添加一些互動的元素來擴展程序的功能。
<window title="Hello" border="normal"> <button label="Say it" onClick="alert("Hello World!")"/> </window> |
基於 ZK 的資料庫應用實例
下面我們通過一個實例來開發一個基於資料庫的 Web 2.0 應用。在此實例中,我們使用簡單的 JDBC 方式作為資料庫連接。使用 java.sql.DriverManager 。在此,我們選擇的資料庫是文本型的 hsqldb,數據表是一個事物記錄,由 3 個欄位組成(item:事件名; priority:事件優先順序; Date: 事件時間)
事前的準備
與所有的 application 類似,在我們開始動手之前,需要下載我們這個應用所必須的 jar package 。幸運的是,這些 package 我們都可以在 zk5.2 的 image 中找到。並且將這些 package 拷貝到我們的 application 的目錄中,${tomcat_home}/webapps/${Application_name}/WEB-INF/lib 。
DAO 對象
當然,我們還是需要把 JDBC 訪問寫入到我們的 DAO 對象中,與大多數 java 的 jdbc programming 類似,請參考下面的代碼:
public class EventDAO { private String url = "jdbc:hsqldb:file:/hsqldb/event"; private String user = "sa"; private String pwd = ""; public EventDAO() { try { Class.forName("org.hsqldb.jdbcDriver"); } catch (ClassNotFoundException e) { e.printStackTrace(); } } public List findAll() { Statement stmt = null; Connection conn = null; List allEvents = new ArrayList(); try { conn = DriverManager.getConnection(url, user, pwd); stmt = conn.createStatement(); ResultSet rs = stmt.executeQuery("select * from event"); Event evt; while (rs.next()) { evt = new Event(); evt.setId(rs.getString(1)); evt.setName(rs.getString(2)); evt.setPriority(rs.getInt(3)); evt.setDate(rs.getDate(4)); allEvents.add(evt); } } catch (SQLException e) { e.printStackTrace(); }finally{ try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } return allEvents; } public boolean delete(Event evt){ Connection conn = null; Statement stmt = null; boolean result = false; try { conn = DriverManager.getConnection(url, user, pwd); stmt = conn.createStatement(); if (stmt.executeUpdate("delete from event where id = '" + evt.getId() + "'") > 0); result = true; } catch (SQLException e) { e.printStackTrace(); }finally { try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } return result; } public boolean insert(Event evt){ Connection conn = null; Statement stmt = null; boolean result = false; try { conn = DriverManager.getConnection(url, user, pwd); stmt = conn.createStatement(); if (stmt.executeUpdate("insert into event(id,name,priority,date) " + "values ('" + UUID.randomUUID().toString() + "','" + evt.getName() + "'," + evt.getPriority() + ",'" + new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(evt.getDate()) + "')") > 0); result = true; } catch (SQLException e) { e.printStackTrace(); }finally{ try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } return result; } public boolean update(Event evt){ Connection conn = null; Statement stmt = null; boolean result = false; try { conn = DriverManager.getConnection(url, user, pwd); stmt = conn.createStatement(); if (stmt.executeUpdate("update event set name = '" + evt.getName() + "', priority = " + evt.getPriority() + ", date = '" + new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(evt.getDate())+ "' where id = '" + evt.getId() + "'") > 0); result = true; } catch (SQLException e) { e.printStackTrace(); }finally{ try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } return result; } } |
[火星人 ] 深入 web2.0 應用框架 zk已經有1103次圍觀