From Documentation

(Difference between revisions)
Jump to: navigation, search
m (Use Cases)
Line 89: Line 89:
| 5.0
| 5.0
| Overview and Tutorial
| Overview and Tutorial
-
| http://docs.zkoss.org/wiki/Client_Side_Programming
+
|[[Small_Talks/2010/April/Client_Side_Programming |Client Side Programming]]
http://docs.zkoss.org/wiki/ZK5:_Client_Computing_with_ZUML
http://docs.zkoss.org/wiki/ZK5:_Client_Computing_with_ZUML
|}
|}

Revision as of 07:55, 14 December 2010





Contents

Script

Employment/Purpose

The script component is used to specify the script codes running at the browser. Notice that, unlike zscript, the script codes are running at the browser. They are usually written in JavaScript which is supported by the most of browsers. The simplest format is as follows.

Alternatives

Instead of using the script component, you could use the script directive instead. It does not support defer, but it is more efficient since no component is created.

<?script src="~./js/zk.debug.wpd"?>
<?script content="jq.IE6_ALPHAFIX='.png';"?>

where the first statement loads the debug utility and the second generates JavaScript code snippet directly.

Another alternative is HTML SCRIPT. For example, we could define global variables and functions as follows

<script xmlns:n="native"><!-- use the native namespace -->
	var a_global_variable;
	function a_global_function () {
		alert("native script");
	}
	alert("you can not access this as widget but evaluated immediately");
</script>

Example

ZKComRef Script Example.png

 <zk>
	<window id="win">
		<button label="change color" onClick='Clients.evalJavaScript("myfunc()")' />
	</window>
	<script type="text/javascript">
		function myfunc() {
		    jq("$win").css("backgroundColor", "blue");
		}
 </script>
</zk>

Defer the Evaluation

By default, the specified JavaScript code will be evaluated as soon as the page is loaded. There is an attribute called defer. By specifying true, the JavaScript code won't be evaluated until all widgets are created and bound to the DOM tree.

<textbox id="inp"/>
<script defer="true">
   this.$f("inp").setValue("initialized");
</script>

The defer attribute can be used with a JavaScript file as shown below. Then, the JavaScript file will be loaded after all widgets are created and bound to the DOM tree.

<script src="/js/foo.js" defer="true"/>

Supported Events

Name
Event Type
None None

Supported Children

*NONE

Use Cases

Version Description Example Location
5.0 Overview and Tutorial Client Side Programming

http://docs.zkoss.org/wiki/ZK5:_Client_Computing_with_ZUML

Version History

Last Update : 2010/12/14


Version Date Content
     




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