Keystroke Handling"

From Documentation
Line 19: Line 19:
 
</source>
 
</source>
  
 +
Then, you could implement [[ZK Developer's Reference/MVC/Controller/Composer|a composer]] as follows.
 +
 +
<source lang="java">
 +
package foo;
 +
import org.zkoss.zul.*;
 +
public class Login extends org.zkoss.zk.ui.util.GenericForwardComposer {
 +
    Textbox username;
 +
    Textbox password;
 +
    public void onOK() {
 +
        //handle login
 +
    }
 +
    public void onCancel() {
 +
        username.setValue("");
 +
        password.setValue("");
 +
    }
 +
}
 +
</source>
 +
 +
Notice that the <tt>onOK</tt> and <tt>onCancel</tt> events are sent to the nearest ancestor of the component that has the focus. In other words, if you press ENTER in a textbox, then ZK will look up the textbox, its parent, its parent's parent and so on to see if any of them has been registered a listener for <tt>onOK</tt>. If found, the event is sent to it. If not found, nothing happens.
 +
 +
Also notice that, if a button gains the focus, ENTER will be intercepted by the browser and interpreted as pressed. For example, if you move the focus to the Reset button and press ENTER, you will receive <tt>onCancel</tt> rather than <tt>onOK</tt> (since <tt>onClick</tt> will be fired and it is converted to <tt>onCancel</tt> because of [[ZUML Reference/ZUML/Attributes/forward|the forward attribute]] specified).
 
=Control Keys=
 
=Control Keys=
 
=Version History=
 
=Version History=

Revision as of 08:48, 21 December 2010


Keystroke Handling


Keystroke handling is generic. Any component inherited from XulElement can handle the key event in the same way.

ENTER and ESC

To handle ENTER, you could listen to the onOK event (notice O and K are both in upper case). To handle ESC, you could listen to the onCancel event. For example,

<grid id="form" apply="foo.Login">
    <rows>
        <row>Username: <textbox id="username"/></row>
        <row>Password: <textbox id="password" type="password"/></row>
        <row><button label="Login" forward="form.onOK"/><button label="Reset" forward="form.onCancel"/></row>
    </rows>
</grid>

Then, you could implement a composer as follows.

package foo;
import org.zkoss.zul.*;
public class Login extends org.zkoss.zk.ui.util.GenericForwardComposer {
    Textbox username;
    Textbox password;
    public void onOK() {
        //handle login
    }
    public void onCancel() {
        username.setValue("");
        password.setValue("");
    }
}

Notice that the onOK and onCancel events are sent to the nearest ancestor of the component that has the focus. In other words, if you press ENTER in a textbox, then ZK will look up the textbox, its parent, its parent's parent and so on to see if any of them has been registered a listener for onOK. If found, the event is sent to it. If not found, nothing happens.

Also notice that, if a button gains the focus, ENTER will be intercepted by the browser and interpreted as pressed. For example, if you move the focus to the Reset button and press ENTER, you will receive onCancel rather than onOK (since onClick will be fired and it is converted to onCancel because of the forward attribute specified).

Control Keys

Version History

Last Update : 2010/12/21


Version Date Content
     


Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.