你可以使用 pre ， hyphen ， maxlength 和multiline 属性来控制如何展示一个label。例如，如果指定pre为true，所有的空格(white spaces)，例如换行，空白，制表符(new line, space和tab)都会被保留。

<window border="normal" width="100px">
<vbox id="result">
 
</vbox>
   <zscript><![CDATA[
 
   String[] s = {"this is 9", "this is ten more to show",
   "this framework", "performance is everything"};
   for (int j = 0; j < s.length; ++j) {
      Label l = new Label(s[j]);
      l.maxlength = 9;
      l.hyphen = true;
      l.parent = result;
   }
   ]]></zscript>
</window>

multiline 属性与pre类似，除了multiline在每行的开始保留了换行和空格。

有两种方式为button 和 toolbarbutton添加行为。首先需要为onClick指定一个监听器。然后为href属性指定一个URL。如果都被指定，href属性拥有更高的优先级，也就是说 onClick 事件不会被发送。

<button onClick="do_something_in_Java()"/>
<button href="/another_page.zul"/>

当处理一个事件时， 你可以决定停止处理当前桌面，并且通过sendRedirect 方法来转到另一个页面。换句话说，下面的例子中两个按钮是等价的(从用户的观点来看)。

<button onClick="Executions.sendRedirect(&quot;another.zul&quot;)"/>
<button href="another.zul"/>

既然 onClick 事件被送到了服务器去处理，你可以在调用sendRedirect前添加更多的逻辑，例如，当特定的条件被满足时转到另一个页面。

另外，href属性在客户端方面被完全处理。当用户点击按钮时，你的应用程序并不会被察觉

你可以混合使用radiogroup和radio来组成你想要的布局，如下所示。

<radiogroup>
   <grid>
   <rows>
      <row><radio label="Apple" selected="true"/> Fruit, music or computer</row>
      <row><radio label="Orange"/><textbox/></row>
      <row><radio label="Banana"/><datebox/></row>
   </rows>
   </grid>
</radiogroup>

单选按钮属于离其最近的radiogroup。你甚至你可按如下方式嵌套使用radiogroup。每个

radiogroup是独立的，虽然可能有某种视觉重叠(visual overlap)。

<radiogroup>
   <grid>
   <rows>
      <row><radio label="Apple" selected="true"/> Fruit, music or computer</row>
      <row><radio label="Orange"/>
         <radiogroup>
         <radio label="Small"/>
         <radio label="Large" selected="true"/>
         </radiogroup>
      </row>
      <row><radio label="Banana"/><datebox/></row>
   </rows>
   </grid>
</radiogroup>

就像使用其他可以接受URI的属性一样，你可以指定"*"来定位一张本地图像。例如，如果对不同的地区对应不同的图像，你可以按如下方式使用。

<image src="/my*.png"

然后假定你的用户以de_DE作为首选地区访问你的页面。ZK会设法定位名称为/my_de_DE.png的图像。如果没有找到，则会尝试/my_de.png ，最后是/my.png。

参考国际化一章中浏览器和本地化URI一节来获取细节。

第二种方法是使用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>

在上面的例子中，我们假定有一个MapImage类用于产生指定位置的映射，即所谓的商业逻辑(business logic)。

注意，image组件仅接受org.zkoss.image.Image中的内容。如果有工具生成的图像不是这个格式，可以使用org.zkoss.image.AImage类来将一个二进制阵列数据，文件或输入流包装成Image接口

在传统的Web应用程序中，缓存一个动态生成的图像是很复杂的。有了image组件，你就不需要担心这些了。一旦指定了一个图像的内容，它就属于image组件，而且当image组件不再被使用时，它所占用的内存会被自动释放。

提示：如果你想指定非图像音频文件的内容，例如PDF，可以使用iframe组件。参考相关章节获取细节。

通过为imagemap然后，组件添加area子组件，开发人员可以代替使用应用程序本身处理坐标的方法。

<imagemap src="/img/sun.jpg" onClick="alert(event.area)">
  <area id="First" coords="0, 0, 100, 100"/>
  <area id="Second" shape="circle" coords="200, 200, 100"/>
</imagemap>

然后，imagemap组件将鼠标的位置坐标翻译成一个逻辑名字：用户点击的区域标识。

例如，如果用户点击(150,150)，将会得到如下描绘的结果：

area 组件支持三种形状：圆，多边形和矩形(circle, polygon and rectangle)。鼠标位置的坐标是屏幕像素，从图像的左上角开始计数，始于(0，0)。

如果一个area组件内的坐标覆盖了另外一个，第一个拥有更高的优先权。

你可以为textbox 组件指定值为password的type属性。这样将不会显示用户输入的内容。

Username: <textbox/>
Password: <textbox type="password"/>

通过使用format域，可以控制输入控件的格式。默认为null。对于datebox，意味着 yyyy/MM/dd。而对与intbox和decimalbox，则以为着根本没有格式。

<datebox format="MM/dd/yyyy"/>
<decimalbox format="#,##0.##"/>

就像其他的任何属性，你可以动态的改变格式，如下所示：

<datebox id="db"/><button label="set MM-dd-yyyy" onClick="db.setFormat(&quot;MM-dd-yyyy&quot;)"/>

无鼠标输入datebox

使用constraint属性可以控制输入控件接受什么值。它可以使no positive ， no negative ， no zero ， no empty ， no future ， no past ， no today和一个正则表达式的集合。前三个约束金使用于intbox 和decimalbox。no future ， no past,和no today约束仅适用于datebox。 no empty适用于任何组件。正则表达式约束仅适用于字符串类型组件，例如textbox ， combobox 和bandbox。

使用两个或更多的约束时，用逗号翻开约束，如下：

<intbox constraint="no negative,no zero"/>

为了指定一个正则表达式，你可以使用/来包围表达式。如下：

<textbox constraint="/.+@.+\.[a-z]+/"/>

注：

new Textbox().setContraint("/.+@.+\\.[a-z]+/");

`如果你想为应用程序展示定制的信息，而不是默认的，可以添加约束及验证失败后的信息，用

如果你想为应用程序展示定制的信息，而不是默认的，可以添加约束及验证失败后的信息，用

冒号隔开。

<textbox constraint="/.+@.+\.[a-z]+/: e-mail address only"/>
<datebox constraint="no empty, no future: now or never"/>

注：

<textbox constraint="/.+@.+\.[a-z]+/: ${c:l('err.email.required')}"/>

除了在上述章节中描述的约束(例如no future和正则表达式)，datebox支持一个日期范围。例如，

<datebox constraint="between 20071225 and 20071203"/>
<datebox constraint="before 20071225"/>
<datebox constraint="after 20071225"/>

注意

如果你想使用更复杂的约束，可以指定一个实现了org.zkoss.zul.Constraint接口的对象。

<window title="Custom Constraint">
   <zscript><![CDATA[
Constraint ctt = new Constraint() {
   public void validate(Component comp, Object value) throws WrongValueException {
      if (value =e= null || ((Integer)value).intValue() < 100)
         throw new WrongValueException(comp, "At least 100 must be specified");
   }
}
   ]]></zscript>
   <intbox constraint="${ctt}"/>
</window>

你可以在一个Java类中实现你的约束，例如my.EmailValidator，那么

<?taglib uri="/WEB-INF/tld/web/core" prefix="c"?>
<textbox constraint="${c:new('my.EmailValidator')}"/>

org.zkoss.zk.ui.WrongValueException

在上面的例子中，我们使用了org.zkoss.zk.ui.WrongValueException来表述一个错误。

就像描绘的那样，你需要指定两个参数，第一个为引起错误的组件，第二个为错误信息。你可以随时丢出这个异常，如下面，当onChange事件被接收时：

<textbox>
   <attribute name="onChange">
      if (!self.value.equals("good")) {
         self.value = "try again";
         throw new WrongValueException(self, "Not a good answer!");
      }
   </attribute>
</textbox>

<window title="Custom Constraint" border="normal">
   <zscript><![CDATA[
class MyConst implements Constraint, CustomConstraint {
   //Constraint//
   public void validate(Component comp, Object value) {
      if (value == null || ((Integer)value).intValue() < 100)
         throw new WrongValueException(comp, "At least 100 must be specified");
   }
   //CustomConstraint//
   public void showCustomError(Component comp, WrongValueException ex) {
      errmsg.setValue(ex != null ? ex.getMessage(): "");
   }
}
Constraint ctt = new MyConst();
   ]]></zscript>
   <hbox>
      Enter a number at least 100:
      <intbox constraint="${ctt}"/>
      <label id="errmsg"/>
   </hbox>
</window>

<script type="text/javascript"><![CDATA[
   //Running at the browser
   window.Validate_errorbox = function (id, boxid, msg) {
      var html = '<div style="display:none;position:absolute" id="'
         +boxid+'">'+zk.encodeXML(msg, true)+'</div>';
      document.body.insertAdjacentHTML("afterbegin", html);      return $e(boxid);   }
]]></script>

当用户已经改变了输入控件的内容，输入控件会使用onChange事件来通知应用程序。

注意，当onChange的事件监听器被调用时，其值已经被设定。因此，如果当你想为onChange的事件监听器注入一个非法值时已经晚了，除非你适当地还原其值。建议使用在定制约束(Custom Constraints)章节描述的约束。

当用户正在改变了输入控件的内容时， 输入控件会使用onChanging事件来通知应用程序

注意，当onChanging的事件监听器被调用时，其值并没有被设定。换言之，value属性原来的值。为了获取用户输入的内容，你得按如下方式访问事件的value属性。

<grid>
   <rows>
      <row>The onChanging textbox: 
         <textbox onChanging="copy.value = event.value"/></row>
      <row>Instant copy:
         <textbox id="copy" readonly="true"/></row>
   </rows>
</grid>

由于用户还没有更改，所以onChanging的事件监听器非法值就太早了。建议使用在定制约束(Custom Constraints)章节描述的约束。

就像输入控件，calendar提供了value属性来开发人员设置及获取选中的日期。此外如果有必要的话，开发人员还可以监听onChange事件以便立即加以处理。

calendar 支持两种不同的布局，可以通过compact属性控制。

<calendar compact="true"/>

默认值为本地。

listbox 和 grid组件本身支持paging，所以不必像上面一样明确地为其指定paging 组件，除非你想指定不同的布局(visual layout)或者使用一个paging组件控制多个listbox 和 grid。

参考网格一节获取更多的细节。