基本组件
Label组件：89
用来显示一段文字
<label value=”hello”/>
属性：pre、hyphen、maxlength、multiline
按钮组件：90
两种：button和toolbarbutton
属性：
Label:名称、image:按钮显示的图像、（dir：控制label和image的显示位置，orient:控制布局为横向或纵向）
<button label=”left” image=”/img/folder.gif” dir=”reverse” orient=”vertical” width=”125px”/>
事件：
onClick：指定一个监听器
href：指定一个URL
如果都指定，href属性有更高的优先级，也就是说onClick事件不会被发送
<button onClick=”do()”/>
<button href=”/another_page.zul”/> 等价于下面的 （在客户端处理）
<button onClick=”Excutions.sendRedirect(" another.zul ")”/>（转到服务器端处理）
单选或单选组：
一个单选按钮是可以被打开或关闭的组件；
单选按钮可以被分组，成为radiogroup；同一组同一时间仅有一个按钮被选中
<radio label=”单个”/>
<radiogroup onCheck=”alert(self.selectedItem.label)”>
<radio label=”1”/>
<radio label=”2”/>
<radio label=”3”/>
</radiogroup>
图像：92
静态图像：
<image src=”/some/my.jpg”/>
动态图像：使用setContent方法为image组件指定图像内容，图像会在浏览器端动态更新
Location: <textbox onChange=”updateMap(self.value)”/>
Map: <image id=”image”/>
<zscript>
Void updateMap(String location) {
If (location.length() > 0) image.setContent (new MapImage(location));
}
</zscript>
音频：95
Audio组件用来在浏览器端播放音频。像image一样，可以使用src属性指定音频的URL或使用setContent方法指定动态生成的音频
输入控件：95
Textbox
Intbox
Decimalbox
Doublebox
Datebox
Combobox
Bandbox
属性：
Type：可以为textbox组件指定值为password的type属性，这样不显示用户输入的内容
Username: <textbox/>
Password: <textbox type=”password”/>
Format:可以控制输入控件的格式，默认为null。对于datebox，意味着yyyy/MM/dd
<datebox format=”MM/dd/yyyy”/>
可以动态的改变格式，如下：
<datebox id=”db”/>
<button label=”set MM-dd-yyyy” onClick=”db.setFormat(" MM-dd-yyyy ")”/>
Constraint:控制输入控件的值。
no positive,no negative,no zero适用于Intbox和decimalbox；
no past,no today适用于datebox；no empty适用于任何组件；
正则表达式仅适用于字符串类型组件，如textbox,combobox和bandbox
datebox的特殊约束：支持一个日期范围
<datebox constraint=”between 20071225 and 20071203”/>
<datebox constraint=”before 20071225”/>
<datebox constraint=”after 20071225”/>
定制属性：(实现了org.zkoss.zul.Constraint接口 98页)
onChange事件：
当用户改变了输入控件的内容，输入控件会使用onChange事件通知应用程序
onChanging事件：
当用户正在改变输入控件的内容时，输入控件使用onChanging事件通知应用程序
要获取用户输入的内容，如下方式访问事件的value属性：
<grid>
<rows>
<row> <textbox onChanging=”copy.value=event.value”/> </row>
<row> <textbox id=”copy” readonly=”true”/> </row>
</rows>
</grid>
日历组件：
Calendar展示了一个日历并允许用户从中选择一个日期
<hbox>
<calendar id=”cal” onChange=”in.value=cal.value”/>
<datebox id=”in” onChange=”cal.value=in.value”/>
</hbox>
属性：
Value:设置及获取选中的日期
Compact:ture/false，默认值为本地
进度条：
<progressmeter value=”10”/>
属性：
Value：必须在0到100的范围内取值
Slider组件：
以滚动方式来指定值
<slider id=”slider” onScroll=”Audio.setVolume(slider.curpos)”/>
Slider接收在0到100范围内的值，可使用maxpos属性来改变允许的最大值
计时器：
Timer是一个不可见的组件，用于在指定的时刻或一段时间内将onTimer事件发送到服务器，可使用start和stop方法控制timer
<window title=”Timer demo” border=”normal”>
<label id=”now”/>
<timer id=”timer” delay=”1000” repeats=”true” onTimer=”now.setValue(new Date().toString())”/>
<button label=”Stops timer” onClick=”timer.stop()”/>
<button label=”Starts timer” onClick=”timer.start()”/>
</window>
分页：
<paging totalSize=”100” pageSize=”20”/>
Listbox和grids都支持paging
窗口：104
Window像HTML中的DIV用于为组件分组，不同于其他组件
1. window是一个ID空间所有者，可包含任意组件包括自身，如果通过标识指定，可使用getFellow方法找到
2. window可被重叠，弹出和嵌入
3. window可以是对话框
<window id=”win” title=”窗口” border”normal” width=”350px”>
<caption image=”/img/coffee.gif” label=”你好”/>
<toolbar>
<toolbarbutton label=”save”/>
<toolbarbutton label=”cancel”/>
</toolbar>
请单选：
<radiogroup>
<radio label=”ZK”/><radio label=”JSF”/>
</radiogroup>
请选择：
<checkbox label=”hello,world”/>
</window>
属性：
Closable：设为true，close按钮会显示在window组件中，这样可以关闭window
Sizable：允许用户重定义window大小，设为true，用户可拖曳边框改变其大小
Sclass: ZK支持四种样式：embedded，overlapped，popup，wndcyan
ContentStyle:可改变window中内容块
<window title=”hello” border=”normal” contentStyle=”background:yellow”>背景颜色
<window title=”hello” border=”normal” contentStyle=”overflow:auto”>滚动条
Border:是否显示边框，默认的样式仅支持normal和none
弹出框模式：108页
Position:控制重叠/弹出/modal的位置
通用对话框
消息框：
Alert(“Wrong”);========Messagebox.show(“Wrong”);
文件上传对话框：
<button label=”upload”>
<attribute name=”onClick”>
{
Object media = Fileupload.get();
If (media instanceof org.zkoss.image.Image) image.setContent(media);
else if (media != null) Messagebox.show(
“not an image:”+media,”Error”,Messagebox.OK ,Messagebox.ERROR);
}
</attribute>
</button>
一次上传多个文件对话框：
Fileupload组件：
Fileupload不是一个modal对话框，是一个组件，所以可以和其他组件一起插入文字间
注：除了静态的get方法用于打开文件上传对话框，org.zkoss.zul.Fileupload本身为一个组件
<fileupload onUpLoad=”img.setContent(event.media)”/>
事件：
onUpload：按下上传按钮后，onUpload事件及UploadEvent事件的一个实例被送出，可以使用getMedia或getMedias方法获取上传文件的内容
onClose：如果此事件实现定制行为，fileupload组件会失效，即所有的域会被清空或重设
下载对话框
<button label=”download”>
<attribute name=”onClick”>
{
Java.io.InputStream is =
desktop.getWebApp().getResourceAsStream(“/download.html”);
if (is != null) Filedownload.save(is ,”text/html” , “download.html”);
else alert(“/download.html not found”);
}
</attribute>
</button>