ZK+学习总结第一阶段.pdf

ZKZK 学习总结学习总结 2010201020102010 年年 2 2 2 2 月月 7 7 7 7 日日 目录 1 了解 ZK 1 1 1 理解 ZK 1 1 2 ZK 特点 1 2 ZK 环境搭建 3 2 1 安装环境前 需要下载的东西 3 2 2 安装过程 3 2 3 第一个用 Eclipse 创建的 ZK 项目 Hello World 7 2 4 例子中的配置分析 12 3 组件基础属性及事件 15 3 1 ID 属性 15 3 2 IF 和 unless 属性 16 3 3 use 和 apply 属性 16 3 4 forEach 属性 20 3 5 事件处理 20 4 组件属性及重要函数 28 4 1 标签组件 28 4 2 按钮组件 30 4 3 日历组件 31 4 4 图像组件 32 4 5 窗口 34 4 6 布局组件 39 4 7 标签页 44 4 8 网格 48 4 9 菜单 56 4 10 列表框 59 4 11 树形组件 64 5 应用示例 71 5 1 功能简介 71 5 2 建立项目环境 71 5 3 登陆功能 72 5 4 权限判断 73 5 5 页面布局实现 74 5 6 权限管理实现 75 5 7 信息中心模块 77 5 8 示例配置代码 79 第 1 页 1 了解 ZK 1 1 理解 ZK ZK 官方网站及 中有关于 ZK 的定义 ZK 是一个事件驱动 event driven 的 基于组件 component based 的 用以丰富网络程序中用户界面的框架 ZK 包 括一个基于 AJAX 事件驱动的引擎 engine 一套丰富的 XUL 和 XHTML 以及一种被称为 ZUML ZK User Interface Markup Language ZK 用户界面标记语言 的标记语言 通过这么一段时间的接触 体验到 ZK 是 C S 构架在 WEB 应用中的实现 写过 C S 程序 的同学应该能够理解C S构架特点 如C NET等语言的应用程序构架 以上语言在编写C S 构架程序的时候都是基于各个组件的应用 如窗口 按钮 列表等 用面向对象的语言来说 C S 程序是由各个可视化的对象组成的 最简单的程序需要有以下几个步骤 第一 编写前台数据输入页面 然后编写后台处理 数据的代码 最后编写数据处理的结果的页面 以上的3个步骤在 B S 框架中通常是独立分 开的 而目前 ZK 框架则将三者能够绑定在一起 在一个 ZK 得页面中完成 像桌面程序一样 每个显示页面关联一个后台程序 页面中元素值及属性在后台程序中均能够随时得到 后台 程序也能够控制页面元素 ZK 是基于组件的 每个组件都有对应的 HTML 页面显示 又会对应一个 JAVA 对象 于 是用户可以通过后台程序中对组件 JAVA 对象的处理来更新页面的 HTML显示 而页面中元素 的从属关系则体现在 Java 中的 List 类 每个组件都能够获得属于其中的元素列表 List 1 2 ZK 特点 通过这么一小段时间的 ZK 学习与应用 总结一点我认为特点与体会 1 组件多样 能够轻松完成普通 web 程序很难完成的树 图表 页面局部动态变换 标 签页 分页网格等功能 是实现富客户端应用的良好工具 2 开发模式简单 只需要掌握各个组件应用变可以轻松完成应用开发 但利用 ZK 开发还有些缺点的地方 1 学习资料较少 只有官方网站中的例子 且例子均是局部功能 没有完整的 WEB 项目 参考 这样就不能了解类包及页面如何分配等相关知识 如目前比较缺少在 ZK 中通用的对 第 2 页 数据库进行增删改查的例子 打开2个 window 间数据传递等功能 2 感觉网格不是很好用 网格中的一行可以显示一条数据 但如何通过一行直接获得绑 定的数据 还是事件处理部分 事件处理是一个组件的特定函数 即一个类的函数 而函数 中处理数据经常需要其他组件的数据 如何获得其他组件数据 唯一的方法似乎是事件监听 类为组件的内部类 3 版本问题 目前 ZK 最新式5 0 其中官网中的 DEMO 均是此版本的 而其他的 DEMO 及 Eclipse 的插件均是3 6版本的 ZK 导致从例子中学习的一些程序代码在其他环境中运行出 错 4 编译源码问题 由于功能需要 需要对项目源代码进行重新编译 但 ZK 的编译需要 在 Linux 或模拟 Linux 环境下运行 不是很方便 目前还没掌握 第 3 页 2 ZK 环境搭建 2 1 安装环境前 需要下载的东西 作为一个基于 java 的 web framework 再使用 ZK 之前 需要成功安装 JDK 和 tomcat5 5 或者更高的版本 所以要提前下载的东西为 下载 JDK Java SE 安装包 下载 Tomcat 安装包 下载 Eclipse IDE 软件开发工具安装包 我们项目组目前 Eclipse 环境为 3 4 下载 ZK Library 下载 ZK Studio 对于 ZK Library 可以再 http www zkoss org download zk dsp下载 ZK Studio 插件可以 在 http www zkoss org product zkstudio dsp 下载 2 2 安装过程 2 2 1 安装 Java 运行环境 Java运行环境 Jre 是运行ZK 的基础 也是运行 servelet容器必需的 Jre 可以登录 SUN 的官方网站 http 中下载到本地机器 安装之后需要配置环境变量 2 2 2 安装 Servlet 容器 Apache Tomcat 是当前广为流行的 Servlet 容器之一 安装简单 使用方便 可以使用官 方网站提供的两种安装方法 第一种使用 Installer 包安装 第二种是快速安装方法 是Tomcat 提供的一个 ZIP 文件 第二种具体操作过程是 首先 可已访问官方网站下载 zip 文件 其 次 将文件解压到本地机器 然后装 tomcat 装完后启动 tomcat 测试是否可以正常运行 以便查看环境变量测试的是否正确 默认端口是 8080 在地址栏直接键入 http localhost 8080 或者输入 http 127 0 0 1 8080 第 4 页 2 2 3 安装 Eclipse 可以到www eclipse org下载eclipse 可以选择 Download now 下载完成后 只需要将下载 的压缩文件 eclipse SDK 3 4 in32 zip 解压到指定位置 例如 D Eclipse 即可完成安装 记下来 就可以 安装后 会弹出一个画面选择工作空间 自己指定一个就可以 2 2 4 安装插件 通过自己在 Eclipse 下安装 ZK 插件的学习体会 总结了在 Eclipse 下安装插件主要有三 种方式 我认为第三种方式比较好 推荐 具体的安装过程如下 第一种方法 主要借助于Eclipse的向导来安装插件 通过Help Software Updates Find and Install 在弹出的菜单中选择 Search for new features to install 点 Next 在下一菜单中 选择 New Local Site 或 NewArchived Site 找到你下载的插件所在目录 选中安装即 可 第二种方法 在Eclipse的主目录 ECLIPSE HOME 下有一个plugins 目录和features 目录 将插件解压缩后 在解压缩后的文件夹里一般可以看到 plugins 文件夹 有的插件解 压缩后还可以看到一个 features 文件夹 一般将 plugins 文件夹下的内容直接拷贝到 ECLIPSE HOME plugins 目录下 如果解压缩后的插件目录下还有 features 文件夹 则 把该文件夹下的内容也拷贝到 ECLIPSE HOME features 下 重新启动 Eclipse 之后就可 以使用刚刚安装的插件了 第三种方式 就是在 Eclipse 主目录下创建一个 links 目录 然后将你自己的插件放在你 想放的任何地方 这个时候你放插件的目录就是插件目录 PLUGIN HOME 然后在 你的 ECLIPSE HOME links 目录下创建一个 link 文件 比如要安装一个 Lomboz插件 可以在 links 目录下创建一个 Lomboz eclipse link 文件 link 文件的名称随便取 这个 Lomboz eclipse link 文件指向的存放 Lomboz 插件的目录 PLUGIN HOME 假如你的 Lomboz 插件的 zip rar 文件解压缩后放在 C eclipse plugins Lomboz eclipse 下 如果是插件 是 jar 文件则可以不用解压缩 则 Lomboz eclipse link 文件的内容就应该是 path C eclipse plugins Lomboz eclipse 注意 path 所指的文件路径一定要增加一个 转义符来分开 第 5 页 其余插件的安装也是如此 比如安装 Eclipse 多国语言包 通过安装 Eclipse 多国语言 包 Eclipse 可以自动实现开发环境的本地化 即自动根据操作系统的语言环境选择语言包进 行本地化 先到 http download eclipse org eclipse downloads 下载 Eclipse3 2 版本的多国语言 包 其名称为 Language pack 按照前面的第三种方式安装即可 2 2 5 配置 ZK 环境 ZK 库 1 打开 Eclipse 前提条件是已经安装好了 ZK studio 插件 如果没有安装 请先按照前 面的介绍安装插件 2 点击菜单 Window Preferences From menu goto Windows Preferences 3 在打开的这个窗口上选择ZK ZK Packages On the Preferences Window select ZK ZK Packages 4 点击 Add Diretory 选择到你下载的 ZK Library 包 不用解压 直接是 ZIP 文件 如下 图 5 会跳出一个窗口来 点击 OK 第 6 页 6 给这个包命名 一般就用默认的 点击 OK 7 再选择上那个 ZK Library 就行了 如果你不选择 会自动选择最后你引入的版本的 到此 ZK 的环境就配置完了 第 7 页 2 3 第一个用 Eclipse 创建的 ZK 项目 Hello World 2 3 1 创建项目过程 1 启动 Eclipse 我倾向于在 Java EE 下创建项目 2 如果没有建立 Server 的话 需要先打开 Window show view other servers 右 击选择 New Server 然后选择 tomcat 即可 第 8 页 3 选择 File New DynamicWebProject 输入项目名称 例如我给项目其名字为 MyZK 第 9 页 4 点 Next 再点 Finish 就完成了一个 ZK 项目的创建 第 10 页 5 右击项目名称 选择 properties Java BuidPath 给项目导入 ZK 的 Jar 包 将 ZK HOME dist lib 目录下的所有jar文件 如果需要更多ZK附加功能 加入ext与zkforge 目录下的 jar 文件 到 WebContent WEB INF lib 目录下 6 创建一个新的 ZUL 文件 Creating a new ZUL file helloworld 7 创建完 zul 文件后 写入 ZK 代码 第 11 页 8 启动 Tomcat 服务器 选择 MyZK 运行 9 在浏览器里输入 http localhost 8080 MyZK first zul 就可以看到下面的内容 第 12 页 2 4 例子中的配置分析 2 4 1 项目目录结构 在 Eclipse 下搭建的 ZK 环境上开发的程序 比如对于上面的例子项目 MyZK 其目录 结构如下所示 下面对于上面的目录中的文件 我通过查找资料 进行了总结 对于 Zk 的配置文件大 体的意思是 WEB INF web xml 定义了必须的 servlet 及运行 ZK 应用程序所需要的监听器 WEB INF zk xml 为 ZK 的配置描述文件 WEB INF lib 包括了 ZK 的必须库文件 该应用程序所需的重要 jar 包文件说明 bsh jar BeanShell Java 代码解释器 commons el jar Apache 的 EL 表达式解释器 zcommon jar ZK 的通用库 zhtml jar XHTML 相关组件 zk jar ZK 核心代码 zkplus jar 与 Acegi Security Spring Hibernate 和 data binding 集成的代码 第 13 页 zul jar XML 相关组件 zweb jar web 相关功能代码 2 4 2 关于 web xml 的配置 在 web xml 中为 ZK 定义必须的 servlet 及listener 我把在该项目 MyZK 下的 web xml 文件中的代码拷贝如下 MyZK Used to cleanup when a session is destroyed ZK Session cleaner org zkoss zk ui http HttpSessionListener The ZK loader for ZUML pages zkLoader org zkoss zk ui http DHtmlLayoutServlet update uri zkau 1 The asynchronous update engine for ZK auEngine org zkoss zk au http DHtmlUpdateServlet 第 14 页 LoginServlet LoginServlet servlet LoginServlet zkLoader zul zkLoader zhtml auEngine zkau LoginServlet userlogin index html index htm index jsp default html default htm default jsp index zul 2 4 3 关于 zk xml 的配置 xml 文件是对 ZK 配置的描述性文件 我把在该项目 MyZK 下的 zk xml 文件中的代码 拷贝如下 第 15 页 ajax timeout zul 3 组件基础属性及事件 3 1 ID 属性 为了读取 Java 代码或 EL 表达式中的组件 我们可以使用 id 属性来标识它 在下面 的例子中 我们为 label 设置了一个标识 这样当一个按钮被按下时 我们就可以操纵 label 的值了 如下面两个例子可以让你领会 id 的作用 Do you like ZK 当按下 Yes 按钮的时候 可以看到如下效果 id 属性在 EL 表达式中的应用 如下代码 这段代码实现的是将文本框中的值赋给标签 source 就代表着文本框 我们只需对 其进行操作就相当于对文本框操作了 第 16 页 3 2 IF 和 unless 属性 if 和 unless 属性被用于控制是否创建一个组件 在下面的例子中 两个 label 只有 在请求中含有一个为 vote 的属性时才被创建 如果两个属性都被指定 将不会创建组件除非它们的值都被赋值为true 3 3 use 和 apply 属性 在页面中嵌入代码不当会增加维护的难度 有两种途径可以从视图中分离出代码 一种途径是你可以监听所关心的事件 然后调用合适的方法进行处理 例如 可以调用 onCreate onOK onCancel 事件来完成初始化 initialize 处理 process 和取消 cancel 等工作 另外 必须有一个名称为 MyManager 的 Java 类 内容像下面一样 import org zkoss zul Messagebox import org zkoss zul Window public class MyManager public static void init Window main main setTitle 关注我的请求 public static void save Window main throws InterruptedException main setTitle save Messagebox show 您的信息已经保存 public static void cancel Window main throws InterruptedException main setTitle cancel Messagebox show 你取消的请求已经完成 第 17 页 按下 save 按钮的时候 程序运行的效果如下 但是 上面的方法需要你在 ZUML 页面内嵌入一些代码 在用户界面 UI 内嵌入代码的 优点是可以很容易的动态改变行为 特别是在原型阶段 但是这仍然会展现一些维护代码且 性能会有一些降低 于是引出了 use 和 apply 属性的使用 3 3 1 use 属性 若不想在 ZUML 页面内使用 Java 代码 你可以继承一个组件的实现来处理事件 如下 import org zkoss zul Messagebox import org zkoss zul Window public class MyWindow extends Window public void onCreate this setTitle 关注我的变化 public void onSave this setTitle save public void onCancel this setTitle cancel 然后 使用 use 属性指定类 如下 执行效果如下 第 18 页 3 3 2 apply 属性 若你喜欢使用 MVC 模型 试图 控制者 方法 例如 你不想在 window 视图 内嵌入处理 代码 可以实现一个类来初始化 window 这个类必须实现 org zkoss zk ui util Composer 接口 import org zkoss zk ui Component import org zkoss zk ui util Composer import org zkoss zul Window public class MyComposer implements Composer public void doAfterCompose Component comp throws Exception Window comp setTitle Apply can be used as this do whatever initialization you want 在这里我们假设你有三个监听器 MyCreate MyOK 和MyCancel 参考下面的事件章 节获取事件监听器的解释 然后 使用 apply 属性指定类 如下 按下 apply 按钮 程序执行效果如下 第 19 页 window 仍然作为 org zkoss zul Window 的一个实例被创建 且作为 comp 参数被传递 给 doAfterCompose 方法 然后 你可以处理你所希望的初始化 若你想 apply 多个 composer 使用逗号隔开 另外 你可以使用 EL 表达式来返回类 它的名称 Composer 实 例 或 Composer 实例的集合 示意的代码如下 3 3 3 与 forward 属性一起使用 window 通常由一些按钮 菜单项目和其他组件组成 例如 当用户点击按钮时 onClick 事件会被送至按钮本身 但是这些事件最好在 window 内 处理而不是散落这些按钮 为了这样 你可以按如下方式使用 forward 属性 在这里OK 按钮的forward 属性指定接收onClick 事件后将其作为onOK 事件转向空间 所有者 例如 window 同样 针对 Cancel 按钮的 onClick 事件会转向 onCancel事件 因此你可以在 MyWindow 命名空间内处理 onOK 和 onCancel 事件 如下 public class MyWindow extends Window public void onOK called when the OK button is clicked or the ENTER buttonis pressed public void onCancel 第 20 页 called when the Cancel button is clicked or the ESC button is pressed 除了将 onClick 事件 forward 至空间所有者 你可以使用 forward 属性将任何事件 forward 至任何组件 3 4 forEach 属性 forEach 属性用来控制要创建多少个组件 如果你为这个对象指定一个对象集合 ZK 装 载机 ZK loader 将为每个被指定的集合项目创建一个组件 在下面的 ZUML 页面中 listitem 元素将被赋值三次 分别为 Monday Tuesday 和 Wednesday 然后产生三个 list 项目 contacts new String Monday Tuesday Wednesday Thursday Friday Saturday Sunday 代码运行的效果如下 除了使用foreach 还可以通过forEachBegin 和forEachEnd 来控制迭代 iteration 3 5 事件处理 事件 org zkoss zk ui event Event 用来通知服务器发生了什么 每种类型的事件都 由一种不同的类来表示 例如 org zkoss zk ui event MouseEvent 来代表鼠标活动 如 点击 为了响应事件 服务器需要为其注册一个或多个事件监听器 由两种方法来注册一个 事件监听器 一种是通过在标记语言中指定onXxx 属性 另一种方法是为你要监听的组件或 第 21 页 页面调用addEventListener 方法 除了在浏览器端由客户活动触发的事件 一个应用程序可以使用 org zkoss zk ui event Events 类中的sendEvent 和postEvent 方法来触发事件 3 5 1 桌面和事件处理 如上所述 桌面是页面的集合 这些页面服务于同样的URL 请求 一个桌面当然是事件 监听器能读取的范围 当一个事件被触发时 它就和桌面联系在一起 ZK 分离基于关联桌面及流水事件 pipelines events 分成单独的队列 因此 同一桌面的事件可以被顺序处理 另一方面 不同桌面的事件可以被并行处理 一个事件监听器是被允许读取事件关联桌面内任何页面的任何组件的 它也被允许将一 个组件从一个页面移到另一个页面 只要这些页面在同一桌面内 另一方面 它不能读取到 其它桌面的组件 注 开发人员可以在一个事件监听器中将一个组件从一个桌面卸载 然后在另外的事 件监听器中将其添加到另外一个桌面 3 5 1 1 桌面及创建组件 当一个组件在一个事件监听器中被创建时 它就自动被分配到被处理的事件相关联的桌 面 即使组件不属于一个页面这种分配也会发生 这就意味着你在事件监听器中创建的任何 组件可以用于监听正在处理的同一桌面 如果一个组件是在一个线程 thread 而不是任何事 件监听器中创建的话 它就不属于任何桌面 在这种情况下 可以将它添加到任何一个桌面 只要添加发生在一个合适的监听程序中 当然 一旦组件被添加到一个桌面 它就一直属于 这个桌面 对于大多数应用程序而言 很少在线程 thread 而不是事件监听器中创建组件 然而 如果有一个长操作 long operation 你或许会在后台线程 background thread 中 执行它 那么 你可以在后台准备一些组件树 然后在合适的事件被接收时将它们添加到桌 面 关于此的详细信息 参看事件监听与处理一节的详细介绍 3 5 2 事件监听与处理 3 5 2 1 通过标记语言添加事件监听器 添加一个事件监听器最简单的方法就是在一个ZUML 页面内声明一个属性 用来 监听的属性的值是可以被BeanShell 解释的任何Java 代码 第 22 页 点击 say welcome 按钮 效果如下图所示 3 5 2 2 通过程序添加或移除事件监听器 有两种方法通过程序添加或移除事件监听器 第一种 声明一个成员 当用你自己的类重定义 overriding 一个组件后 你可以声明一个成员函数成为事件监 听器 在一个ZUML页面中 你可以使用use属性来指定你想使用的类 即用它去替换默认类 如下所示 它使用了MyWindow来替换默认的org zkoss zul Window 然后你淂实现MyWindow java 同过继承默认的类 就像下面一样 public class MyWindow extends org zkoss zul Window public void onOK add an event listener handles the onOK event sent when ENTER is pressed 如果你想获得关于事件的更多信息 你可以按如下方式声明 public void onOK org zkoss zk ui event KeyEvent event 不同的事件或许与不同的事件对象相关联 第二种 动态地添加与移除事件监听器 开发人员可以使用org zkoss zk ui Component 接口中的addEventListene 和 removeEventListener 方法来动态地添加或移除事件监听器 如下所示 动态添加的事件监 听器必须实现org zkoss zk ui event EventListener 接口 第 23 页 void init Component comp comp addEventListener onClick new MyListener class MyListener implements org zkoss zk ui event EventListener public void onEvent Event event throws UiException processing the event 1 延期事件监听器 默认情况下 当客户端的事件被触发时就会被送到服务器 但是 许多事件仅用于维持 服务器端的现状 而不是向客户端提供视觉响应 visual response 换句话说 这些监听 器的事件并不需要马上被送出 相反 它们应该仅被提交一次 以降低客户端和服务器端的 来往 以提高服务器的性能 为求描述方便 我们称它们为延期事件监听器 Deferrable Event Listeners 为了使一个事件监听延期 必须实现 org zkoss zk ui event Deferrable接口 和 EventListener 并且使用isDeferrable 方法 返回true 就像下面一样 public class DeferrableListener implements EventListener Deferrable private boolean modified public void onEvent Event event modified true public boolean isDeferrable return true 当客户端的一个事件 例如 选择一个列表项目 list item 被触发时 如果没有为其 注册事件监听器或仅有延期 deferrable 的监听器被注册 ZK 不会将事件送出 一方面 如果至少有一个非延期 non deferrable 监听器 事件会被马上送到服务器端 和所有的队 列事件 queued events 一起 没有事件会丢失 到达顺序是保存好的 提示 当有非延期监听器为用户提供视觉响应 可以使用使用延期的 deferrable 事 件监听器维持 maintaining 服务器状态 2 为页面动态地添加和移除事件监听器 开发人员可以为页面 org zkoss zk ui Page 动态地添加和移除事件监听器 一旦被添 第 24 页 加 所有被指定名字的事件会被送到指定页面的任何组件 这些页面将会被送到监听器 所有的页面级 page level 事件监听器都是非即时 换言之 isArap 方法被忽略了 一个典型的例子是使用页面级事件监听器来维护修改标志 modification flag 如下 import org zkoss web servlet dsp action Page import org zkoss zk ui event Deferrable import org zkoss zk ui event Event import org zkoss zk ui event EventListener import org zkoss zul Window import org zkoss zk ui public class ModificationListener implements EventListener Deferrable private final Window owner private final Page page private boolean modified public ModificationListener Window owner Note we have to remember the page because unregister might be called after the owner is detached owner owner page Page owner getPage org zkoss zk ui Page page addEventListener onChange this org zkoss zk ui Page page addEventListener onSelect this org zkoss zk ui Page page addEventListener onCheck this Called to unregister the event listener public void unregister org zkoss zk ui Page page removeEventListener onChange this org zkoss zk ui Page page removeEventListener onSelect this org zkoss zk ui Page page removeEventListener onCheck this Returns whether the modified flag is set public boolean isModified 第 25 页 return modified public void onEvent Event event throws Exception public boolean isDeferrable return false 3 5 2 3 调用顺序 调用事件监听器的顺序如下 假定接收的是onClick 事件 1 如果监听器实现了org zkoss zk ui event Express 接口 依次为添加到目标组件 targeting component 的onClick 事件调用事件监听器 按照添加的顺序调用 2 调用目标组件的onClick 属性指定的脚本语言 3 如果监听器没有实现org zkoss zk ui event Express 接口 依次为添加到目标组 件的onClick 事件调用事件监听器 按照添加的顺序调用 4 调用目标组件的onClick 成员方法 5 依次为添加到目标组件所属页面的的onClick 事件调用事件监听器 按照添加的顺 序调用 org zkoss zk ui event Express 接口是一个装饰器 decorative interface 用 来改变调用事件监听器的优先级 注意 如果事件监听器被添加到页面 而不是组件 这个 接口是没有意义的 3 5 2 4事例 一个异步产生标签的工作线程 package Test import org zkoss lang Threads import org zkoss zk ui Desktop import org zkoss zk ui Executions import org zkoss zul Label public class WorkingThread extends Thread private static int cnt private Desktop desktop private Label label private final Object mutex new Integer 0 第 26 页 Called by thread zul to create a label asynchronously To create a label it start a thread and wait for its completion public static final Label asyncCreate Desktop desktop throws InterruptedException final WorkingThread worker new WorkingThread desktop synchronized worker mutex to avoid racing worker start Executions wait worker mutex return worker label public WorkingThread Desktop desktop desktop desktop public void run label new Label Execute cnt synchronized mutex to avoid racing Executions notify desktop mutex 然后 在一个事件监听器中 我们使用ZUML 页面来调用这个工作线程 如在onClick 事件中 使用的代码如下所示 timer start Label label Test WorkingThread asyncCreate desktop main appendChild label timer stop 按下 Start Working Thread 按钮的效果如下 第 27 页 此代码运行有错误 还没有运行出结果 官方的demo也是有错的 第 28 页 4 组件属性及重要函数 4 1 标签组件 Label 组件主要是用来呈现一段文字 最简单的应用方式如下所示 helloworld 也可通过如下方式明确指定一个 label 当然 你也可以为它设置各种属性来控制其显示方式 Label 有 pre hyphen maxlength 和 multiline 属性 例如当 pre 属性为 true 时 所有的空格 换行符 制表符等都会被保 留 不同属性配合使用将会产生不同的结果 hyphen 属性控制单词在超过长度限制时的行 为 hyphen 为 ture 时 超过长度的单词会被截断到下一行继续显示 为false 时直接切去 不显示 maxlenth 属性用来定义单词的最大长度 multiline 属性与 pre 类似 只是 multiline 在每行的开始保留了空格和换行 如下表所示 具体应用效果如下 1 最大长度为9 hyphen为true CDATA String s welcome Nice to meet you Hello every for int i 0 i 2 最大长度为9 hyphen为false CDATA String s welcome Nice to meet you Hello every for int i 0 i 3 pre 属性为 true 4 pre 属性为 false 第 30 页 4 2 按钮组件 按钮组件有两种类型 Button 和 toolbarbutton 他们的主要功能是类似的 只是其外观显 示不同 Button 组件使用 HTML BUTTON 标记 而 toolbarbutton 组件使用 HTML A标记 可用 label 和 image 属性来为按钮指定标签和图像 用 dir 属性控制哪个组件显示在前方 Orient 控制布局是横向还是纵向 为按钮添加行为可有两种方式 通过 onClick 和 href 属性 onClick 属性定义了点击按 钮后进行的响应 href 属性定义了点击按钮后转向的页面 具体应用如下所示 1 显示不同的位置情况 点击不同的按钮 显示相应的值 onClick 属性 第 31 页 2 应用 href 属性 点击 left 后 4 3 日历组件 Calendar 属性展示了日历功能 并允许用户选择日期 它支持两种不同的布局 可通 过 compact 属性进行设置 Calendar 设置了 value 属性来让开发人员设置和获取选中的日 期 开发人员还可以通过监听 Onchang 事件来进行必要的处理 1 默认情况下 compact 属性为 true 第 32 页 2 当 compact 属性为 false 时 上面显示的为月份 下面为日期 用户可直接进行选择 4 4 图像组件 Image 组件用于在浏览器端展示图像 支持多种图像文件格式 一般有两种方式来为 image 组件指定一个图像 一种方式是使用 src 属性指定图像的 URI 这种方法与 HTML 支持 的相似 另一种方法是通过 setContent 方法来直接为 image 组件指定图像的内容 一旦被 指定 图像会展示在浏览器端并会被动态更新 这种方法指定使用于动态生成的图像 1 src 方法 第 33 页 这是使用src方法显示图片 2 setContent 方法 Upload your hot shot 第 34 页 4 5 窗口 window 组件 就像 HTML 的 DIV 标签 用于为组件分组 应用很广泛 不同于其它的 组件 window 有如下的特点 1 window 是一个 ID 空间的所有者 window 可以包含任意组件 包括其自身 如果 通过标识指定 可以使用 getFellow 方法来找到它 2 window 可以被重叠 弹出和嵌入 overlapped popup and embedded 3 window 可以是对话框 modal dialog Window 有如下属性 title 属性 用来设置 window 的标题 caption 属性 设置标题 caption 组件的所有子组件都会出现在 title 的右边 你 可以为 caption 指定标签和图像 border属性 border属性是否显示window 的边框 默认的样式仅支持normal 和 none 默认为 none 但也可以提供额外的样式类 style class closable 属性 若将 closable 属性值设为 true close 按钮会显示在 window 组件中 这样可以关闭此 window 一旦用户点击了 close按钮 onClose 事件会被送到 window 这样此事件会被window 的 onClose方法处理 那么 onClose 在默认情况下会把 window 自身移除 也可以重定义此方法 或者注册一个监听器来改变默认的行为 例如 你可 第 35 页 以选择隐藏而不是关闭 sizable 属性 将 sizable 属性设为 true 则允许用户重定义 window 的大小 这样用 户可以拖曳边框来改变 window 的尺寸 contentStyle 属性 通 过 指 定 contentStyle 属性 可 以 改 变 window 中内 容 contentStyle 的一个典型应用是使一个 window 变得可滚动 Zk 的 window 支持四种样式类 embedded overlapped popup 和 wndcyan 不同模式 window 的外观是不同的 可以通过为 sclass 属性指定一个值来改变外观 window 有四种模式 重叠 弹出 标示和嵌入 嵌入为默认模式 可以使用 doOverlapped doPopup doHighlighted 和 doEmbedded 方法来改变模式 具体应用实例如下 1 实例一 Auto position applicable if not embedded Embed Overlap Popup 第 37 页 2 实例二 Hello everyone 这是窗口演示界面 点击按钮查看相应变化 第 38 页 默认模式即为嵌入模式 重叠模式 弹出模式 Modal 模式 标识模式 第 39 页 4 6 布局组件 布局组件包括 borderlayout north south center west east 布局组件是嵌套组件 父组件为 borderlayout 子组件包括 north south center west 和 east borderlayout 子组件的组合是任意的 布局组件可以将某一区域分成三个竖直的区域 实现代码如下 The East The Center The West 也可以将某一区域分成三个水平的区域 实现代码如下 The North The Center 第 40 页 The South 4 6 1 嵌套的 borderlayout 组件 为了将某一区域划分更多的小区域 你可将布局组件嵌入到另一个布局组件中 即嵌套 的 borderlayout The FirstArea The SecondArea The ThirdArea The ForthArea 第 41 页 The Fifth Area The Sixth Area 4 6 2 布局组建的 size 和 border 属性 north south east west 等子组件可以通过指定 size 属性改变其大小 size 属性的功 能依赖于子组件的类型 对于水平组件 north 和 south size 属性决定他们的高度 而对 于竖直组件 east 和 west size 属性决定他们的高度 border 属性决定是否为布