iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

ZK 30天速成系列 第 5

用元件建構符合需求的畫面

ZK 提供一個自訂語言 ZUL 讓你建構畫面,語法是標準 XML 格式。每個 tag 代表一個元件,用 attribute 來控制元件其行為、外觀與功能,tag 的名稱會對應到一個 Java class。

https://ithelp.ithome.com.tw/upload/images/20210920/20050621uduIhDWUcR.jpg

每個屬性都對應到其 Java class 上的一個 getter 跟 setter,所以如果 <button> 上有disabled 屬性,代表 Button.java 上必定有 setDisabled()。ZK 元件也可呼叫 Java API 來產生,跟 Swing 的寫法類似,但是用 zul 寫法的可讀性較高。

例如下面這是一個用 zul 寫成的禁用按鈕:

<button disabled="true"/>

跟下面的 Java 語法表達意義相同:

Button button = new Button();
button.setDisabled(true);

背後運作

當瀏覽器訪問一個 mypage.zul 時,ZK (DHtmlLayoutServlet) 即會剖析該頁面,針對其中所寫的 tag 與屬性呼叫對應的 Java method 來生成元件,因此跟你自己呼叫的意義是一樣的。簡言之,所有你在 zul 可以做到的事,都有對應 Java method 可以做。只是 zul 相對於 Java 來說比較容易看出畫面的大致排版。

https://ithelp.ithome.com.tw/upload/images/20210920/20050621N1OAPPLQiT.png

Desktop, Page 與 元件 (Component)

desktop 是 ZK 特有概念,因為每個瀏覽器 tab 的 JavaScript widget 都是獨立,但是卻又同屬一個 session ,因此 ZK 需要一個 scope 來區分同一個 session 下兩個不同 tab 中的元件,因此創造了 desktop,你可以把它視為對應到一個瀏覽器 tab,一個 desktop 存放著整個頁面的元件樹,當 tab 關閉時,desktop 就消滅,或瀏覽器重載頁面 (reload) 也會創造一個新 desktop。

一個 desktop 可以有多個 page,但是大部分的情況下都只有一個。page 下可有一個或多個 ZK 元件,元件之間的結構會像樹狀一樣有父子關係。

https://ithelp.ithome.com.tw/upload/images/20210920/20050621ebM8KCSjSz.jpg

ID Space

在 MVC 模式中,我們經常會指定 ID 給元件,以方便我們在控制器中取得其參照,為了能正確辨認,在同一個 ID 空間內ID 不允許重複。而 ID 空間是由實作 IdSpace 介面的元件與其子元件組成的,例如 Window, Panel, Include 都有實作該介面,因此其下得子元件之間 ID 不能重複。而實作 IdSpace 的元件就是該 ID空間的 ID space owner,許多 ZK 行為都預設在這個範圍內,例如轉發事件的預設目標。

<window title="space owner">
    <button id="submit" label="送出"/>
</window>
<window title="space owner">
    <button id="submit" label="送出"/>
</window>
  • 因為以上兩個按鈕在不同的 ID 空間,因此可以有相同的 ID

IDE plugin 輔助輸入

初學者剛開始用 zk 並不熟悉元件的名稱,建議安裝 plugin,就會有輸入輔助、自動完成,可以提示你元件的名稱、每個元件所支援的屬性、每個元件所支援的子元件,省去你查文件的時間,也減少打錯字的問題。

我先前使用 eclipse,這幾年換用 IntelliJ IDEA 之後,我比較推薦 IntelliJ,功能上多優於 eclipse。

尋找適合的元件與了解用法

初學者可能遇到的問題就是不知道哪些元件可以符合你的需要,你可以從以下 幾 個地方來了解元件的功能與用法:

ZK Demo

元件線上展示,你可以從這裡看到每個元件實際上在瀏覽器中繪製出來的樣子,試著操作看看來確定哪個元件的功能是不是你要的,或是要怎麼用,找到之後下方就有該頁面的說明,以及如何實作出該demo 的範例程式碼。其分成3部分:View, Controller 都是屬於 ZK 的程式碼,你可以參考。Model 就是應用程式的程式碼,只是為了呈現元件做的假資料。

https://ithelp.ithome.com.tw/upload/images/20210920/20050621Av0IEDMPry.png

點 “Test Code online” 你可以連到 ZK Sandbox 可以讓你線上修改程式碼並即時呈現修改後的結果。 “Dowhload This Demo” 可以下載該展示範例的程式碼,方便你複製到你的專案中使用。

Component Reference

這是介紹元件功能的主文件,你可以從這本手冊來查到每個元件上各種功能的用法與技術細節。

ZK Javadoc

有些功能較簡單、易於理解的元件屬性,或是 Component Reference 沒寫到的屬性,可以查 Javadoc。

ZK Fiddle

一個線上可以撰寫、執行 zul 的平台,目的跟 js fiddle 一樣,讓你不需要安裝、設定環境就可以直接跑 zul 與 java,可以快速切換不同 ZK 版本與外觀主題。可以讓你快速試用你想要的元件功能,也可以作為除錯時,重製問題的方法,很多人在遇到 zk 問題時,會將他的專案程式把抽取出 zk 相關的部分傳給其他人來協助除錯。比起用自然語言描述,會精準得多。


上一篇
兩種開發模式 (MVC, MVVM) 比較
下一篇
用 zul 快速製作雛形系統
系列文
ZK 30天速成30

尚未有邦友留言

立即登入留言