第一個範例

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

請勿轉貼

請特別注意：

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 是以伺服器為主的架構。

Last Updated: Tuesday, 30-Nov-2010 18:14:58 CST
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu