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 2013-01-16 09:33:38 +0800

dvnharishcse gravatar image dvnharishcse
36

Hi jimmyshiau,

i just need help to clear alert in Clients.wrongValue(fieldName,Labels.getLabel("LabelName"));
actually i am not able to clear the alert when i change radio buttons
i have onChange() on radio button event to navigate one frame and another but i am not able to clear the constraints alerts please do the needful

Thanks in Advance

link publish delete flag offensive edit

answered 2012-12-27 08:31:45 +0800

samchuang gravatar image samchuang
4084 4

@bhagyashree

yes

link publish delete flag offensive edit

answered 2012-10-17 11:08:56 +0800

bhagyashree gravatar image bhagyashree
78

does zk(this) use jquery animation internally?

link publish delete flag offensive edit

answered 2010-01-13 09:56:16 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

1. I see, better go with zk(this) then!
2. ok
3. the window will close, but without the fadeOut effect (at least on GC 4), the fadeIn effect works.

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

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 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-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-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-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
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