From Documentation

(Difference between revisions)
Jump to: navigation, search
m (How to Apply CSA)
m (How to Apply Client-side Actions)
Line 24: Line 24:
<zk>
<zk>
<button label="Show a modal window" onClick="wnd.doModal()"/>
<button label="Show a modal window" onClick="wnd.doModal()"/>
-
<window id="wnd" title="Modal" border="normal"
+
<window id="wnd" title="Modal" border="normal" window="300px"
action="show: slideDown" visible="false">
action="show: slideDown" visible="false">
This is a modal window.
This is a modal window.

Revision as of 07:01, 27 December 2010






Contents


[since 5.0.6]

The client-side action (CSA) is used to control how to perform an action at the client. Typical use is to control the effect of showing or hiding a widget. For example, with CSA, you could use the so-called slide-down effect to display a widget.

It is a generic feature available to HtmlBasedComponent, so you could apply to almost all widgets.

CSA allows the developer to control some actions without JavaScript. If you want to have the full control (and are OK to write some JavaScript code), please refer to ZK Client-side Reference for the complete control of the client-side behavior.

How to Apply Client-side Actions

To apply the client-side action to a widget, you have to assign a value to the action property (HtmlBasedComponent.setAction(String)). The syntax is as follows.

action="action-name1: effect1; action-name2: effect2"

The action name (e.g., action1) has to be one of the predefined names, such as show and hide. The action effect (e.g., effect1) has to be one of the predefined effects, such as slideDown and slideUp.

For example, we could use the slide-down effect to display a window as follows.

<zk>
	<button label="Show a modal window" onClick="wnd.doModal()"/>
	<window id="wnd" title="Modal" border="normal" window="300px"
	 action="show: slideDown" visible="false">
		This is a modal window.
	</window>
</zk>

In additions, you could specify additions options by enclosing it with the parentheses as follows.

<div action="show: slideDown({duration: 1000}); hide: slideUp({duration: 300})">
....
</div>

which specifies the duration of sliding down is 100 milliseconds, and the duration of sliding-up is 300 milliseconds.

Security Note: the options is actually a JavaScript object (i.e., a map, Map), and ZK pass whatever being specified to the client for evaluation. Thus, if you allow the user to specify the effect, you shall encode it first to avoid cross-site scripting.

Predefined Actions

Here is a list of predefined actions.

Name Description
show The show action is used to display a widget (making a widget visible)
hide The hide action is used to hide a widget (making a widget invisible)

Predefined Effects

Here is a list of predefined actions.

Name Description
slideDown Slides down to display this widget (making a wdiget visible).

Options:

  • duration - the number of milliseconds to slide down the widget
slideUp Slides up to hide this widget. (making a widget invisible)

Options:

  • duration - the number of milliseconds to slide up the widget
slideIn Slides in to display this widget (making a wdiget visible).

Options:

  • duration - the number of milliseconds to slide in the widget
slideOut Slides out to hide this widget. (making a widget invisible)

Options:

  • duration - the number of milliseconds to slide out the widget

Custom Effects

For adding your custom effects, please refer to ZK Client-side Reference for details.

Notes for Upgrading from ZK 3

They are both called Client-side Actions, but they are different and you have to rewrite them to make it work under ZK 5:

  1. The action names was changed and the support is limited to show and hide (while ZK 3 supports any onxxx).
  2. The action operation must be the name of one of the methods defined in Actions (while ZK 3 is the JavaScript code).
  3. It is part of HtmlBasedComponent (while ZK 3 is XulElement).

Version History

Last Update : 2010/12/27


Version Date Content
5.0.6 December 2010 Client-side actions were introduced since 5.0.6




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