ZWT V0.3.1 JavaScript framework for Rich Internet Applications

Zeleos Web Toolkit Tools Ant Tasks

Introduction

Rich Internet applications that heavily rely on JavaScript and CSS require some optimization to work properly. For instance JavaScript files need to be as compact as possible to fasten the load of the application, this is also true for CSS files.

When building a complex application in JavaScript, it also important to validate that the code is correct. JavaScript is not a compiled language and permissive in many ways, it is therefore very important to be able to check that the code is correct.

ZWT uses JavaScript objects and loads the dependencies between classes using a dynamic loading system. We wanted to provide a very clean API with isolated classes to ease the maintenance and make the framework as intuitive as possible, however this increase the loading time of the applications.

ZWT Tools have been created to answer these issues and much more. They can for instance be used outside the scope of ZWT to validate or optimize any JavaScript code.

Using ZWT tools in Ant

ZWT defines Ant tasks to execute ZWT Tools. In order to use them, you simply need to include this line into your Ant script:

<taskdef resource="org/zeleos/zwt/tools/ant/zwt-tools.properties" classpath="${zwtpath.zwt.home}/lib/zwt-tools.jar"></taskdef>

Property zwtpath.zwt.home must point to your ZWT installation.

zwt-jsc (JavaScript Compiler)
Description

The JavaScript compiler strictly follows ECMA262 specification. By strictly, I mean it doesn't support automatic semicolon insertion, neither Regular Expression Literals. This has been decided in order to put some strictness in JavaScript: a semicolon must not be optional and a regular expression has to be created with a RegExp object.

This compiler parses one or more JavaScript files, validates the content according to the ECMA262 grammar. It creates result files with formatted and/or optimized code.

For now optimization only removes comments and spaces and replaces the local variable names by two letters identifiers. In the future, we'll certainly extend the optimization to any kind of variables.

If you specify the same directory for the source and destination directories, you must specify a file extension for the compiled files. If no destination directory is specified, the compiler only validate the file against the ECMA262 grammar.

Parameters
Attribute Description Required
srcDir

The source directory which contains the JavaScript source files.

Yes
destDir

The destination directory into which the JavaScript compiled files are stored.

No
optimize

Indicates whether compiled files should be optimized; defaults to true.

No, defaults to true
format

Indicates whether compiled files should be formatted; defaults to false.

No, defaults to false
extension

The file extension to use for the compiled files.

No
Examples
<zwt-jsc srcDir="${src}" 
	destDir="${build}"
	optimize="true"/>

compiles all .js files under the ${src} directory and stores the compiled files in ${build} directory. Compiled files are optimized.

<zwt-jsc srcDir="${src}" 
	destDir="${build}"
	optimize="false"
	format="true"
	extension="js.fmt"/>

compiles all .js files under the ${src} directory and stores the compiled files with the extension .fmt in ${build} directory. This compilation actually only formats the source files with no optimization.

zwt-zjsc (Zeleos JavaScript Compiler)
Description

The Zeleos JavaScript Compiler differs from the standard JavaScript Compiler (see zwt-jsc) since it also checks the code against the ZWT coding convention.

Parameters
Attribute Description Required
srcDir

The source directory which contains the ZWT JavaScript source files.

Yes
destDir

The destination directory into which the ZWT JavaScript compiled files are stored.

No
optimize

Indicates whether compiled files should be optimized; defaults to true.

No, defaults to true
format

Indicates whether compiled files should be formatted; defaults to false.

No, defaults to false
extension

The file extension to use for the compiled files.

No
Examples
<zwt-zjsc srcDir="${src}" 
	destDir="${build}"
	optimize="true"/>

compiles all .js files under the ${src} directory and stores the compiled files in ${build} directory. Compiled files are optimized.

<zwt-zjsc srcDir="${src}" 
	destDir="${build}"
	optimize="false"
	format="true"
	extension="js.fmt"/>

compiles all .js files under the ${src} directory and stores the compiled files with the extension .fmt in ${build} directory. This compilation actually only formats the source files with no optimization.

zwt-zjsmerge (Zeleos JavaScript Merger)
Description

The Zeleos Merger is used to patch a Zeleos JavaScript file. It basically adds includes, methods, classes and properties from a patch file to the source file if they don't already exist in the source file.

The merged files can be optimized, formatted and include or not the comments from the source file.

You can specify different file extensions for the source files, patch files and merged files so you can use the source directory as the destination directory.

Parameters
Attribute Description Required
srcDir

The source directory which contains the ZWT JavaScript source files to patch.

Yes
patchDir

The directory which contains the ZWT JavaScript patch files.

Yes
destDir

The destination directory into which the ZWT JavaScript merged files are stored.

Yes
srcExtension

The file extension of the source files.

No
patchExtension

The file extension of the patch files.

No
extension

The file extension to use for the merged files.

No
optimize

Indicates whether merged files should be optimized; defaults to true.

No, defaults to true
format

Indicates whether merged files should be formatted; defaults to false.

No, defaults to false
includeComments

Indicates whether merged files should keep comments from the source file; defaults to false.

No, defaults to false
Examples
<zwt-zjsmerge srcDir="${src}"
	patchDir="${patch}" 
	destDir="${build}"
	srcExtension="js"
	patchExtension="js.patch"
	extension="js.merge"/>

patches all .js files under the ${src} directory with .js.patch files under the ${patch} directory and stores the merged files in ${build} directory with the extension .js.merge. Merged files are optimized by default.

<zwt-zjsmerge srcDir="${src}"
	patchDir="${src}" 
	destDir="${src}"
	srcExtension="js.old"
	patchExtension="js.patch"
	extension="js"
	optimize="false"
	format="true"
	includeComments="true"/>

patches all .js.old files with .js.patch files and stores the merged files with the extension .js.merge. All the files are under the same ${src} directory. Merged files are not optimized, formated and comments from the source file are included.

zwt-zcssmerge (Zeleos CSS Merger)
Description

The Zeleos CSS merger is used to patch a Zeleos CSS file. It basically adds CSS selectors from a patch file to the source file if they don't already exist in the source file.

The merged files can be optimized (remove spaces, comments...), formatted and include or not the comments from the source file.

You can specify different file extensions for the source files, patch files and merged files so you can use the source directory as the destination directory.

Parameters
Attribute Description Required
srcDir

The source directory which contains the CSS source files to patch.

Yes
patchDir

The directory which contains the CSS patch files.

Yes
destDir

The destination directory into which the CSS merged files are stored.

Yes
srcExtension

The file extension of the source files.

No
patchExtension

The file extension of the patch files.

No
extension

The file extension to use for the merged files.

No
optimize

Indicates whether merged files should be optimized; defaults to true.

No, defaults to true
format

Indicates whether merged files should be formatted; defaults to false.

No, defaults to false
includeComments

Indicates whether merged files should keep comments from the source file; defaults to false.

No, defaults to false
Examples
<zwt-zcssmerge srcDir="${src}"
	patchDir="${patch}" 
	destDir="${build}"
	srcExtension="css"
	patchExtension="css.patch"
	extension="css.merge"/>

patches all .css files under the ${src} directory with .css.patch files under the ${patch} directory and stores the merged files in ${build} directory with the extension .css.merge. Merged files are optimized by default.

<zwt-zcssmerge srcDir="${src}"
	patchDir="${src}" 
	destDir="${src}"
	srcExtension="css.old"
	patchExtension="css.patch"
	extension="css"
	optimize="false"
	format="true"
	includeComments="true"/>

patches all .css.old files with .css.patch files and stores the merged files with the extension .css.merge. All the files are under the same ${src} directory. Merged files are not optimized, formated and comments from the source file are included.

zwt-zjspack (Zeleos JavaScript Packager)
Description

The ZWT JavaScript API is separated into multiple files, one per class, dependencies are dynamically loaded at runtime. This process is very flexible but doesn't present good performances. The Zeleos Packager is used to package a ZWT application class (defining a main method) into one single JavaScript file containing all required dependencies.

When publishing an application, you'll probably want to package it to improve the loading time and overall performances.

The resulting file can be obfuscated and/or split per class path: one file is generated for each class path.

Parameters
Attribute Description Required
srcDir

The source directory which contains the Zeleos application files to package (any file that contains a main method).

Yes, unless classList is present
classList

A comma separated list of classes to package. The resulting files (one per class) need to be declared in the right order in the HTML file as dependencies are included once for all the classes in the list. Basically if the first class defines a dependency, then it is included in the packaged file of the first class but not in the other files even if they define the same dependency.

Yes, unless srcDir is present
destDir

The destination directory into which the packaged files are stored.

Yes
classPath

A comma separated list of classpaths. These paths are used to resolve the different dependencies found in the files. Note that you can define either local paths or URLs.

Yes
obfuscate

Indicates whether packaged files should be obfuscated; defaults to true.

No, defaults to true
split

Indicates whether packaged files should be split per classpaths; default to false.

No, defaults to false
Examples
<zwt-zjspack srcDir="${src}" 
	destDir="${build}" 
	classPath="${classPath}" />

packages the ZWT Application files under ${src} and stores the packaged files in ${build} directory using ${classPath} to resolve dependencies. Packaged files are obfuscated by default.

<zwt-zjspack classList="org.zeleos.TestClass1,org.zeleos.TestClass2" 
	destDir="${build}" 
	classPath="${classPath}" />

packages the ZWT Application classes org.zeleos.TestClass1 and org.zeleos.TestClass2 and stores the packaged files in ${build} directory using ${classPath} to resolve dependencies. Packaged files are obfuscated by default.

zwt-zuidlc (Zeleos UIDL Compiler)
Description

The Zeleos UIDL Compiler is used to compile ZUIDL file and generates corresponding JavaScript, CSS and HTML files.

Some generated JavaScript files (Controller callbacks and Models) are merged to the existing files (if they actually exist).

CSS files are all merged to the existing ones.

Basically every files a developer is supposed to modify are not overridden if they already exist.

Parameters
Attribute Description Required
srcDir

The source directory which contains the ZUIDL files to compile.

Yes
zwtapidir

The path to the ZWT API directory.

Yes
zwtthemesdir

The path to the ZWT Themes directory.

Yes
zwttheme

The theme to use in the generated HTML files.

Yes
jsdestdir

The destination directory into which JavaScript files are stored.

Yes
cssdestdir

The destination directory into which CSS files are stored.

Yes
htmldestdir

The destination directory into which HTML files are stored.

Yes
jspackdestdir

The directory where packaged JavaScript are stored.

Yes
generateJS

Indicates whether JavaScript files are generated.

Yes
generateCSS

Indicates whether CSS files are generated.

Yes
generateHTML

Indicates whether HTML files are generated.

Yes
generateHTMLPack

Indicates whether packaged HTML files are generated.

Yes
Examples
<zwt-zuidlc srcDir="${src}"
	generateJS="true"
	generateCSS="true"
	generateHTML="true"
	generateHTMLPack="false"
	zwtapidir="${zwtAPI}"
	zwtthemesdir="${zwtThemes}"
	zwttheme="Default"
	jsdestdir="${jsBuild}"
	cssdestdir="${cssBuild}"
	htmldestdir="${htmlBuild}"/>

generates JavaScript, CSS and HTML files from the ZUIDL files under ${src} and stores them in ${jsBuild}, ${cssBuild} and ${htmlBuild}.

The theme to use is Default, the path to the Themes is ${zwtThemes} and the path to the ZWT API is ${zwtAPI}.