As you’ve seen in many of the OpenSocial gadgets in the earlier chapters, two of the most widely used and accepted approaches to developing the visualization layer within a gadget are to insert new content directly into the innerHTML of a DOM node, or to dynamically create new nodes and inject them into the DOM structure through the JavaScript layer. One major issue with these approaches is that you mix your markup and script layers, which makes the code base difficult to maintain, very hard to reuse, and unwieldy.

As we talked about in the section Porting Applications from Facebook to OpenSocial in Chapter 5, one key to making a portable application is to separate visual markup from programming logic. In the traditional approaches to gadget development I just mentioned, markup and programming logic is not split. This means that application portability is a major concern, and you risk limiting the reach of your application within different containers.

OpenSocial templating provides a way for developers to create a UI that is driven by a data source, such as through data pipelining. This approach separates out programming logic from the markup layer, extending all of the benefits of portability that come with that separation. In addition, this approach gives you a code base that is easily maintainable, reusable, and that reduces code bloat with redundant functions and code blocks.

OpenSocial templates offer several features for defining a markup layer on top of a data object, further reducing the markup required to define the sections and functionality we need. These features include embeddable expressions, special variables, conditional content, special tag definitions, and a host of other tools.

Templates are not a replacement for JavaScript and do not provide the full range of functionality that you get from a JavaScript layer. For advanced functionality or user interaction, the gadget should still provide the JavaScript controller layer to handle the required features.

To integrate OpenSocial templating within your gadget, you must first include the Require node for the feature within the ModulePrefs of the gadget:

<ModulePrefs>
   <Require feature="opensocial-templates" />
</ModulePrefs>

Now you can use the template structure within the gadget Content sections. Creating a template in the content that leverages a data structure or pipe takes only a small amount of effort.

To specify an OpenSocial template within your markup, wrap the markup in a script block with a type of text/os-template. This indicates that the enclosed markup should be treated as a template block. Inside the block, we can place any markup we wish, adding data sources by using the format ${source}:

<script type="text/os-template">
  <img src="${Viewer.urls.address}" />
</script>

The data source reference used here, Viewer.urls.address, has a structure representative of the root JSON data that was returned for that source:

${Viewer.urls.address}

and renders down to the following JSON attribute:

Viewer["urls"]["address"]

Data pipelining requests or custom data objects are typically used within these blocks to make rich data sources available to the template.

The OpenSocial specification reserves several attributes for future use, including: