歡迎您光臨本站 註冊首頁

深入 web2.0 應用框架 zk

←手機掃碼閱讀     火星人 @ 2014-03-12 , reply:0
  
本文將介紹基於 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(&quot;Hello World!&quot;)"/>    </window>


圖 1: 第一個 ZK 程序





基於 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次圍觀

http://coctec.com/docs/linux/show-post-68726.html