Script"
Tmillsclare (talk | contribs) |
Robertwenzel (talk | contribs) |
||
(15 intermediate revisions by 4 users not shown) | |||
Line 2: | Line 2: | ||
= Script = | = Script = | ||
− | *Demonstration: | + | *Demonstration: [http://www.zkoss.org/zkdemo/effects/upload_effect Script] |
*Java API: <javadoc>org.zkoss.zul.Script</javadoc> | *Java API: <javadoc>org.zkoss.zul.Script</javadoc> | ||
*JavaScript API: <javadoc directory="jsdoc">zul.utl.Script</javadoc> | *JavaScript API: <javadoc directory="jsdoc">zul.utl.Script</javadoc> | ||
+ | *Style Guide: N/A | ||
= Employment/Purpose = | = 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. | + | 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. |
− | + | == Example == | |
− | = Example = | ||
[[Image:ZKComRef_Script_Example.png ]] | [[Image:ZKComRef_Script_Example.png ]] | ||
− | < | + | <syntax lang="xml" > |
<zk> | <zk> | ||
<window id="win"> | <window id="win"> | ||
Line 21: | Line 21: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
function myfunc() { | function myfunc() { | ||
− | + | jq("$win").css("backgroundColor", "blue"); | |
} | } | ||
</script> | </script> | ||
</zk> | </zk> | ||
+ | </syntax> | ||
+ | |||
+ | ==Alternatives== | ||
+ | |||
+ | Instead of using the script component, you could use [[ZUML_Reference/ZUML/Processing_Instructions/script|the script directive]] instead. It does not support defer, but it is more efficient since no component is created. | ||
+ | |||
+ | <source lang="xml"> | ||
+ | <?script src="~./js/zk.debug.wpd"?> | ||
+ | <?script content="jq.IE6_ALPHAFIX='.png';"?> | ||
+ | </source> | ||
+ | |||
+ | 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 | ||
+ | |||
+ | <source lang="xml"> | ||
+ | <n: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"); | ||
+ | </n:script> | ||
</source> | </source> | ||
− | =Supported | + | =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. | ||
+ | |||
+ | <syntax lang="xml"> | ||
+ | <textbox id="inp"/> | ||
+ | <script defer="true"> | ||
+ | this.$f("inp").setValue("initialized"); | ||
+ | </script> | ||
+ | </syntax> | ||
+ | |||
+ | 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. | ||
+ | |||
+ | <syntax lang="xml"> | ||
+ | <script src="/js/foo.js" defer="true"/> | ||
+ | </syntax> | ||
+ | |||
+ | =Supported Events= | ||
{| border="1" | width="100%" | {| border="1" | width="100%" | ||
Line 36: | Line 76: | ||
| None | | None | ||
|} | |} | ||
+ | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/AbstractComponent#Supported_Events | AbstractComponent]] | ||
=Supported Children= | =Supported Children= | ||
Line 41: | Line 82: | ||
*NONE | *NONE | ||
− | =Use | + | =Use Cases= |
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
! Version !! Description !! Example Location | ! Version !! Description !! Example Location | ||
|- | |- | ||
− | | | + | | 5.0 |
− | | | + | | Overview and Tutorial |
− | | | + | |[[Small_Talks/2010/April/Client_Side_Programming |Client Side Programming]] |
+ | [[ZK_Client-side_Reference/General_Control|ZK Client-side Reference: General Control]] | ||
|} | |} | ||
=Version History= | =Version History= | ||
− | + | {{LastUpdated}} | |
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
! Version !! Date !! Content | ! Version !! Date !! Content |
Revision as of 03:58, 19 November 2014
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.
Example
<syntax lang="xml" >
<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> </syntax>
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
<n: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");
</n:script>
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.
<syntax lang="xml"> <textbox id="inp"/> <script defer="true">
this.$f("inp").setValue("initialized");
</script> </syntax>
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.
<syntax lang="xml"> <script src="/js/foo.js" defer="true"/> </syntax>
Supported Events
None | None |
- Inherited Supported Events: AbstractComponent
Supported Children
*NONE
Use Cases
Version | Description | Example Location |
---|---|---|
5.0 | Overview and Tutorial | Client Side Programming |
Version History
Version | Date | Content |
---|---|---|