0

ZK 5 client events

asked 2009-11-29 22:16:01 +0800

caclark gravatar image 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 flag offensive retag edit

14 Replies

Sort by » oldest newest

answered 2010-01-09 11:45:06 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

Hi caclark,

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

thanks
Madruga

link publish delete flag offensive edit

answered 2010-01-09 13:24:34 +0800

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

Unfortunately, no.

link publish delete flag offensive edit

answered 2010-01-10 19:40:40 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
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

link publish delete flag offensive edit

answered 2010-01-10 20:59:01 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

you can refer to here and here

and this is my sample

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

link publish delete flag offensive edit

answered 2010-01-10 22:19:23 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
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"/>
        <window id="wnd" title="test" visible="false" w:onshow='alert("showing myself")' w:onhide='alert("hiding myself")'/>
</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!
Madruga

link publish delete flag offensive edit

answered 2010-01-11 07:39:33 +0800

caclark gravatar image 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.

link publish delete flag offensive edit

answered 2010-01-11 22:39:11 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

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>

link publish delete flag offensive edit

answered 2010-01-12 07:24:14 +0800

caclark gravatar image 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>

link publish delete flag offensive edit

answered 2010-01-12 11:02:46 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

updated 2010-01-12 11:05:38 +0800

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" 
                w:onShow='jq(this).hide().fadeIn();' 
                w:onHide='jq(this).show().fadeOut();'/>
</zk>

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

link publish delete flag offensive edit

answered 2010-01-12 19:23:58 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

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

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 try your sample in zkdemo, it works well, Do you mean the window will not close ?

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2009-11-29 22:16:01 +0800

Seen: 2,555 times

Last updated: May 27 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More