= hi5.template Library = {{{ #!html
Table of Contents
  1. Overview
  2. How to add templates to your code
  3. Downloading the library
  4. hi5 Template Tags
  5. hi5 Template Functions
}}} == Overview == The hi5.template library is a browser side, Javascript library which enables you to fuse Javascript data and logic into your HTML. It simplifies writing localized apps by providing a message resource tag, , which eliminates the need to build messages and HTML with Javascript. To ease transitioning to language resource files, you can provide the message resource directly in the message tag. For example: You received a ${gift} from ${friend}. Also, using the hi5.template library allow future compatibility with our user generated content inline-translation tool. The template is straightforward, with only a few conventions: ${} for variable substitution, for iteration, / for conditional logic, and for gadget resource localization. There is also a tag for storing the output of tags, and and convenience tags.[[BR]][[BR]]The library is based on XML templates, which can be embedded in `` ---- == How To Add Templates To Your Code == Here’s an example of where you would put the library in your application XML:
== Downloading The Library == Here’s the zip file with library and documentation: http://static.hi5.com/images/opensocial/hi5_template_20080430.zip == hi5.template Tags == There are four core tags used for iteration, conditional logic, resource localization and variable assignment, and two convenience tags for member names and thumbnails. A detailed description of each follows. {{{ #!html
 for-each
}}} '''` `'''[[BR]] Iterates over a collection, passing the current item to the template as variable === Parameters === '''`var`''' A variable name that is used for each collection item[[BR]]'''` source`''' An array or object, which it iterates over === Examples === `
  • ${friend.name}
    •
` {{{ #!html
 if-test
}}} '''` `'''[[BR]] Applies the body of the tag if the Javascript expression evaluates to true === Parameters === '''` test`''' A Javascript expression that evaluates to a boolean === Examples === ` This is an even row This is an odd row ` {{{ #!html
 set
}}} '''` body `'''[[BR]][[BR]] Set a variable in the current scope, storing the output of the body === Parameters === '''` var`''' A variable name that is used to store the body[[BR]]'''` body`''' The body HTML, which can include template tags === Examples === ` `[[BR]]`` {{{ #!html
 os:message
}}} [[BR]]` message ` Look up a message from a resource bundle and perform variable substitution === Parameters === '''`key`''' A message resource name in a resource bundle[[BR]]'''` param*`''' Each variable substitution name and value to be replaced in the message === Examples === ` You received a ${gift}` `Default message` {{{ #!html
 os:name
}}} '''''' Display a member's name, by passing an !OpenSocial Person object, 'viewer', 'owner', or a member id.[[BR]] Note: use of uid generates an !OpenSocial request. Use newFetchPeopleRequest for lists of members. === Parameters === '''`person`''' An !OpenSocial Person object to be used as the member[[BR]]'''` uid `'''The values 'viewer', 'owner', or the id of a member[[BR]]'''` linked `'''Set to true to have the name linked to the member's profile === Examples === ` ` `{{{#!html
 os:profile
}}}` {{{ #!html
 os:profile
}}} ''''''[[BR]] Display a member's profile photo, by passing an !OpenSocial Person object, 'viewer', 'owner', or a member id.[[BR]] Note: use of uid generates an !OpenSocial request. Use newFetchPeopleRequest for lists of members. === Parameters === '''`person`''' An !OpenSocial Person object to be used as the member[[BR]]'''`uid`''' The values 'viewer', 'owner', or the id of a member[[BR]]'''` size`''' The size of the thumbnail, a 50x50 thumb or 100x100 small === Examples === ` `[[BR]]` ` ---- == hi5.template Functions == There are three core functions provided to work with templates and template related processing. You can parse templates from text, apply them, and perform message substitution in Javascript. {{{ #!html
 hi5.template.parse(templates_text)
}}} Parse template text, such as from a Javascript string or a makeRequest call. === Parameters === '''` templates`''' One or more XML templates contained in a stylesheet tag[[BR]][[BR]]'''Return value''' None === Examples === `hi5.template.parse(document.getElementById('templates'));`[[BR]]`gadgets.io.makeRequest('http://www.hi5.com', function(response) { hi5.template.parse(response.data); });` {{{ #!html
 hi5.template.apply(template_name, output_element, context_data)
}}} Recursively applies a template or template node and appends the result to an element node === Parameters === '''`input`''' A named element-id such as 'template', or an XML or browser DOM[[BR]]'''` output `'''A named element-id such as 'content', or a browser DOM node[[BR]]'''` context`''' A context object used to pass data to the template === Return value === None === Examples === `hi5.template.apply(document.getElementById('template'), 'content', {friends: data});hi5.template.apply('template', 'content', {owner: owner, viewer: viewer});` {{{ #!html
 hi5.template.message(resource_key, substitutions)
}}} Look up a message from a resource bundle and perform variable substitution === Parameters === '''` resource`''' A resource name in message bundle[[BR]]'''` substitutions`''' A hash map of variable name substitutions to be replaced in the string === Return value === A string representing the message with variable substitution applied === Examples === `hi5.template.message('received_gift', {name: 'Joe', gift: 'pizza'});`