http://hades.name/blog/tag/xml/Hades Blag blog posts with tag intersection xml2010-01-17T22:30:17ZEdwarddjango-atompubhttp://hades.name/blog/2010/01/03/simple-tools-simple-tasks/Simple Tools for Simple Tasks2010-01-17T22:30:17Z2010-01-03T21:13:48Z<p>I’d like to tell you today what simple tools there are to make your life easier. Of course, a hammered screw holds better than a screwed nail, but it is much more fun to use appropriate tools for their jobs. In the long run at least.</p>
<p>Imagine you want to create a simple photogallery for your site to tell your readers where have you been this summer, what have you seen and what have you done. Ideally it would be a simple page with a title (the place you visited) and large photos with your short comments. You start with a simple html, like this:</p>
<div class="code"><span class="hl kwa"><html></span><br />
<span class="hl kwa"><head><title></span>Saint-Petersburg<span class="hl kwa"></title></head></span><br />
<span class="hl kwa"><body></span><br />
<span class="hl kwa"><h1></span>Saint-Petersburg<span class="hl kwa"></h1></span><br />
<span class="hl kwa"><p></span>Wow, there’s an awful lot of Zenith shops there.<span class="hl kwa"></p></span><br />
<span class="hl kwa"><img</span> <span class="hl kwb">src</span>=<span class="hl str">“zenith01.jpg”</span> <span class="hl kwa">/></span><br />
<span class="hl kwa"><p></span>The saleswoman seems like a gifted businessman.<span class="hl kwa"></p></span><br />
<span class="hl kwa"><img</span> <span class="hl kwb">src</span>=<span class="hl str">“businessman01.jpg”</span> <span class="hl kwa">/></span><br />
<span class="hl kwa"></body></span><br />
<span class="hl kwa"></html></span><br />
</div>
<p>But you are not a mere mortal, but a fine software developer! Or another kind of brilliant person. So you immediately found a major design flaw: wherever you will need to change the design or layout of this page, or add perhaps a <span class="caps">GPS</span> link for each photo, you would need to edit the page (or all the individual photo entries) manually. </p>
<p>You could also use some kind of a dynamic photo gallery. But that is an obvious overkill: web applications are much more <span class="caps">CPU</span> and <span class="caps">RAM</span> hungry. Java programmers may stop reading at this point: efficiency problems never stop them. Also the web galleries usually have cumbersome point-and-click interfaces which involve too much, well, pointing and clicking for simple tasks. Enterprise programmers may stop reading at this point and join their Java colleagues. </p>
<p>So you would write a simple, relatively fast web application that would generate something like the above code from textual descriptions of photos and a template page. That’s your only option, right? Wrong! That still might not even be an option: some sysadmins still disable <span class="caps">CGI</span> and stuff for their web servers (that includes university homepages and some of the cheapest hostings). And even if your web-app is extremely fast, static pages still seem way better.</p>
<p>Here’s how you can have your cake and eat it. For nearly ten years now, there exists a technology called <span class="caps">XSL</span> Transformations, or <span class="caps">XSLT</span>. In short, it is a language that describes how to convert one <span class="caps">XML</span> file into another. Imagine an <span class="caps">XML</span> file, say <code>peter.xml</code>:</p>
<div class="code"><span class="hl kwa"><?xml</span> <span class="hl kwb">version</span>=<span class="hl str">“1.0”</span> <span class="hl kwb">encoding</span>=<span class="hl str">“<span class="caps">UTF</span>-8”</span><span class="hl kwa">?></span><br />
<span class="hl kwa"><?xml-stylesheet</span> <span class="hl kwb">type</span>=<span class="hl str">“text/xsl”</span> <span class="hl kwb">href</span>=<span class="hl str">“album.xslt”</span><span class="hl kwa">?></span><br />
<span class="hl kwa"><album></span><br />
<span class="hl kwa"><title></span>Saint-Petersburg<span class="hl kwa"></title></span><br />
<span class="hl kwa"><photo></span><br />
<span class="hl kwa"><image></span>zenith01.jpg<span class="hl kwa"></image></span><br />
<span class="hl kwa"><comment></span>Wow, there’s an awful lot of Zenith shops there.<span class="hl kwa"></comment></span><br />
<span class="hl kwa"></photo></span><br />
<span class="hl kwa"><photo></span><br />
<span class="hl kwa"><image></span>businessman01.jpg<span class="hl kwa"></image></span><br />
<span class="hl kwa"><comment></span>The saleswoman seems like a gifted businessman.<span class="hl kwa"></comment></span><br />
<span class="hl kwa"></photo></span><br />
<span class="hl kwa"></album></span><br />
</div>
<p>It looks exactly like gazillions of other <span class="caps">XML</span> files in the world. Except for the second line, which in English says “Oh, hi, you want to show this file to a user? Just apply a stylesheet at <code>album.xslt</code> and he won’t go mad. Thanks!” Here’s the <code>album.xslt</code>:</p>
<div class="code"><span class="hl kwa"><?xml</span> <span class="hl kwb">version</span>=<span class="hl str">“1.0”</span> <span class="hl kwb">encoding</span>=<span class="hl str">“<span class="caps">UTF</span>-8”</span><span class="hl kwa">?></span><br />
<span class="hl kwa"><xsl:stylesheet</span> <span class="hl kwb">version</span>=<span class="hl str">“1.0”</span> xmlns:<span class="hl kwb">xsl</span>=<span class="hl str">“http://www.w3.org/1999/<span class="caps">XSL</span>/Transform”</span><span class="hl kwa">></span><br />
<span class="hl kwa"><xsl:template</span> <span class="hl kwb">match</span>=<span class="hl str">“/”</span><span class="hl kwa">></span><br />
<span class="hl kwa"><html></span><br />
<span class="hl kwa"><head><title><xsl:value-of</span> <span class="hl kwb">select</span>=<span class="hl str">“album/title”</span> <span class="hl kwa">/></title></head></span><br />
<span class="hl kwa"><body></span><br />
<span class="hl kwa"><h1><xsl:value-of</span> <span class="hl kwb">select</span>=<span class="hl str">“album/title”</span> <span class="hl kwa">/></h1></span><br />
<span class="hl kwa"><xsl:for-each</span> <span class="hl kwb">select</span>=<span class="hl str">“album/photo”</span><span class="hl kwa">></span><br />
<span class="hl kwa"><p><xsl:value-of</span> <span class="hl kwb">select</span>=<span class="hl str">“comment”</span> <span class="hl kwa">/></p></span><br />
<span class="hl kwa"><img><xsl:attribute</span> <span class="hl kwb">name</span>=<span class="hl str">“src”</span><span class="hl kwa">></span><br />
<span class="hl kwa"><xsl:value-of</span> <span class="hl kwb">select</span>=<span class="hl str">“image”</span> <span class="hl kwa">/></span><br />
<span class="hl kwa"></xsl:attribute></img></span><br />
<span class="hl kwa"></xsl:for-each></span><br />
<span class="hl kwa"></body></span><br />
<span class="hl kwa"></html></span><br />
<span class="hl kwa"></xsl:template></span><br />
<span class="hl kwa"></xsl:stylesheet></span></div>
<p>If you look closely at it, you will see that it basically tells you (or your browser) how to make <code>peter.html</code> from <code>peter.xml</code>. And that’s it. So here are the bonuses you get:</p>
<ul><li>both files are static, you don’t need to have a muscular web server or a friendly (or non-muscular) sysadmin;
</li><li>if you have hundreds of photos on a single page and at some moment decide that comments should go below the photo, you’d need to swap two lines, not hundreds of lines;
</li><li>if you visited thousands of places and at some moment decide that every page should have a copyright footer or be redesigned completely, you’d need to change one single file, not thousands of them;
</li><li>you can even have different styles for the same set of photos. For example, you may want to show smaller images when viewed from a handheld device. Or bigger images when viewed on your 60” plasma;
</li><li>you don’t increase the butthurterol level in your blood.</li></ul>
<p>Next time I shall probably show you some of my deployment tricks. See you later!</p>