CSAプログラミングを簡単にするのに、ZKは利用できるユーティリティオブジェクトを提供しています。
基本ユーティリティはどのオブジェクトにも適用することができます。
|
ファンクション名 |
説明 |
|---|---|
|
action.show(cmp) |
コンポーネントを可視化します。 cmp はコンポーネントで、 #{ EL-expr }を使って識別します。 |
|
action.hide(cmp) |
コンポーネントを不可視化します。 cmp はコンポーネントで、#{ EL-expr }を使って識別します。 |
【ヒント】：JavaScriptプログラマーには、style.displayを直接視覚要素として処理するのは一般的です。
しかし、それはいい方法で はありません。それはZKクライアントエンジンは視覚効果とバグの回避方法などを処理しなければならないからです。代わりにaction.showとaction.hideを使いましょう。
サーバと通信を行うユーティリティです。
|
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>
アニメーションのような視覚効果です。animaはscript.aculo.us [50] によって提供されたEffectクラスに基づいています。APIは単純です。視覚効果を追加する場合、Effectを使用します。
【メモ】:EffectはDIVタグで閉じられたコンポーネントを必要としています。すべてのZULコンポーネントはこの方法で実装されているわけではありません。使えるかどうかわからなかったら、以下のようにdivコンポーネントを重ねましょう。
<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>
また、この制限のない他のライブラリーを読み込めます。
|
ファンクション名 |
説明 |
|---|---|
|
anima.appear(cmp)anima.appear(cmp, dur) |
不透明度を増やす事でコンポーネントを可視化します。 cmp:コンポーネント。#{ EL-expr }を使用して識別します。 dur: 継続期間(単位：ミリ秒)。デフォルトは800。 |
|
anima.slideDown(cmp)anima.slideDown(cmp, dur) |
スライドダウン効果でコンポーネントを可視化します。 cmp:コンポーネント。#{ EL-expr }を使用して、識別します。 dur:継続期間(単位：ミリ秒)。デフォルトは400。 |
|
anima.slideUp(cmp)anima.slideUp(cmp, dur) |
スライドアップ効果でコンポーネントを付加しにします。 cmp:コンポーネント。#{ EL-expr }を使用して、識別します。 dur:継続期間(単位：ミリ秒)。デフォルトは400。 |
|
anima.fade(cmp)anima.fade(cmp, dur) |
フェードアウトによりコンポーネントを不可視化します。 cmp:コンポーネント。#{ EL-expr }を使用して、識別します。 dur:継続期間(単位：ミリ秒)。デフォルトは550。 |
|
anima.puff(cmp)anima.puff(cmp, dur) |
パフアウトによりコンポーネントを不可視化します。 cmp:コンポーネント。#{ EL-expr }を使用して識別します。 dur:継続期間(単位：ミリ秒)。デフォルトは700です。 |
|
anima.dropOut(cmp)anima.dropOut(cmp, dur) |
フェーディングとドロップアウトによりコンポーネントを不可視化します。 cmp:コンポーネント。#{ EL-expr }を使用して識別します。 dur:継続期間(単位：ミリ秒)。デフォルトは700です。 |
例えば、
<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>