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. use js.default=file1,file2 to set the default js files that will be loaded for every page. 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

You can also put ‘gs.*’ configuration in your application.conf file. The advantage of this way is you can configure your GreenScript plugin differently for different framework ID, e.g.

1. %dev.gs.minimize.enabled=false
2. %prod.gs.minize.enabled=true

Dynamic configuration

GreenScript provides a controller for dynamic configuration. In order to use the controller, you should

1. Add ‘GET /gs module:greenscript’ in your application route file
2. Open the configuration page in your browser. For the sample application, the URL is http://localhost:29000/gs/conf

Note

1. There is no security mechanism provided. So you probably won’t like expose the /conf interface at a prod server
2. The updated configuration will NOT be persisted into your greenscript.conf configuration file. or any other files.

Using greenscript tags in your template:

Using css tag

Use the following syntax to load your css file:

bc. #{greenscript.css sm:gsSM, load:[‘layout’, ‘color’], output:true/}
bc. #{greenscript.css import:[‘layout’, ‘color’], output:true/}

note sm:gsSM must to included load import parameter is an array of css file names. You don’t need to load import 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 specified in the 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.
2. In the extended template you probably would like to ommit the output parameter

Using javascript tag

The following syntax can help you load javascript file:

bc. #{greenscript.javascript sm:gsSM, load:[‘pMask’] /}
bc. #{greenscript.javascript import:[‘pMask’] load:[‘inplace’]/} or
bc. #{greenscript.js import:[‘pMask’] load:[‘inplace’]/}

The above statement loads pMask.js and inplace.js file and all their dependents into memory, say, prototype-event-extensions.js and prototype.js which is a dependent of prototype-event-extensions.js. However, only inplace.js will be output in here, others 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.
2. It is recommended to use ‘import’. Doing this will cause all your javascript (original) files be compressed in one javascript file when minimize is enabled.