JavaScript Packaging"
(Created page with '{{ZKDevelopersReferencePageHeader}} =Version History= {{LastUpdated}} {| border='1px' | width="100%" ! Version !! Date !! Content |- | | | |} {{ZKDeveloper…') |
m |
||
| Line 1: | Line 1: | ||
{{ZKDevelopersReferencePageHeader}} | {{ZKDevelopersReferencePageHeader}} | ||
| + | |||
| + | __TOC__ | ||
| + | |||
| + | If you'd like to customize the client-side behavior<ref>It is optional and you could refer to [[ZK Developer's Reference/UI Composing/Client-side UI Composing|Client-side UI Composing]] and [[ZK Developer's Reference/Event Handling/Client-side Event Listening|Client-side Event Listening]] for more information.</ref>, it will end up with some JavaScript code. The can be packaged in several ways depending on the size and re-usability. | ||
| + | |||
| + | =Embed the JavaScript Code Directly= | ||
| + | Use [[ZUML Reference/ZUML/Processing Instructions/script|the script directive]] to embed the code directly. For example, | ||
| + | |||
| + | <source lang="xml"> | ||
| + | <!-- foo.zul --> | ||
| + | <?script type="text/javascript" content="jq.IE6_ALPHAFIX='.png';"?> | ||
| + | </source> | ||
| + | |||
| + | Alternatively, you could use [[ZK Component Reference/Essential Components/Script|the script component]] to embed the code. | ||
| + | |||
| + | =Put in a Separate File and Reference it in the ZUML page= | ||
| + | If there are a lot of JavaScript code, it is better to package them in a separate file, and then use [[ZUML Reference/ZUML/Processing Instructions/script|the script directive]] to reference the file in every ZUML page that requires it. | ||
| + | |||
| + | <source lang="xml"> | ||
| + | <!-- foo.zul --> | ||
| + | <?script type="text/javascript" src="/myjs/foo.js"?> | ||
| + | </source> | ||
| + | |||
| + | =Put in a Separate File and Reference it in Language Addon= | ||
| + | If the JavaScript code will be used in every ZUML pages, it is better to package them in a separate file, and then make it part of the [[ZUML Reference/ZUML/Languages|the language definition]]. To make it part of the language definition, you could specify the following content in [[ZK Developer's Reference/Language Definition|the language addon]], say, <tt>WEB-INF/lang-addon.xml</tt>: | ||
| + | |||
| + | <source lang="xml"> | ||
| + | <language-addon> | ||
| + | <javascript src="/myjs/foo.js"/> | ||
| + | </language-addon> | ||
| + | </source> | ||
| + | |||
| + | Then, you could specify the language addon in <tt>WEB-INF/zk.xml</tt>: | ||
| + | |||
| + | <source lang="xml"> | ||
| + | <language-config> | ||
| + | <addon-uri>/WEB-INF/lang-addon.xml</addon-uri> | ||
| + | </language-config> | ||
| + | </source> | ||
| + | |||
| + | <blockquote> | ||
| + | ---- | ||
| + | <references/> | ||
| + | </blockquote> | ||
=Version History= | =Version History= | ||
Revision as of 10:06, 30 November 2010
If you'd like to customize the client-side behavior[1], it will end up with some JavaScript code. The can be packaged in several ways depending on the size and re-usability.
Embed the JavaScript Code Directly
Use the script directive to embed the code directly. For example,
<!-- foo.zul -->
<?script type="text/javascript" content="jq.IE6_ALPHAFIX='.png';"?>
Alternatively, you could use the script component to embed the code.
Put in a Separate File and Reference it in the ZUML page
If there are a lot of JavaScript code, it is better to package them in a separate file, and then use the script directive to reference the file in every ZUML page that requires it.
<!-- foo.zul -->
<?script type="text/javascript" src="/myjs/foo.js"?>
Put in a Separate File and Reference it in Language Addon
If the JavaScript code will be used in every ZUML pages, it is better to package them in a separate file, and then make it part of the the language definition. To make it part of the language definition, you could specify the following content in the language addon, say, WEB-INF/lang-addon.xml:
<language-addon>
<javascript src="/myjs/foo.js"/>
</language-addon>
Then, you could specify the language addon in WEB-INF/zk.xml:
<language-config>
<addon-uri>/WEB-INF/lang-addon.xml</addon-uri>
</language-config>
- ↑ It is optional and you could refer to Client-side UI Composing and Client-side Event Listening for more information.
Version History
| Version | Date | Content |
|---|---|---|