用元件建构符合需求的画面

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 相关的部分传给其他人来协助除错。比起用自然语言描述,会精准得多。


<<:  请适时的停下脚步,给自己多点思考空间

>>:  Day05-v-on事件处理

[D09] still placeholder

写在前面 still placeholder still placeholder still pla...

【Day16】电子商务与行销篇-电子商务

#odoo #开源系统 #数位赋能 #E化自主 从Google 在 2020 年 12 月发表的智慧...

[Cmoney 菁英软件工程师战斗营] IOS APP 菜鸟开发笔记(4)

前言 之前po过部分swift语法的笔记,以下再附上近期整理好的部分 类别(class) class...

AI ninja project [day 8] 文字转语音

除了有语音转文字的服务, GCP 也提供了文字转语音的服务。 可以想像过去我们在游戏或是动画中需要很...