h1. GreenScript module

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

h2. <a>Enable the GreenScript module for the application</a>

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

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

h2. <a>Using the GreenScript module</a>

h3. <a>Setup tags</a>

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

h3. <a>Configure GreenScript</a>

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

h3. <a>Using greenscript tags in your template</a>:

h4. <a>Using css tag</a>

Use the following syntax to load your css file:

bc. #{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:

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

h4. <a>Using javascript tag</a>

The following syntax can help you load javascript file:

bc. #{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:

bc. #{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:

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