To simplify the CSA programming, ZK provides a few utilities objects that you can utilize.
Basic utilities that can be applied to any object.
|
Function |
Description |
|---|---|
|
action.show(cmp) |
Make a component visible. cmp – the component. Use #{EL-expr} to identify it. |
|
action.hide(cmp) |
Make a component invisible. cmp – the component. Use #{EL-expr} to identify it. |
Tip: For JavaScript programmers, it is common to manipulate style.display directly for visibility. However, it is not a good idea. Rather, use action.show and action.hide instead, since ZK Client Engine has to handle visual effects, bug workaround, and so on.
Utilities to communicate with the server.
|
Function |
Description |
|---|---|
|
comm.onClick(cmp, info) |
Sends the onClick event to the server. cmp – the component. Use #{EL-expr} or this to identify it. info – a string or null to provide extra information. It will become the return value of MouseEvent's getArea. |
|
comm.onUser(cmp, ...) |
Sends the onUser event to the server cmp – the component. Use #{EL-expr} or this to identify it. other – you can provide any number of arguments. |
|
comm.onEvent(cmp, evt, ...) |
Sends the specified event to the server cmp – the component. Use #{EL-expr} or this to identify it. evt – the event name, e.g., onUser. other – you can provide any number of arguments. |
For example,
<window title="Test of JavaScript Utilities">
<html onClick='l.value = "onClick "+event.area'
onUser='l.value ="onUser " +org.zkoss.lang.Objects.toString(event.data)'><![CDATA[
<a href="javascript:;" onclick="comm.sendClick(this, 'Hi')">onClick with Hi</a>
<a href="javascript:;" onclick="comm.sendClick(this)">onClick with null</a>
<a href="javascript:;" onclick="comm.sendUser(this)">onUser with null</a>
<a href="javascript:;" onclick="comm.sendUser(this, 'One')">onUser with One</a>
<a href="javascript:;" onclick="comm.sendUser(this, 'One', 'Two')">onUser with [One, Two]</a>
<a href="javascript:;" onclick="comm.sendEvent(this, 'onUser', 'XYZ')">onUser with XYZ</a>
]]></html>
<separator/>
<label id="l"/>
</window>
Animation-like visual effects. It is based on the Effect class provided by script.aculo.us [50] . The API is simplified. If you'd like more visual effects or controls, you can access Effect directly.
Note: Effect requires the component to be enclosed with the DIV tag. Not all ZUL components are implemented in this way. If you have any doubt, you can nest it with the div component as follows.
<window>
<div id="t" visible="false"
action="onshow: anima.slideDown(#{self}); onhide: anima.slideUp(#{self})">
<div><!-- the 2nd div is optional but sometimes it looks better with it -->
<groupbox>
<caption label="slide down"/>
Hi <textbox/>
</groupbox>
When? <datebox/>
</div>
</div>
<button label="toggle" onClick="t.visible = !t.visible"/>
</window>
Of course, you load other libraries that do not have this limitation.
|
Function |
Description |
|---|---|
|
anima.appear(cmp)anima.appear(cmp, dur) |
Make a component visible by increasing the opacity. cmp – the component. Use #{EL-expr} to identify it. dur – the duration in milliseconds. Default: 800. |
|
anima.slideDown(cmp)anima.slideDown(cmp, dur) |
Make a component visible with the slide-down effect. cmp – the component. Use #{EL-expr} to identify it. dur – the duration in milliseconds. Default: 400. |
|
anima.slideUp(cmp)anima.slideUp(cmp, dur) |
Make a component invisible with the slide-up effect. cmp – the component. Use #{EL-expr} to identify it. dur – the duration in milliseconds. Default: 400. |
|
anima.fade(cmp)anima.fade(cmp, dur) |
Make a component invisible by fading it out. cmp – the component. Use #{EL-expr} to identify it. dur – the duration in milliseconds. Default: 550. |
|
anima.puff(cmp)anima.puff(cmp, dur) |
Make a component invisible by puffing it out. cmp – the component. Use #{EL-expr} to identify it. dur – the duration in milliseconds. Default: 700. |
|
anima.dropOut(cmp)anima.dropOut(cmp, dur) |
Make a component invisible by fading and dropping it out. cmp – the component. Use #{EL-expr} to identify it. dur – the duration in milliseconds. Default: 700. |
For example,
<window title="Animation Effects">
<style>
.ctl{
border: 1pxoutset#777; background:#ddeecc;
margin: 2px;margin-right:10px;padding-left: 2px; padding-right: 2px;
}
</style>
<labelvalue="Slide" sclass="ctl" action="onmouseover:anima.slideDown(#{t});onmouseout:anima.slideUp(#{t})"/>
<labelvalue="Fade" sclass="ctl" action="onmouseover:anima.appear(#{t});onmouseout:anima.fade(#{t})"/>
<labelvalue="Puff" sclass="ctl" action="onmouseover:anima.appear(#{t});onmouseout:anima.puff(#{t})"/>
<labelvalue="Drop Out"sclass="ctl" action="onmouseover:anima.appear(#{t});onmouseout:anima.dropOut(#{t})"/>
<div id="t"visible="false">
<div>
<groupbox>
<captionlabel="Dynamic Content"/>
Content to show and hide dynamically.
<datebox/>
</groupbox>
Description<textbox/>
</div>
</div>
</window>