Writing a Django Template Widget With Dojo Data Stores
Posted by Shane O'Sullivan on 3 March, 2008
One of the very cool recent additions to the Dojo toolkit is support for the Django Template engine. It is essentially a very advanced browser based templating engine, that enables you to use things like FOR loops, IF statements and much more directly in a HTML template. Or, as the author puts it:
The Django Template Language is one part of Django, a “high-level Python Web framework that encourages rapid development and clean, pragmatic design.
This blog post is an in depth tutorial on working with DTL, Atom XML and Dojo data stores. To see the final working version, have a look here, or get the code from here. Extract the code at the same level as Dojo, and open the demoAtomDTL.html file. Note that you need either the nightly Dojo code, or v1.1 or later for this to work.
Simple Example
As a very simple example, you could write a single template, such as
<ul>
<!--{% for item in items %}-->
<li value="{{item.value}}">{{item.text}}</li>
<!--{% endfor %}-->
</ul>
Then, you populate the template with some JSON data, e.g.
{
items:[
{value:1,text:"Choice 1"},
{value:2,text:"Choice 2"},
{value:3,text:"Choice 3"}
]
}
and it generates the following HTML.
<ul>
<li value="1">Choice 1</li>
<li value="2">Choice 2</li>
<li value="3">Choice 13</li>
</ul>
Writing A Widget And Template To Work With Atom XML
The example above is simplistic, though still very useful of course. However it is possible to do much more interesting things with DTL. A recent enhancement to the code base means that a template can now be built using data from a dojo.data repository, rather than a simple JSON object. This means that you can have a single template that can be used with data from many different data sources (see here for an ItemFileReadStore and here for a Flickr data store example).
This post shows how to write a templated widget that uses a Dojo data store I have written for reading Atom XML data (which has been committed to the Dojox project), and transforming it using DTL into a nice fancy HTML widget, complete with visual effects. See http://www.skynet.ie/~sos/blog.php to see the final result. Do a “View Source” on that page to see how simple it is to include it on a page.
Writing the Template
Firstly, the structure of the HTML to be produced must be decided. For this example, I’ll just create a series of DIV elements that contain a header for the title, and a body for the text. The body will also contain another DIV to list all the tags (or categories in Atom-speak). So, a single entry will end up looking like:
<div class="entry">
<div class="entryTitle">This is an entry title</div>
<div class="entrySummary">
This is some summary text
<div>
Tags: <a href="http://shaneosullivan.wordpress.com/category/ajax">Ajax</a>
</div>
</div>
</div>
A template for this looks as follows:
<!--{% load dojox.dtl.contrib.html %}-->
<div id="{{rootId}}" >
<!--{% for item in items %}-->
<div class="entry">
<div class="title"><!--{{item.title.text}}--></div>
<div class="summary">
<!--{% if item.summary.type == "html" %}-->
<!--{% html item.summary.text %}-->
<!--{% else %}-->
<!--{{ item.summary.text }}-->
<!--{% endif %}-->
<div>
<!--{% if item.category %}-->
Tags:
<!--{% for cat in item.categorys %}-->
<a href="{{cat.scheme}}/category/{{cat.term}}"> <!--{{cat.term}}--> </a>
<!--{% endfor %}-->
<!--{% endif %}-->
</div>
</div>
</div>
<!--{% endfor %}-->
Break it down!
Ok, so let’s have a look at this.
Posted in Ajax, Dojo, Feeds, Flickr, Javascript, Technical, dijit, dojox, dojox.data, json, open source | 5 Comments »
