[GAE]使用ZK套件開發網站教學

前置作業需先安裝eclipse plugin

  • GAE(必要,方便部屬、測試)
  • ZK Studio(非必要)

GAE

for eclipse 4.5

https://dl.google.com/eclipse/plugin/4.5

其他版本可以在https://developers.google.com/eclipse/docs/download找到網址

選擇安裝Google App Engine相關的套件

ZK Studio

http://studio.zkoss.org/resource/plugins/eclipse_4_2

1.建立新的GAE專案

選擇 Web Application Project

點擊Finish 建立專案

2.開啟web.xml複製以下來增加載入zk所需要的lib

	<listener>
        <description>ZK listener for session cleanup</description>
        <listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
    </listener>
 
    <servlet>
        <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>
        <servlet-name>auEngine</servlet-name>
        <servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>zkLoader</servlet-name>
        <url-pattern>*.zul</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>auEngine</servlet-name>
        <url-pattern>/zkau/*</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>auEngine</servlet-name>
        <url-pattern>/zkau</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>index.zul</welcome-file>
        <welcome-file>index.zhtml</welcome-file>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list> 

增加完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" version="2.5">
	<servlet>
		<servlet-name>TestGaeZK</servlet-name>
		<servlet-class>tw.com.test.TestGaeZKServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>TestGaeZK</servlet-name>
		<url-pattern>/testgaezk</url-pattern>
	</servlet-mapping> 
	<listener>
        <description>ZK listener for session cleanup</description>
        <listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
    </listener>
 
    <servlet>
        <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>
        <servlet-name>auEngine</servlet-name>
        <servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>zkLoader</servlet-name>
        <url-pattern>*.zul</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>auEngine</servlet-name>
        <url-pattern>/zkau/*</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>auEngine</servlet-name>
        <url-pattern>/zkau</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>index.zul</welcome-file>
        <welcome-file>index.zhtml</welcome-file>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list> 
</web-app>

3.在WEB-INF目錄底下新增zk.xml

<zk>
    <!-- clustering environment -->
    <system-config>
        <disable-event-thread/>
        <ui-factory-class>org.zkoss.zk.ui.http.SerializableUiFactory</ui-factory-class>
    </system-config>
    <!-- clustering environment (available since ZK 5.0.8)-->
    <listener>
        <listener-class>org.zkoss.zkplus.cluster.ClusterSessionPatch</listener-class>
    </listener>
    <!-- [Required if ZK 5] disable the use of LogManager (prohibited by GAE). -->
    <library-property>
        <name>org.zkoss.util.logging.hierarchy.disabled</name>
        <value>true</value>
    </library-property>
 
    <!-- GAE doesn't allow user's thread -->
    <client-config>
        <resend-delay>-1</resend-delay>
    </client-config>
</zk>

4.編輯appengine-web.xml,將以下插入至appengine-web-app標籤內最底下

<sessions-enabled>true</sessions-enabled>
 
<static-files>
    <exclude path="/**.zul"/>
    <exclude path="/**.zhtml"/>
</static-files>
<resource-files>
    <include path="/**.zul"/>
    <include path="/**.zhtml"/>
</resource-files>

整個檔案會是以下

<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
  <application></application>
  <version>1</version>

  <!-- Allows App Engine to send multiple requests to one instance in parallel: -->
  <threadsafe>true</threadsafe>

  <!-- Configure java.util.logging -->
  <system-properties>
    <property name="java.util.logging.config.file" value="WEB-INF/logging.properties"/>
  </system-properties>

  <!--
    HTTP Sessions are disabled by default. To enable HTTP sessions specify:

      <sessions-enabled>true</sessions-enabled>

    It's possible to reduce request latency by configuring your application to
    asynchronously write HTTP session data to the datastore:

      <async-session-persistence enabled="true" />

    With this feature enabled, there is a very small chance your app will see
    stale session data. For details, see
    https://cloud.google.com/appengine/docs/java/config/appconfig#Java_appengine_web_xml_Enabling_sessions
  -->

<sessions-enabled>true</sessions-enabled>
 
<static-files>
    <exclude path="/**.zul"/>
    <exclude path="/**.zhtml"/>
</static-files>
<resource-files>
    <include path="/**.zul"/>
    <include path="/**.zhtml"/>
</resource-files>

</appengine-web-app>

5.把index.html刪除,建立index.zul

<?page title="Auto Generated index.zul" contentType="text/html;charset=UTF-8"?> 
<window title="Hello World!!" border="normal" width="200px">

<label value="You are using: ${desktop.webApp.version}"/>
<button label="click" onClick="" />

</window>

6.最後把zk lib 複製到WEB-INF/lib底下

這邊使用zk 7.0
最新的8在GAE會出現錯誤
目前先用8以下的版本

7.執行並開啟http://localhost:8888/ 來查看運行結果

運行結果如下,有此畫面代表已經把ZK加入至GAE囉

台北人,軟體工程師一枚,工作閒暇之餘記錄生活、分享整理資訊。
Posts created 105

發表迴響

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top