ZK----第七章 ZUML页面及XUL组件集

基本组件
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(&quot; another.zul &quot;)”/>（转到服务器端处理）

 

 

单选或单选组：
一个单选按钮是可以被打开或关闭的组件；
单选按钮可以被分组，成为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(&quot; MM-dd-yyyy &quot;)”/>
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>