Community contributed extensions

the module project is hosted by google code at mandubian-play-google-closure under MIT license

Google Closure Play! module How-to

This module is aimed at integrating Google Closure tools with play!. For the time being, it ONLY provides javascript client templating based on Google Closure Templates .
Other tools from Google Closure will be added later but don’t hesitate to ask if you need something first.

With this module, any SOY template files in your app/** directory is automatically compiled into JS at runtime by the Play! enhancing mechanism.
Then you call the JS from client side and you can template into HTML any JSON objects without writing boring JS code.

Install GoogleClosure module

play install googleclosure


Create a SOY template file in app/... directories

Note: the SOY syntax is described here

For example, create app/views/soy/helloworld.soy:

{namespace examples.simple}

/**
 * Says hello to the world.
 */
{template .helloWorld}
  Hello world!Then you call the JS from client side and you can template into HTML any JSON objects for example
{/template}

/**
 * Greets a person using "Hello" by default.
 * @param name The name of the person.
 * @param? greetingWord Optional greeting word to use instead of "Hello".
 */
{template .helloName}
  {if not $greetingWord}
    Hello {$name}!
  {else}
    {$greetingWord} {$name}!
  {/if}
{/template}


Reload your web page and have a look at directory public/javascripts.
You should see a “helloworld.js” file.

// This file was automatically generated from helloworld.soy.
// Please don't edit this file by hand.

if (typeof examples == 'undefined') { var examples = {}; }
if (typeof examples.simple == 'undefined') { examples.simple = {}; }


examples.simple.helloWorld = function(opt_data, opt_sb) {
  var output = opt_sb || new soy.StringBuilder();
  output.append('Hello world!');
  if (!opt_sb) return output.toString();
};


examples.simple.helloName = function(opt_data, opt_sb) {
  var output = opt_sb || new soy.StringBuilder();
  output.append((! opt_data.greetingWord) ? 'Hello ' + soy.$$escapeHtml(opt_data.name) + '!' : soy.$$escapeHtml(opt_data.greetingWord) + ' ' + soy.$$escapeHtml(opt_data.name) + '!');
  if (!opt_sb) return output.toString();
};



Use this template in your Play view

Note: Don’t forget to import soyutils.js an helloworld.js

For example, in app/views/Application/index.html:

#{extends 'main.html' /}
#{set title:'Home' /}

*{ #{welcome /} }*
#{set 'moreScripts'}
	<script src="@{'/public/javascripts/soyutils.js'}" type="text/javascript" charset="utf-8"></script>
	<script src="@{'/public/javascripts/helloworld.js'}" type="text/javascript" charset="utf-8"></script>
#{/set}
<script type="text/javascript">
	//Exercise the .helloWorld template
	document.write(examples.simple.helloName({"name": "Bob", "greetingWord":"Coucou"}));
</script>

Reload your web page and you should see
Coucou Bob!

Modify helloworld.soy and reload immediately

The Play enhancer detects a modification on this file and recompiles it immediately.
You can reload your webpage and see modifications.

Note: I tested it with greenscript and it seems to work fine!