GreenScript module

The GreenScript module help you to manage javascript and CSS dependencies and do minimizing work in the same time.

Enable the GreenScript module for the application

In the /conf/application.conf file, enable the GreenScript module by adding this line:

# The greenscript module
module.greenscript=${play.path}/modules/play-greenscript

Using the GreenScript module

Setup tags

In order to use GreenScript you need to copy tags folder from src/views folder to your views folder. This is a temporary solution. In the final version this step should be unnecessary

Configure GreenScript

Copy greenscript.conf from the samples/greenscript/conf to your conf folder. Edit the file to

1. setup javascript dependencies and css file dependencies. Basically you set dependecies in this way js.file1=file2,file3, meaning javascript file1.js require file2.js and file3.js be loaded first. For css dependencies, you use css.file1=file2 to require file2.css be loaded prior to file1.css. Check sample application greenscript.conf for detail
2. other configurations
   1. gs.dir.js=javascripts, configure your javascript dir in the public folder
   2. gs.dir.css=stylesheets, configure your css dir in the public folder
   3. gs.minimize.enabled, enable/disable minizing process. Note even minizing is disabled, the dependency management is still there.
   4. gs.nocache=false, enable/disable cache on minizing. Disable cache enable you to refresh css or javascript updates without restart the server
   5. gs.compress=true, enable/disable compressing on minizing. Disable compress help you debug your javascript using e.g. firebugs

Using greenscript tags in your template:

Using css tag

Use the following syntax to load your css file:

#{greenscript.css sm:gsSM, load:['layout', 'color'], output:true/}

note sm:gsSM must to included. load parameter is an array of css file names. You don’t need to load dependent files. In the above example, if layout.css depend on reset.css, the latter will load automatically.

output: true is optional. if that is omitted, the css file presented in the load list will be load into the memory but not flush to the output stream where the #{greenscript.css ...} statement is presented. Otherwise a link ref html statement will be output for the relevant css files.

tips:

1. Usually you should use output:true when you declare css files in the main.html file.

Using javascript tag

The following syntax can help you load javascript file:

#{greenscript.javascript sm:gsSM, load:['pMask'] /}

The above statement in your template load pMask.js file and all it’s dependents, say, prototype-event-extensions.js and prototype.js which is a dependent of prototype-event-extensions.js. However, only pMask.js will be output in here, the latter two will be output with the following statement:

#{greenscript.javascript sm:gsSM, loadMissing:true /}

The above statement in your templates load all javascript files that are not outputs, usually those dependent javascripts that are declared but not outputed.

tips:

1. Usually you should use loadMissing:true in the main.html file. See samples/greenscript application for detail.