JavaScript Packaging"

From Documentation
(Created page with '{{ZKDevelopersReferencePageHeader}} =Version History= {{LastUpdated}} {| border='1px' | width="100%" ! Version !! Date !! Content |- |   |   |   |} {{ZKDeveloper…')
 
m (correct highlight (via JWB))
 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{ZKDevelopersReferencePageHeader}}
+
{{ZKClient-sideReferencePageHeader}}
 +
 
 +
__TOC__
 +
 
 +
If you'd like to customize the client-side behavior, it will end up with some JavaScript code. The code can be packaged in several  ways depending on the size and re-usability.
 +
 
 +
It is recommended to take a look at the [[ZK_Client-side_Reference/Introduction/Object_Oriented_Programming_in_JavaScript|Object-Oriented Programming in JavaScript]] section, if you are not familiar how ZK extends JavaScript to support the concept of packages and classes.
 +
 
 +
=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 page, 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 Client-side Reference/Language Definition|the language addon]], say, <code>WEB-INF/lang-addon.xml</code>:
 +
 
 +
<source lang="xml">
 +
<language-addon>
 +
    <addon-name>my.extension</addon-name><!-- any name you like -->
 +
    <javascript src="/myjs/foo.js"/> <!-- assume you package it as /myjs/foo.js -->
 +
</language-addon>
 +
</source>
 +
 
 +
Then, you could specify the language addon in <code>WEB-INF/zk.xml</code>:
 +
 
 +
<source lang="xml">
 +
<language-config>
 +
    <addon-uri>/WEB-INF/lang-addon.xml</addon-uri>
 +
</language-config>
 +
</source>
 +
 
 +
=Make It a WPD File for More Control=
 +
Technically, you could do whatever you want with a JavaScript file. However, if you prefer to make it a JavaScript package, such that they will be loaded automatically when required, you could package them as [[ZK Client-side Reference/Widget Package Descriptor|a WPD file]].
 +
 
 +
For example, you could have a WPD file and make it loaded with the zk package (so [[ZK Developer's Reference/Performance Tips/Minimize Number of JavaScript Files to Load|it speeds up the loading]]).
 +
 
 +
<source lang="xml">
 +
<language-addon>
 +
    <addon-name>my.extension</addon-name><!-- any name you like -->
 +
    <javascript package="my.foo" merge="true"/> <!-- assume you call it my.foo -->
 +
</language-addon>
 +
</source>
  
 
=Version History=
 
=Version History=
Line 11: Line 65:
 
|}
 
|}
  
{{ZKDevelopersReferencePageFooter}}
+
{{ZKClient-sideReferencePageFooter}}

Latest revision as of 03:23, 18 January 2022


JavaScript Packaging



If you'd like to customize the client-side behavior, it will end up with some JavaScript code. The code can be packaged in several ways depending on the size and re-usability.

It is recommended to take a look at the Object-Oriented Programming in JavaScript section, if you are not familiar how ZK extends JavaScript to support the concept of packages and classes.

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 page, 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>
    <addon-name>my.extension</addon-name><!-- any name you like -->
    <javascript src="/myjs/foo.js"/> <!-- assume you package it as /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>

Make It a WPD File for More Control

Technically, you could do whatever you want with a JavaScript file. However, if you prefer to make it a JavaScript package, such that they will be loaded automatically when required, you could package them as a WPD file.

For example, you could have a WPD file and make it loaded with the zk package (so it speeds up the loading).

<language-addon>
    <addon-name>my.extension</addon-name><!-- any name you like -->
    <javascript package="my.foo" merge="true"/> <!-- assume you call it my.foo -->
</language-addon>

Version History

Last Update : 2022/01/18


Version Date Content
     



Last Update : 2022/01/18

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