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

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.

# %dev.gs.minimize.enabled=false
# %prod.gs.minize.enabled=true

h4. <a>Dynamic configuration</a>

GreenScript provides a controller for dynamic configuration. In order to use the controller, you should 
# Add 'GET /gs module:greenscript' in your application route file
# Open the configuration page in your browser. For the sample application, the URL is http://localhost:29000/gs/conf

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

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/}-
+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:

# Usually you should use output:true when you declare css files in the main.html file.
# In the extended template you probably would like to ommit the output parameter

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

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:

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.
# 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.