原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
Web 界面设计和开发指南
基于ZK 技术
本指南描述了如何设计友好可用的web 界面，并介绍如何基于ZK 技术实现
界面。遵循本指南可使得基于ZK 技术的web 应用界面达到美观、规范、一
致，并符合可用、无障碍原则。
作者：陈良泳
北京民生软件公司
2008/6/13
目录
1. 关于本指南3
2. 界面基础知识3
2.1. ZK 基本知识3
2.2. ZK 界面控件知识3
2.3. ZK 界面构成原理4
3. 界面布局设计6
3.1. 总体布局方法6
3.2. 确定元素顺序6
3.3. 确定元素嵌套7
3.4. 确定元素间距8
3.4.1. 单个元素间距8
3.4.2. 元素分组间距11
4. 界面控件使用规范11
4.1. 按钮11
4.1.1. 按钮的位置12
4.1.2. 按钮位置规则概览13
4.2. 复选框14
4.2.1. 排列对齐14
4.2.2. 字段状态依赖于复选框20
4.3. 单选框22
4.4. 下拉列表和列表框22
4.5. 表格22
5. ZK 界面换肤样式22
6. ZK 无障碍访问23
7. ZK 界面模式23
8. 附件：配套运行案例23
9. 参考文档24
1. 关于本指南
本指南描述了如何设计友好可用的web 界面，并介绍如何基于ZK 技术实现界面。内容
主要包含以下方面：
介绍Web 界面设计的知识和一般原则；
介绍总体布局规则和特定布局控件使用规范；
介绍每个ZK 控件的外观、行为和界面属性；
本指南面向web 应用开发者和web 界面设计者。
2. 界面基础知识
2.1. ZK 基本知识
ZK 是一套以AJAX/XUL/Java 为基础的web 应用开发框架，用于丰富web 用户界面。ZK
最大的好处是让web 应用开发像桌面开发一样简单。ZK 包含了一个以AJAX 为基础、事件驱
动、高互动性的引擎，同时还提供了丰富多样、可重复使用的XUL 与HTML 组件，及以XML
为基础的界面设计语言ZUML 。
最简单的ZK 界面代码如下：
window title=My First Window border=normal width=200px
Hello, World!
/window
2.2. ZK 界面控件知识
Zk web 界面是由一系列的zk 控件构成，所以必须了解这些控件才能更好的构建web 界
面。Zk 界面控件分为以下几类：
基本控件：基本控件是数据展示、数据输入、用户点击交互的一类控件，是用户界面的
最基本构成，这类控件包含有：Label、Button、Input、Radio、Checkbox、Combobox、Bandbox、
grid、tree 、combobox、chart、slider、Splitter 等。
容器控件：容器控件用于承载基本控件，用于对基本控件进行组织、分类、归纳。ZK
中常见的容器类控件有：Window 、Groupbox、Tabbox 等。
布局控件：在容器控件容纳基本控件时，一般先要确定界面布局方式，这就需要布局控
件进行界面布局的控件。布局控件一般为不可视，用于辅助确定基本控件的排列位置。Zk
布局控件有：Borderlayout、Box、Grid 等。
2.3. ZK 界面构成原理
界面效果图
容器控件 布局控件 基本控件
文档评论（0）