Saturday, February 23, 2013

JsRender Your Google Gadget

During a couple of my last projects I used JsRender as HTML templating engine. Although it isn't even in beta, the results are very satisfying. It's fast, featured, easy/readable syntax and very active in development.

Now I needed some templating Gadgets for my personal Google Site, but unfortunately couldn't find any JsRender based solution. Since it was for personal use only and I didn't want to learn another syntax for this, I decided to build one. Using external gadgets resulted in too much clutter.



The gadget allows you to bind a JSON or XML webservice to a HTML template. All the gadget needs is the datasource and template URL's and optionally a CSS link.

In this example I used a Last.fm webservice that returned my 10 latest played tracks with some extra info. 

The returned data looks like this:



Based on this structure I created a simple template that shows the first 5 tracks with artist and link in a list. If you're not familiar with the JsRender syntax, more info and demos. The gadget supports Livestamp.

<ul>
{{for recenttracks.track}}
{{if #index < 5}}
<li>
<a target="_blank" href="{{>url}}">
{{>name}}
</a>
<br/>
{{>artist["#text"]}}
</li>
{{/if}}
{{/for}}
</ul>

I saved the file with a .tmpl.html extension and uploaded it somewhere. After this, I added a new gadget by url to a page and used this url:

https://sites.google.com/a/achappey.nl/achappey-nl/home/develop/data2html/sources/Data2HTML.xml

This option screen appears:


























TypeFormat of the datasource (JSON or XML)
DatasourceURL of the datasource
Template URL of the JsRender template
JavascriptURL of custom Javascript files that needs to be loaded, for example for JsRender helper 
functions (optional) 
CSS URL of CSS file 
Disable cachingNormally, the template and the data are cached for about an hour, but with this option 
enabled the template and data will be refreshed every request.
Linkify Enable this if you want to Linkify. Wrap the content that needs to be linkified in 
linkify css class
Hashtag search prefix URL prefix that's used  to Linkify hashtags (optional)


The options I used for this demo:


Type JSON
Datasource http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=achappey&api_key=80b1326fb347ed61e59f65a782480c3e&format=json
Template https://sites.google.com/a/achappey.nl/achappey-nl/home/develop/data2html/sources/tracksDemo.tmpl.html

You can see this demo in action here. And more here and here.

No comments:

Post a Comment