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.
Animation-like visual effects. It is based on the Effect class provided by script.aculo.us [49] . 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>