`
2277259257
  • 浏览: 520062 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

ZK----框架常用资料

 
阅读更多

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

特殊字符替换
< 用 &lt;来替换
> 用 &gt;来替换
& 用 &amp;来替换
“ 用 &quot;来替换
‘ 用 &apos;来替换

<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”>

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

2、如果你有一个存放对象集合的变量,则可以直接为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 指令:
<?import uri=”/template/taglibs.zul” directives=”taglib, xel-method”?>

—————-

link 指令:
<?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 + &quot;, &quot; +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();”/>

分享到:
评论

相关推荐

    zk入门.web框架

    本篇文章将深入探讨ZK框架的基本概念、开发环境的搭建以及一些核心功能的使用。 **一、ZK插件安装** ZK的开发工具主要包括ZK Studio和ZK Package。ZK Studio是一个集成开发环境,可以作为Eclipse或Myeclipse的插件...

    zk-dubbo-boot.zip

    描述中提到的“demo——springboot整合dubbo+zk”进一步确认了这个项目是一个演示如何在SpringBoot应用中整合Dubbo服务治理框架与Zookeeper作为注册中心的实例。接下来,我将详细讲解这三个技术以及它们之间的整合。...

    ZK框架的一些事件促发介绍

    ZK框架也支持MVC(Model-View-Controller)设计模式,这是一种常用的软件架构模式,它将应用程序分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。 - **模型(Model)**:负责管理应用程序的数据,...

    zk组件详解

    label.setValue("欢迎使用ZK框架!"); ``` ##### LabelImageElement 结合了LabelElement和Image的功能,可以在同一组件中同时显示文本和图片。 - **示例代码**: ```java // 创建一个LabelImageElement实例 ...

    zk-new-code-java-python

    标题“zk-new-code-java-python”暗示了这是一个关于Zookeeper(ZK)的项目,其中包含使用Java和Python语言编写的代码。Zookeeper是一个分布式的,开放源码的协调服务,用于分布式应用程序,提供了命名服务、配置...

    zk框架简单的小实例

    ### ZK框架简介与开发指南 #### 一、引言 ZK框架是Potix公司开发的一款用于构建高性能Web应用程序的开源Java框架。它通过一套丰富的组件库和强大的事件驱动模型,使得开发者能够轻松地创建出高度交互性的用户界面...

    spring+springmvc+jpa(hibernate)框架整合

    Spring、SpringMVC和JPA(Hibernate)是Java开发中常用的三大框架,它们共同构建了一个高效、灵活的企业级应用架构。下面将详细讲解这三大框架的整合及其在实际项目中的运用。 Spring框架是Java企业级应用的核心...

    zk 插件(包括需要使用的包)

    ZK框架以其事件驱动的模型和组件模型,使得创建富互联网应用程序(RIA)变得更为简便。Eclipse是一款强大的集成开发环境(IDE),广泛用于Java应用的开发,而ZK插件则是为了在Eclipse中更方便地进行ZK应用的开发和...

    ZK Scope 常用方法与结果

    总结来说,ZK Scope是ZK框架中管理组件状态和数据的关键机制,而其常用方法和隐式对象则为开发者提供了强大且灵活的工具,帮助他们更高效地构建动态Web应用。理解并熟练掌握这些概念和方法,对于提升ZK应用的开发...

    ZK 6.5 Essentials

    ### ZK 6.5 Essentials:深入理解ZK框架的核心技术与实践 #### 引言:ZK的服务器客户端融合架构 ZK是一款强大的、基于Java的无脚本富互联网应用(RIA)开发框架,其核心特性是服务器客户端融合架构(Server-client...

    eclipse中ZK环境的搭建配置

    4. **ZK Library**:这是ZK框架的核心库文件,可以从ZK官方网站下载。 5. **ZK Studio**:一款专门为ZK设计的集成开发环境(IDE),可以帮助开发者更高效地进行开发工作。 #### 三、安装步骤 ##### 3.1 安装Java运行...

    淘宝分布式调度框架TBSchedule

    淘宝分布式调度框架TBSchedule是淘宝的一块开源软件,TBSchedule有很多特性,包括批量任务,多主机,多线程,动态扩展,实时或定时任务,分片,并发,不重复执行。TBSchedule依赖于ZK存储调度数据,在使用中充当着...

    ZK文档开发

    根据给定的信息,“ZK文档开发”主要涉及的是ZK框架下的开发技术。ZK是一款用于构建企业级Web应用程序的强大工具包,它提供了一种基于组件的开发模式,支持多种前端技术(如HTML、CSS、JavaScript等)以及后端集成...

    ZK+Spring+Hibernate项目搭建

    **ZK框架**: ZK是一个基于组件的Java AJAX框架,专门用于构建富客户端用户界面。它简化了创建交互式Web应用的过程,无需深入学习JavaScript或浏览器兼容性问题。ZK的核心特性包括事件驱动、服务器端渲染和组件模型...

    ZK开发指南

    MVC是一种常用的设计模式,ZK框架也支持这种模式。 - **控制器**:用于处理用户输入并更新模型。 - **视图**:展示数据给用户。 - **模型**:存储应用程序的数据。 #### 九、MVVM(Model-View-ViewModel) MVVM是...

    zk 数据绑定(grid进行嵌套显示数据)

    ZK框架是一款基于Java的富客户端用户界面框架,专门用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括Grid组件,使得开发者可以方便地在Web应用中展示和操作数据。在ZK中,数据绑定是连接应用程序模型与...

    ZK开发者手册.pdf

    ZK 是一款高性能的 AJAX Web 框架,由 Potix Corporation 开发。它允许开发者构建丰富的互联网应用程序(RIA),并支持 Java 和其他后端语言。ZK 的核心优势在于其能够自动处理 AJAX 的细节,使得开发者可以更加专注...

    ZK+学习总结第一阶段参考.pdf

    ZK是一个开源的轻量级Java框架,专为构建富客户端用户界面而设计。它提供了丰富的组件库,简化了Web应用的开发,并且强调了零脚本的编程模型,使得开发者能够更专注于业务逻辑,而不是复杂的前端交互。 ### 1. 了解...

    Java开源 AJAX框架

    11. **ZK**:ZK框架设计的Web应用使用组件模型,允许开发者构建高度互动的用户界面,且内部集成了AJAX技术,提供高效且易于使用的开发体验。 以上这些框架各有特点,适用于不同的开发需求和场景。选择合适的框架取...

Global site tag (gtag.js) - Google Analytics