XML Technology Research Lab: 第一個範例

第一個範例

The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

看其他教材

在安裝 ZK 的過程中，我們利用了 hello.zul 來驗證 ZK 是否安裝成功，而 hello.zul 更適合用來當作 ZK 入門的學習。請特別注意： 這份教材主要是為了我的課程而編制，因此，我假設讀者跟我的學生一樣，已經會 Java、XML 等知識，而且我們只針對一些我認為比較重要的部分說明，其他的部分，建議去閱讀 ZK 網站中所提供的文件。

hello.zul 的內容如下：

01  <?xml version="1.0" encoding="Big5"?>
02  <window title="我的第一個視窗" border="normal" width="200px">
03   Hello, World!
04  </window>

hello.zul 的目的在於顯示 Hello World 的訊息在網頁上，而且該訊息是顯示在一個 ZK 的視窗內，而該視窗的標題為"我的第一個視窗"。
zul 檔其實就是一個 XML 檔，而該檔案的格式必須符合 ZUML（ZK User Interface Markup Language）的標準。經由以上的說明，我們知道 zul 是一個 XML 檔，而且內容包含中文大五碼，因此第 01 行必須做出 <?xml version="1.0" encoding="Big5"?>。
ZK 的視窗是由一對 </window> 標籤組成（如程式碼中的第 02 到 04 行），該標籤的內容即為該視窗內所顯示的內容。
視窗本身還可以有一些設定，例如視窗的標題（title）、視窗的大小（width）、以及視窗的邊框（border）等的設定。</window> 標籤的設定非常豐富，有興趣的讀者，請參考 ZK Developer's Guide；你可以點選 4.2 節的 "Layout and Windows" 來查看還有哪些用法。

在進入下一個範例之前，請先察看一下 hello.zul 網頁的原始碼，其部分內容如下：

....

<link rel="stylesheet" type="text/css" href="/xml/zkau/web/zul/css/normmoz.css.dsp"/>
<link rel="stylesheet" type="text/css" href="/xml/zkau/web/js/ext/timeplot/api/styles/timeplot-bundle.css"/>
<link rel="stylesheet" type="text/css" href="/xml/zkau/web/zkex/zul/css/zkexmoz.css.dsp"/>


<script type="text/javascript" src="/xml/zkau/web/js/zk/zk.js.dsp" charset="UTF-8">
</script>
<script type="text/javascript">
zk_ver='3.6.1';
zk.build='09050418';
zk_procto=900;

.....

<div class="zk" id="z_6v_0" z.dtid="g6vm" style="width:100%;height:100%;" z.zidsp="page" z.au="/xml/zkau">
<div id="z_6v_1" z.type="zul.wnd2.Wnd2" z.autoz="true" class="z-window-embedded" style="width:200px;" z.zcls="z-window-embedded" z.minheight="100" z.minwidth="200">


<div class="z-window-embedded-tl"><div class="z-window-embedded-tr"></div></div>
<div class="z-window-embedded-hl"><div class="z-window-embedded-hr"><div class="z-window-embedded-hm">
<div id="z_6v_1!caption" class="z-window-embedded-header">
我的第一個視窗
</div></div></div></div>

<div id="z_6v_1!cave" class=" z-window-embedded-cnt">
  <span id="z_6v_2" class="z-label" z.zcls="z-label" class="z-label"> 
 Hello, World! 
</span>
</div>

......

如果把這個原始碼跟原先的 zul 檔案的內容來比，這兩者之間的差異實在非常大。其實，我們之前在介紹 ZK 的時候，我們就已經稍為介紹過了，當使用者要求 hello.zul 檔的時候，ZK 伺服器會依據該檔案的內容（就是 window 標籤）轉出必要的 CSS 檔（如原始碼中的 link 標籤），HTML 元件（如原始碼中的 div 標籤）、以及 Javascript 程式（如 script 標籤），然後將這些內容回傳到瀏覽器；這也就是我們看到的原始碼。

在以後的範例中，我們還可以跟 ZK 的元件互動，而這些事件會經由瀏覽器中的 Javascript 程式（稱之為 "ZK Client Engine"）會主動跟 ZK 伺服器來交換訊息而完成工作；所以從以上的討論可以得知：ZK 是以伺服器為主的架構。

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

XML Technology Research Lab

第一個範例

第一個範例

沒有留言:

張貼留言