ZK 常用代码

ZK 常用

在一个页面中使用多种脚本语言

var1 = 123;

var2 = 234;

${value} ：赋值

----------自定义控件---------------

使用getZScriptVariable方法来获得zscript中的定义的变量。

使用getZScriptClass和getZScriptMethod方法来获取定义在zscript中的类和方法

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

page.getInterpreter(null).getVariable("some"); //interpreter for default language

特殊字符替换

< 用<来替换

> 用>来替换

& 用&来替换

" 用"来替换

' 用'来替换

void myfunc(int a, int b) {

if (a < 0 && b > 0) {

//do something

}

]]>

--------------html里添加命名空间----------

xmlns:x="https://www.sodocs.net/doc/de17353973.html,/2005/zul"

xmlns:zk="https://www.sodocs.net/doc/de17353973.html,/2005/zk">

hello word!

------------if unles-------

如果a为1，且b不为2 window 组件就会被创建。

...

------------Switch和Case-------

使用zk元素的switch和case属性，你可以控制ZK页面在一个变量等于某个特定值时才会被执行。

Evaluated only if ${fruit} is apple

Evaluated only if ${fruit} equals ${special}

Evaluated only if none of the above cases matches.

------------正则表达式---------

Evaluate if the regular expression, ap*.e"., matches the switch condition.

------------和forEach一起使用---

等价于，

------------反复式流程

在下面的例子中，列表项目被创建了三次。每个项目的label分别为"Best", "Better" 和"God",

如果你有一个存放对象集合的变量，则可以直接为forEach属性指定它。例如，假如你有一个grades变量，如下。

grades = new String[] {"Best", "Better", "Good"};

然后可以使用forEach属性来迭代此变量。注意，你必须使用EL表达式来指定这个集合。

迭代(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文档的任何地方

----------------

component指令：

...

...

等价于下面的代码：

...

----------------

----------------

href="/rssfeed.php"?>

My content

-------------------

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大于或等于元素的数目，则迭代会在最后一个元素处结束。

------------------------

onFulfill="Components.wireVariables(self, controller)">

...

------------------------

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，如下：

...

------------------------------

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;

}

]]>

------------------------------

orient：控制布局为横向或纵向。

例如：orient="vertical"

-------------单选按钮和单选按钮组--------------

----------------图像------------------

等价于：

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

-------------

日历：datebox

-----------------分页---------------

paging组件用于将一段很长的内容分成多个页面。例如, 假定有100个项目，每次显示20个项目，那么可以按如下方式使用paging 组件。

-----------------------------

标题(caption)是caption 组件声明的。caption 组件的所有子组件都会出现在title 的右边。也可以指定为图片

closable="true"：关闭window

以下是不关闭，点击后隐藏

onClose="self.visible = false; event.stopPropagation();">

In this example, this window hides itself when the close button is clicked.

注意，必须调用event.stopPropagation()阻止Window.onClose()被调用。

sizable="true"：这样用户可以拖曳边框来改变

window样式：

sclass="wndcyan"

sclass="popup"

sclass="modal"

默认为没有

-------------滚动窗口-------------------

contentType的一个典型应用是使一个window变得可滚动。：

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.

-------------窗口边框-------------------

Hello, World!

-----------消息框--------------------

if (Messagebox.show("Remove this file?", "Remove?", Messagebox.YES | Messagebox.NO, Messagebox.QUESTION) == Messagebox.YES) {

...//remove the file

}

alert("Wrong");

Messagebox.show("Wrong");

-----------文件上传对话框-------------

{

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);

}

------------------一次上传多个文件------------------------

如果你允许一次上传多个文件，可以按如下方式指定允许数字的最大值。

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);

}

}

}]]>

fileupload组件:

Upload your hot shot:

--------------------布局-------------------

borderlayout

：border="normal" 有边框

：border="none" 无边框（默认）

splittable 和collapsible 属性

若你想使你的布局组件可拆分(splittable)，则可以将splittable属性设置为true。

此外，若你想使一个组件可折叠(collapsible)，则可以将collapsible属性设置为true。

:vbox组件用于创建垂直box。

:hbox组件用于创建水平box。

************

等价与

**************

spacing属性：box控件组件之间的间隙控制

------------widths 和heights 属性------------------

使用widths属性可以指定hbox每个元素(cell)的宽度，如下。

分割效果：splitter

Column 1-1: The left-top box. To know whether a splitter

is collapsed, you can listen to the onOpen event.

Column 1-2: You can enforce to open or collapse programming

by calling setOpen method.

Column 2: Whether a splitter allows users to open or collapse

depending on the collapse attribue.

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

----------------------------------

可以将其改变为当鼠标移动到菜单上方时它自动打开。将autodrop属性设为true即可实现。：

...

collapse="none" 无折叠发生。

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

collapse="after" 当按下按键时，相同组件内的元素立即在分割器(splitter)后折叠起来，这样其宽度或高度将变为0

-----------网格--------------

sizable="true"：可调整宽度

添加mold和pageSize属性分页

：在任何处加上paging即和grid里的分页相同sortDirection="ascending" ：排序

separator：

使用orient属性，你可以指定一个垂直或水平的separator。默认为水平separator，即插入一条水平线。而垂直的separator为插入一个空格。另外，space是默认为垂直方向的separator 的一种变体型(variant)。

使用bar属性，你可以控制在组件间显示水平线还是垂直线。

使用spacing属性，你可以控制spacing的大小。

line 1 by separator

line 2 by separator

line 3 by separatoranother piece

line 4 by separatoranother piece

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

-----------------列表框---------------------------

Listbox有两种模型：default和select。若使用了select，就会产生HTML的SELECT标签。...：带滚动下拉

引用css文件：