ZK惯用资料整理 _Web前端

ZK常用资料整理

在一个页面中使用多种脚本语言?
<zscript language="Java">?
?? var1 = 123;?
</zscript>?
<zscript language="JavaScript">?
?? var2 = 234;?
</zscript>?

${value} ：赋值?

----------自定义控件---------------?
<?component name="button" extends="button" style="border:1px solid blue" label="用户权限"?>?
<button onClick="check()"/>?

使用getZScriptVariable方法来获得zscript中的定义的变量。?
使用getZScriptClass和getZScriptMethod方法来获取定义在zscript中的类和方法?

如果你想找到某个解释器，可以使用getInterpreter方法先获得解释器，就像下面一样：?
page.getInterpreter("JavaScript").getVariable("some"); //interpreter for JavaScript?
page.getInterpreter(null).getVariable("some"); //interpreter for default language?

特殊字符替换?
<???? 用?? <来替换?
>???? 用?? >来替换?
&???? 用?? &来替换?
"???? 用?? "来替换?
'???? 用?? '来替换?

<zscript>?
<![CDATA[?? ----- 用CDATA解释器?
void myfunc(int a, int b) {?
?? if (a < 0 && b > 0) {?
????? //do something?
?? }?
]]>?
</zscript>?

--------------html里添加命名空间----------?
<html xmlns:="http://www.w3.org/1999/xhtml"?
xmlns:x="http://www.zkoss.org/2005/zul"?
xmlns:zk="http://www.zkoss.org/2005/zk">?
<body>hello word!</body>?
</hmtl>?

------------if? unles-------?
如果a为1，且b不为2 window 组件就会被创建。?
<window if="${a==1}" unless="${b==2}">?
?? ...?
</window>?

------------Switch和Case-------?
使用zk元素的switch和case属性，你可以控制ZK页面在一个变量等于某个特定值时才会被执行。?
<zk switch="${fruit}">?
?? <zk case="apple">?
?? Evaluated only if ${fruit} is apple?
?? </zk>?
?? <zk case="${special}">?
?? Evaluated only if ${fruit} equals ${special}?
?? </zk>?
?? <zk>?
?? Evaluated only if none of the above cases matches.?
?? </zk>?

------------正则表达式---------?
<zk switch="${fruit}">?
?? <zk case="/ap*.e/">?
?? Evaluate if the regular expression, ap*.e"., matches the switch condition.?
?? </zk>?
</zk>?

------------和forEach一起使用---?
<zk case="${each}" forEach="apple, orange">?
等价于，?
<zk case="apple, orange">?

------------反复式流程?
在下面的例子中，列表项目被创建了三次。每个项目的label分别为"Best", "Better" 和 "God",?
<listbox>?
??? <listitem label="${each}" forEach="Best, Better, God"/>?
</listbox>?

如果你有一个存放对象集合的变量，则可以直接为forEach属性指定它。例如，假如你有一个grades变量，如下。?
<zscript>?
grades = new String[] {"Best", "Better", "Good"};?
</zscript>?

然后可以使用forEach属性来迭代此变量。注意，你必须使用EL表达式来指定这个集合。?
<listbox>?
?? <listitem label="${each}" forEach="${grades}"/>?
</listbox>?

迭代(iteration)依赖于forEach属性指定值的类型。?

如果是java.util.Collection，就会迭代集合(collection)的每个元素。?

如果是java.util.Map，就会迭代map中的每个Map.Entry。?

如果是java.util.Iterator，就会迭代迭代器(iterator)中的每个元素。?

如果是java.util.Enumeration，就会迭代enumeration中的每个元素。?

如果是Object[]，int[]，short[]，byte[]，char[]，float[]或double[]被指定了，就会迭代数组(array)中的每个元素。?

如果是null，什么也不会产生(被忽略)。?

如果被指定的不是以上类型，相关元素仅被赋值(evaluated)一次，就好像一个集合只指定了一个单独的项目。?

each变量?
在迭代中，一个变量被称为each，通过指定集合的项目被创建并且赋值。在上面的例子中，首次迭代中，each被赋值为"Best"，然后是"Better"，最后是"Good"。?

注意each变量在EL表达式和zscript中都是可访问的。ZK将会保留以前定义的每个变量，并在迭代完每个元素后将其恢复。?

-----------------隐含对象------------------?
self ：组件本身?
page ：页面，与self.page相同?
event: 当前事件?

----------------进程指令-------------------?
你可以将page指令放置在XML文档的任何地方?
<?page [id="..."] [title="..."] [style="..."] [language="xul/html"] zscriptLanguage="Java"]?>?
----------------?
component指令：?
<?component name="mywindow" extends="window" class="MyWindow"?>?
...?
<mywindow>?
...?
</mywindow>?
等价于下面的代码：?
<window use="MyWindow">?
...?
</window>?
----------------?
<?import uri="/template/taglibs.zul" directives="taglib, xel-method"?>?

----------------?
<?link rel="alternate" type="application/rss+xml" title="RSS feed"?
href="/rssfeed.php"?>?
<?link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"?>?
<?link? rel="stylesheet" type="text/css" href="~./zul/css/ext.css.dsp"?>?

<window title="My App">?
??? My content?
</window>?
-------------------?

unless属性?
unless="${ an-EL-expr }"?
指定不为相关元素赋值(evaluate)的条件。换句话说，如果条件值为真(false)，关联元素及其所有子元素会被忽略。?

------------------?
forEach属性?
forEach="${an-EL-expr}"?

forEach="${an-EL-expr},a-value"?

有两种格式。第一种，你可以不使用逗号来指定一个值。通常为一个对象集合，这样关联元素可以依靠(against)集合中的每个对象重复被赋值。如果没有指定或为空，此属性会被忽略。如果没有集合对象被指定，仅会被赋值一次就好像有一个单元素的集合被指定。?

第二种，你可以指定一个列表，使用逗号分隔各项目。然后，对于列表中的每个值，相关联的元素会被重复执行(he associated element will be evaluated repeatedly against each value in the list)。?

----------------------?
forEachBegin属性?
forEachBegin="an-interger"?

forEachBegin="${an-EL-expr}"?

被用于forEach 属性，指定迭代(iteration)开始处索引(从0开始)。如果没有指定，迭代会从第一个元素开始，即0。?

如果forEachBegin大于或等于元素的数目，则不会发生迭代。?

注：forEachBegin.index对于基本的集合，数组和其他类型是绝对的(forEachStatus.index is absolute with respect to the underlying collection, array or other type)。例如，如果?

forEachBegin为5 ，forEachStatus.index的第一个值为5。?
------------------------?
forEachEnd属性?
for EachEnd="${ an-EL-expr }"?

被用于forEach 属性，指定迭代(iteration)结束处索引(包括此)(从0开始)。如果没有指定，迭代会在最后一个元素处结束。?

如果forEachEnd大于或等于元素的数目，则迭代会在最后一个元素处结束。?
------------------------?
<div fulfill="b1.onClick, b2.onOpen"?
? onFulfill="Components.wireVariables(self, controller)">?
? ...?
</div>?
------------------------?
forward 属性?
forward="target_event_expr"?

forward="oringal_event=target_event_expr"?

这里target_event_expr 是一个事件表达式。事件表达式被用于为一个组件指定事件。可以使用下面格式中的一个：?

event-name?

target-id.event-name?

id1/id2/id3.event-name?

${el-expr}.event-name?

此属性用将目标组件一个事件以其他事件名称跳转至另一个组件。这就是所谓的跳转条件(forward condition)。?

例如，你可以将button的onClick事件跳转至window，如下：?

<window id="w" use="MyWindow">?
?? ...?
?? <button lable="Submit" forward="onClick=w.onOK"/>?
</window>?
------------------------------?
<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>?
------------------------------?
orient：控制布局为横向或纵向。?
例如：orient="vertical"?

-------------单选按钮和单选按钮组--------------?
<radiogroup onCheck="alert(self.selectedItem.label)">?
?? <radio label="Apple"/>?
?? <radio label="Orange"/>?
?? <radio label="Banana"/>?
</radiogroup>?

----------------图像------------------?
<imagemap src="/img/sun.jpg" onClick="alert(event.x + ", " +event.y)"/>?
等价于：?
通过为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>?

-------------?
日历：datebox?
-----------------分页---------------?
paging组件用于将一段很长的内容分成多个页面。例如, 假定有100个项目，每次显示20个项目，那么可以按如下方式使用 paging 组件。?
<paging totalSize="100" pageSize="20"/>?

-----------------------------?
标题 (caption)是 caption 组件声明的。 caption 组件的所有子组件都会出现在 title 的右边。也可以指定为图片?
<window title="Demo" border="normal" width="350px">?
<caption>?
????? <toolbarbutton label="More"/>?
????? <toolbarbutton label="Help"/>?
?? </caption>?
</window>?

closable="true"：关闭window?
以下是不关闭，点击后隐藏?
<window closable="true" title="Detach on Close" border="normal" width="200px"?
onClose="self.visible = false; event.stopPropagation();">?
?? In this example, this window hides itself when the close button is clicked.?
</window>?
注意，必须调用event.stopPropagation()阻止Window.onClose()被调用。?

sizable="true"：这样用户可以拖曳边框来改变?
window样式：?
sclass="wndcyan"?
sclass="popup"?
sclass="modal"?
默认为没有?

-------------滚动窗口-------------------?
contentType的一个典型应用是使一个 window变得可滚动。：?
<window id="win" title="Hi" width="150px" height="100px" contentStyle="overflow:auto" border="normal">?
This is a long line to spead over several lines, and more content to display.?
Finally, the scrollbar becomes visible.?
This is another line.?
</window>?

-------------窗口边框-------------------?
<zk>?
?? <style>?
?? div.wc-embedded-dash {?
?? padding: 2px; border: 3px dashed #aab;?
?? }?
?? </style>?
?? <window title="My Window" border="dash" width="200px">?
?? Hello, World!?
?? </window>?
</zk>?

-----------消息框--------------------?
if (Messagebox.show("Remove this file?", "Remove?", Messagebox.YES | Messagebox.NO, Messagebox.QUESTION) == Messagebox.YES) {?
?? ...//remove the file?
}?

alert("Wrong");?
Messagebox.show("Wrong");?
-----------文件上传对话框-------------?
<window title="Fileupload Demo" border="normal">?
?? <image id="image"/>?
?? <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>?
</window>?
------------------一次上传多个文件------------------------?
如果你允许一次上传多个文件，可以按如下方式指定允许数字的最大值。?
<window title="fileupload demo" border="normal">?
?? <button label="Upload">?
????? <attribute name="onClick"><![CDATA[{?
?? Object media = Fileupload.get(5);?
?? if (media != null)?
????? for (int j = 0; j < media.length; ++j) {?
???????? if (media[j] instanceof org.zkoss.image.Image) {?
??????????? Image image = new Image();?
??????????? image.setContent(media[j]);?
??????????? image.setParent(pics);?
???????? } else if (media[j] != null) {?
??????????? Messagebox.show("Not an image: "+media[j], "Error",?
?????????????? Messagebox.OK, Messagebox.ERROR);?
???????? }?
????? }?
????? }]]></attribute>?
?? </button>?
?? <vbox id="pics"/>?
</window>?

fileupload组件:?
<image id="img"/>?
Upload your hot shot:?
<fileupload onUpload="img.setContent(event.media)"/>?

--------------------布局-------------------?
borderlayout????
??????? ：border="normal"? 有边框?
：border="none"??? 无边框（默认）?

splittable 和collapsible 属性?
若你想使你的布局组件可拆分(splittable)，则可以将splittable属性设置为true。?
此外，若你想使一个组件可折叠(collapsible)，则可以将collapsible属性设置为true。?

<vbox> :vbox组件用于创建垂直box。?
<hbox> :hbox组件用于创建水平box。?

************?
<vbox>?
等价与?
<box orient="vertical">?
**************?
spacing属性：box控件组件之间的间隙控制?
<vbox spacing="5em">?
?? <textbox/>?
?? <datebox/>?
</vbox>?
------------widths 和 heights 属性------------------?
使用widths属性可以指定hbox每个元素(cell)的宽度，如下。?

<hbox width="100%" widths="10%,20%,30%,40%">?
?? <label value="10%"/>?
?? <label value="20%"/>?
?? <label value="30%"/>?

分割效果：splitter?

<hbox spacing="0" style="border: 1px solid grey" width="100%">?
?? <vbox height="200px">?
????? Column 1-1: The left-top box. To know whether a splitter?
????? is collapsed, you can listen to the onOpen event.?
????? <splitter collapse="after"/>?
????? Column 1-2: You can enforce to open or collapse programming?
????? by calling setOpen method.?
?? </vbox>?
?? <splitter collapse="before"/>?
?? Column 2: Whether a splitter allows users to open or collapse?
?? depending on the collapse attribue.?
</hbox>?

<menuitem label="" autocheck="true"/>：将autocheck属性设为true，这样当用户点击此菜单项目时checked属性就会被自动切换(toggled)。?

----------------------------------?
可以将其改变为当鼠标移动到菜单上方时它自动打开。将autodrop属性设为true即可实现。：?
<menubar autodrop="true">?
...?
</menubar>?

<splitter collapse="before"/>?
collapse="none"??? 无折叠发生。?
collapse="before"?? 当按下按键时，相同组件内的元素立即在分割器(splitter)前折叠起来，这样其宽度或高度将变为0。?
collapse="after"??? 当按下按键时，相同组件内的元素立即在分割器(splitter)后折叠起来，这样其宽度或高度将变为0?

-----------网格--------------?
<columns id="cs" sizable="true">?
sizable="true"：可调整宽度?

<grid width="300px" mold="paging" pageSize="4">?
添加mold和pageSize属性分页?

<paging id="pg" pageSize="4"/>：在任何处加上paging即和grid里的分页相同?

sortDirection="ascending" ：排序?

separator：?
使用orient属性，你可以指定一个垂直或水平的separator。默认为水平separator，即插入一条水平线。而垂直的separator为插入一个空格。另外，space是默认为垂直方向的separator的一种变体型(variant)。?
使用bar属性，你可以控制在组件间显示水平线还是垂直线。?
使用spacing属性，你可以控制spacing的大小。?
<separator spacing="20px"/>?
<window>?
?? line 1 by separator?
?? <separator/>?
?? line 2 by separator?
?? <separator/>?
?? line 3 by separator<space bar="true"/>another piece?
?? <separator spacing="20px"/>?
?? line 4 by separator<space bar="true" spacing="20px"/>another piece?
</window>?

toolbar有两种布局方向：horizontal 和 vertical。它们可以控制如何放置按钮。?

-----------------列表框---------------------------?
Listbox有两种模型：default和select。若使用了select，就会产生HTML的SELECT标签。?

<listbox mold="select">...</listbox>：带滚动下拉?

引用css文件：<style src="/my.css"/>?

---------------弹出式窗口-----------------------?
<window id="win" title="Hi!" border="normal" width="200px">?
????? <caption>?
???????? <toolbarbutton label="Close" onClick="win.setVisible(false)"/>?
????? </caption>?
????? <checkbox label="Hello, Wolrd!"/>?
?? </window>?

?? <button label="Overlap" onClick="win.doOverlapped();"/>?
?? <button label="Popup" onClick="win.doPopup();"/>?
?? <button label="Modal" onClick="win.doModal();"/>??
?? <button label="Embed" onClick="win.doEmbedded();"/>?
?? <button label="Highlighted" onClick="win.doHighlighed();"/>?