# ZK 5 client events

caclark
1753 2 5
http://clarktrips.intltwi...

Since the animation API has been removed, I need to migrate a small piece of code to use the new JQuery based animation. Using the old action attribute and anima object, I could do this [action="onshow: anima.moveDown(#{win}, 2000)"] for a window. It would move the window down fine.

My problem is that I can't seem to find a ZK 5 equivalent event, so this doesn't work:

    ...
<attribute w:name="onShow">
log( "::onShow:  showing window" ) ;  // calls Firebug's console.info(...) safely
</attribute>
...


I've tried onShow, onLoad, onCreate, onOpen, and onInit but none of them seem to fire when the window is created...

Is there a published list of events that I can hook on the client side?

Thanks,

delete retag edit

## 14 Replies

937 2 12

Hi caclark,

I'm facing the exact same issue now.
Did you find the solution?

thanks

caclark
1753 2 5
http://clarktrips.intltwi...

Unfortunately, no.

937 2 12

Hum...

So, could any zk guru please give a light on this issue?

This effects combined produces a great eye candy web, so it's kind of important to us (we use it all over...)

Thanks

jimmyshiau
4921 5
http://www.zkoss.org/

you can refer to here and here

and this is my sample

<zk>
<script type="text/javascript"><![CDATA[
function show() {
}
]]></script>
<window xmlns:w="http://www.zkoss.org/2005/zk/client"
w:onshow='show()'>
</window>
</zk>


937 2 12

Hi Jimmy,

I've tried your sample on zk live demo, and it shows the orange box "show not defined". Not sure if it is a typo, or a bug, I've just started to play with this client side mechanism.

Now, i'm starting to understand this, and obviously I'm not...

In the below sample, I expected that the alert messages appers when I click on the show/hide buttons. But both messages appers when the page is rendered, and the buttons only show/hide the window, but no alert messages. Could you please tell me what is that I'm doing wrong?

<zk xmlns:w="http://www.zkoss.org/2005/zk/client" >
<button label="show" onClick="wnd.visible = true"/>
<button label="hide" onClick="wnd.visible = false"/>
</zk>


PS1: After getting this right I'll move onto the anima issue and bother you a litle more =]
PS2: w:onshow is different from w:onShow, is this correct?

Thank you very much for you help!

caclark
1753 2 5
http://clarktrips.intltwi...

Jimmy, I referred to those pages before I made my original post. From them, we get 3 events from example code: onFocus, onBlur, onClick. Your "onshow" example is completely lower case whereas these 3 are mixed. So, I have 2 questions:
1) are the client side event names case sensitive, and
2) From my original post: Is there a published list of events that I can hook on the client side? A comprehensive one, as opposed to having to glean a few here and there from code examples....I poked around on the jQuery site for a bit but did not find a list there, either. Maybe I just didn't look in the right place.

jimmyshiau
4921 5
http://www.zkoss.org/

We will release a freshly version in the near future
it will works like this

<zk xmlns:w="http://www.zkoss.org/2005/zk/client" >
<button label="show" onClick="wnd.visible = true"/>
<button label="hide" onClick="wnd.visible = false"/>
<window id="wnd" title="test" visible="false"
w:onShow='zk(this).slideDown(this);'
w:onHide='zk(this).slideUp(this);'/>
</zk>


caclark
1753 2 5
http://clarktrips.intltwi...

<zk xmlns:w="http://www.zkoss.org/2005/zk/client" >
<button label="show" onClick="wnd.visible = true"/>
<button label="hide" onClick="wnd.visible = false"/>
<window id="wnd" title="test" visible="false"
w:onShow='zk(this).slideDown(this);'
w:onHide='zk(this).slideUp(this);'/>
</zk>


That would be great. Will it also support the long version:

<zk xmlns:w="http://www.zkoss.org/2005/zk/client" >
<button label="show" onClick="wnd.visible = true"/>
<button label="hide" onClick="wnd.visible = false"/>
<window id="wnd" title="test" visible="false">
<attribute w:name="onShow">
zk(this).slideDown(this) ;
</attribute>
<attribute w:name="onHide">
zk(this).slideUp(this)  ;
</attribute>
</window>
</zk>


patterned after the example in http://docs.zkoss.org/wiki/ZK_5.0_and_jQuery

  Defining a client side event

The easiest way to define a client side event is to utilize the namespace and utilize attribute tags to encase the javascript code.
The following is an extract from our example, please notice that name=”onClick” is prefixed with the declared namespace in
the form :name=””.

<attribute w:name="onClick">
//javascript code goes here
</attribute>


937 2 12

Hi Jimmy, thanks for the help, but I stil have a few questions, I'll be glad if you could help!

1. What is the difference of zk(this).slideDown(this) with jq(this).hide().fadeIn()? I mean, does zk(this) is a short cut for jquery, or is something totally different?
2. As Clark asked, is there a list of the animations that we could use in zk(this)/jq(this)...?
3. I've downloaded the latest FL, your sample works great, but I'm looking for the fadeIn and fadeOut effect instead of the slide. So I tried just changed slide with fade and didn't work. So I've attempted with the jquery example, and the strange thing is that the onShow works, but the onHide don't (don't know if is an zk or jquery issue). Here is my sample:

<zk xmlns:w="http://www.zkoss.org/2005/zk/client" >
<button label="show" onClick="wnd.visible = true"/>
<button label="hide" onClick="wnd.visible = false"/>
<window id="wnd" title="test" visible="false"
</zk>


Thank you for the help, and sorry for all these questions..

jimmyshiau
4921 5
http://www.zkoss.org/

1. What is the difference of zk(this).slideDown(this) with jq(this).hide().fadeIn()? I mean, does zk(this) is a short cut for jquery, or is something totally different?

call the zk(this).slideDown(this) will make some process such as onSize, onShow for sync the size
but jq(this).hide().fadeIn() just the jquery function, it will not call onShow to sync the size

2. As Clark asked, is there a list of the animations that we could use in zk(this)/jq(this)...?

We are building the jsdoc, you can find it in API Reference in the near future

I try your sample in zkdemo, it works well, Do you mean the window will not close ?

[hide preview]