Script"
From Documentation
| (22 intermediate revisions by 6 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 = | ||
| Line 14: | Line 14: | ||
[[Image:ZKComRef_Script_Example.png ]] | [[Image:ZKComRef_Script_Example.png ]] | ||
| − | < | + | <syntaxhighlight lang="xml" > |
| − | + | <window id="win"> | |
| − | + | <button label="change color" onClick='Clients.evalJavaScript("myfunc()")' /> | |
| − | + | </window> | |
| − | + | <script type="text/javascript"> | |
| − | + | function myfunc() { | |
| − | + | jq("$win").css("backgroundColor", "blue"); | |
| − | + | } | |
| − | |||
</script> | </script> | ||
| − | </ | + | </syntaxhighlight> |
| − | |||
| − | =Defer the | + | =Defer the Evaluation= |
| − | By default, the specified JavaScript code will be evaluated as soon as the page is loaded | + | By default, the specified JavaScript code will be evaluated as soon as the page is loaded. By specifying <code>defer="true"</code>, the JavaScript code won't be evaluated until all ZK widgets are created and bound to the DOM tree. |
| − | < | + | <syntaxhighlight lang="xml"> |
<textbox id="inp"/> | <textbox id="inp"/> | ||
<script defer="true"> | <script defer="true"> | ||
this.$f("inp").setValue("initialized"); | this.$f("inp").setValue("initialized"); | ||
</script> | </script> | ||
| − | </ | + | </syntaxhighlight> |
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. | 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. | ||
| − | < | + | <syntaxhighlight lang="xml"> |
<script src="/js/foo.js" defer="true"/> | <script src="/js/foo.js" defer="true"/> | ||
| − | </ | + | </syntaxhighlight> |
| + | |||
| + | This is required if the script to load intends to manipulate a ZK widget's DOM elements. <code>defer="true"</code> can ensure that all widgets' DOM elements are already generated. | ||
| + | |||
| + | =Alternatives= | ||
| + | |||
| + | == Load Javascript in head tag - script directive== | ||
| + | Instead of using this component, you can use [[ZUML_Reference/ZUML/Processing_Instructions/script|the script directive]] instead. It does not support <code>defer</code>, but it consumes no memory since no component is created. And it generated <code><script></code> in HTML <code><head></code>, so the specified script will be loaded earlier than body DOM is created. | ||
| + | |||
| + | <source lang="xml"> | ||
| + | <?script src="~./js/zk.debug.wpd"?> | ||
| + | <?script content="jq.IE6_ALPHAFIX='.png';"?> | ||
| + | </source> | ||
| + | * Line 1: loads the debug utility | ||
| + | * Line 2: generates a JavaScript code snippet directly. | ||
| + | |||
| + | |||
| + | ==HTML script tag == | ||
| + | Another alternative is the HTML SCRIPT tag. For example, we can 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> | ||
| − | + | =Supported Events= | |
| − | + | ||
| − | + | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/AbstractComponent#Supported_Events | AbstractComponent]] | |
| − | |||
| − | |||
| − | |||
| − | | | ||
=Supported Children= | =Supported Children= | ||
| Line 58: | Line 78: | ||
*NONE | *NONE | ||
| − | =Use | + | =Use Cases= |
| − | {| | + | {| class='wikitable' | 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]] | ||
|} | |} | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} | ||
Latest revision as of 10:17, 25 April 2024
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
<window id="win">
<button label="change color" onClick='Clients.evalJavaScript("myfunc()")' />
</window>
<script type="text/javascript">
function myfunc() {
jq("$win").css("backgroundColor", "blue");
}
</script>
Defer the Evaluation
By default, the specified JavaScript code will be evaluated as soon as the page is loaded. By specifying defer="true", the JavaScript code won't be evaluated until all ZK 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"/>
This is required if the script to load intends to manipulate a ZK widget's DOM elements. defer="true" can ensure that all widgets' DOM elements are already generated.
Alternatives
Load Javascript in head tag - script directive
Instead of using this component, you can use the script directive instead. It does not support defer, but it consumes no memory since no component is created. And it generated <script> in HTML <head>, so the specified script will be loaded earlier than body DOM is created.
<?script src="~./js/zk.debug.wpd"?>
<?script content="jq.IE6_ALPHAFIX='.png';"?>
- Line 1: loads the debug utility
- Line 2: generates a JavaScript code snippet directly.
HTML script tag
Another alternative is the HTML SCRIPT tag. For example, we can 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>
Supported Events
- Inherited Supported Events: AbstractComponent
Supported Children
*NONE
Use Cases
| Version | Description | Example Location |
|---|---|---|
| 5.0 | Overview and Tutorial | Client Side Programming |