Home
Vision
Requirements
People
Teams
Developers
Development
Set up
Issue tracking
Continuous Build
Subversion
Mailinglists
IRC: #gw
Resources
Documentation
XSLT Exercise
EditFlow
Center
Home
Courses
People
Projects
Page
Edit Page
Rename Page
Attach File
Printable
Wiki Source
More ...
Web
Recent Changes
Notify Service
News
Page Index
Search
More ...
Wiki
About TWiki
Text Formatting
Registration
Change Password
Reset Password
Users
Groups
Log In
or
Register
Xslt Exercise
Gw
%TOC% The goal of this exercise is to make yourself familiar with XSLT, which many of you will be using heavily in the GW project. We give you a few sample exercises, but encourage you to try out what happens if you change the input or the required presentation. For XSLT resources, see the [[technical documentation]] for GW. Just pick one of the tutorials, depending on how much you already know about XML and XSLT. The XPath service listed in the XPath section is very useful to learn how to use XPath. If this is your first time on a Linux machine at the UU, then you might find the tips in [[user friendly linux]] useful to read first. ---++ Applying an XSL Transformation First, let's make sure that you know how to apply an XSL transformation. You can do this in many different ways, but for now =xsltproc= (part of libxslt) and your browser (Firefox/Mozilla/IE6) are the most convenient ways. Usually, error reporting is somewhat better at the command-line, so we advice you to use =xsltproc=. ---+++ Using xsltproc Input: hello.xml <verbatim> <?xml version="1.0"?> <hello>World</hello> </verbatim> Transformation: world.xsl <verbatim> <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" indent="yes"/> <xsl:template match="hello"> <html> <head> <title>Hello <xsl:value-of select="."/></title> </head> <body> <h1>Hello <xsl:value-of select="."/></h1> </body> </html> </xsl:template> </xsl:stylesheet> </verbatim> Apply xsltproc: <verbatim> $ xsltproc world.xsl hello.xml </verbatim> You can save the output in a file to view it in your browser: <verbatim> $ xsltproc world.xsl hello.xml > hello.html </verbatim> ---+++ Using XSLT in a Browser For your browser, you can add processing instruction that tells the browser to apply a stylesheet to the XML file. Input: hello-browser.xml <verbatim> <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="world.xsl"?> <hello>World</hello> </verbatim> This should show a somewhat big =Hello World= message if you open this xml file. ---++ A Simple XSL Transformation In this exercise, we will style information about a Subversion repository to HTML. First of all, checkout the data of the GW wiki of last year using the command: <verbatim> $ svn checkout https://svn.cs.uu.nl:12443/repos/test-wiki/ </verbatim> and go to the directory test-wiki. You will see all kinds of files here, which are part of the data of the wiki of last year. For example, the file =WonderLand= tells you a nice story about a young girl. Now, suppose that we want know what has been going on this wiki. We can request the log to see who has committed what, when, and why. <verbatim> $ svn log --verbose </verbatim> This information is very useful, but hard to process for a computer program. Therefore, the Subversion developers have implemented support for getting the log in an XML format. <verbatim> $ svn log --xml --verbose </verbatim> Of course this is horrible to read, but for a computer program this is perfect, since there are a lot of standard languages and libraries to process XML files. We will process this XML format to a nice HTML file in the next exercise, but you will first implement a small XSLT stylesheet. You could skip to the next exercise if you already know the basics of XSLT. First, modify one of the files. For example, give your personal touch to the Alice in Wonderland story. You've now changed one of the files in the Subversion checkout, and one of the operations a version management system has to support is to give you information about what you've been doing in a checkout. You can do this with the command: <verbatim> $ svn status </verbatim> You can get more information about _all_ the files by adding the =--verbose= option to the command: <verbatim> $ svn status --verbose. </verbatim> This information is very useful, for you, as well as for computer programs. Unfortunately, the Subversion developers have not yet implemented an XML option for the =svn status= command. For example, the following format could be used for that: <verbatim> <?xml version="1.0"?> <status> <file path="Wonderland"> <changes> <modified/> </changes> <working-revision>12766</working-revision> <last-committed> <revision>12734</revision> <author>that's you</author> </last-committed> </file> <file path="trunk/WebLeftBar"> <changes/> <working-revision>12766</working-revision> <last-committed> <revision>12734</revision> <author>mbravenboer</author> </last-committed> </file> <file path="trunk/WebHome"> <changes> <added/> </changes> <working-revision>12766</working-revision> <last-committed> <revision>1234</revision> <author>visser</author> </last-committed> </file> </status> </verbatim> Now, implement an XSL Transformation that transforms this format to a simple HTML table. For example, produce the following output for the given input: <verbatim> <html> <head> <title>Subversion Status</title> </head> <body> <table cellspacing="10"> <tr> <th>Path</th> <th>Changes</th> <th>Working Revision</th> <th>Last Committed Revision</th> <th>Last Committed Author</th> </tr> <tr> <td>Wonderland</td> <td>A</td> <td>12766</td> <td>12734</td> <td>that's you</td> </tr> <tr> <td>trunk/WebLeftBar</td> <td/> <td>12766</td> <td>12734</td> <td>mbravenboer</td> </tr> <tr> <td>trunk/WebHome</td> <td>A</td> <td>12766</td> <td>1234</td> <td>visser</td> </tr> </table> </body> </html> </verbatim> ---++ More Complete XSL Transformations Let's now try to do something more interesting, useful, and fancy. The =svn log= commands gives us a lot of information. Let's try to transform that to an attractive HTML page. The goal is to produce something that looks like this: * http://catamaran.labs.cs.uu.nl/svnlog/StrategoXT/2005-07.html Don't worry: we give you a CSS stylesheet and images. They are available here: * http://www.cs.uu.nl/people/martin/swe/svnlog.tar.gz Download the tarball, and use =tar zxvf svnlog.tar.gz= to extract the files. Next, dump the XML log to a file: <verbatim> $ svn log --xml --verbose > svnlog.xml </verbatim> To help you a bit, we give you HTML skeletons for the different parts of the Subversion log. The skeleton of the resulting HTML file should be something like: <verbatim> <html> <head> <title>Subversion Log</title> <link rel="stylesheet" type="text/css" href="svnlog.css"/> </head> <body> .... </body> </html> </verbatim> The skeleton of a logentry: <verbatim> <div class="logentry"> <p> <a name="1111"/> <img src="page_number_24.gif" align="middle"/> <a href="#1111" title="Link to this commit">1111</a> <img src="calendar_24.gif" align="middle" style="margin-left: 15pt"/> 2005-01-03 15:24 <img src="user_24.gif" align="middle" style="margin-left: 15pt"/> username </p> <div class="commitmsg"> <pre width="85"> <code> ... </code> </pre> </div> <table border="0" cellspacing="5"> ... paths ... </table> </div> </verbatim> For every path in the logentry, there should be a table row in the table of the previous skeleton. In the next skeleton for a path, =path=, =previousrevision=, and =thisrevision= should be replaced by their actual values. <verbatim> <tr> <td> <img src="edit_16.gif" title="Modified"/> or <img src="plus_16.gif" title="Added"/> or <img src="delete_16.gif" title="Deleted"/> </td> <td>path</td> <td> <a href="https://svn.cs.uu.nl:12443/repos/test-wiki/path" title="Open file"> <img border="0" src="open_16.gif"/> </a> </td> <td> <a href="https://svn.cs.uu.nl:12443/viewcvs/test-wiki/path" title="Open file in ViewCVS"> <img border="0" src="zoom_16.gif"/> </a> </td> <td> if this path was modified: <a href="https://svn.cs.uu.nl:12443/viewcvs/test-wiki/path?r1=previousrevision&r2=thisrevision&p1=path&p2=path" title="View difference to previous revision in ViewCVS"> <img border="0" src="window_tile_vert_16.gif"/> </a> </td> </tr> </verbatim> One of the tricky parts is the transformation of the date. The problem with the date in the XML input is that is not represented in XML and therefore it is difficult to process. We give you the XSLT code for that, but you will improve this code in the next exercise: <verbatim> <xsl:value-of select="substring(date/text(), 1, 4)"/> <xsl:text>-</xsl:text> <xsl:value-of select="substring(date/text(), 6, 2)"/> <xsl:text>-</xsl:text> <xsl:value-of select="substring(date/text(), 9, 2)"/> <xsl:text> </xsl:text> <xsl:value-of select="substring(date/text(), 12, 2)"/> <xsl:text>:</xsl:text> <xsl:value-of select="substring(date/text(), 15, 2)"/> </verbatim> Another tricky part is the link to the viewcvs page. You need the previous revision number for that. You can do this with the axis =ancestor=. Ask your neighbor, or skip this if you really cannot find out how this works. Tip: it is good style to use recursive calls to separate templates and not explicit control-flow, using for example =for-each=. Try to use separate templates for the modified, added, and deleted images. For this, you have to make a template that matches these specific actions. ---++ Using the EXSLT extensions Of course, the code for the representation of a date is horrible. The type of this date format is one of the XML Schema data types. Fortunately, XSLT is an extensible language and the community has standardized a useful set of XSLT extensions. One of these extensions is the handling of dates and times. To use this extension for dates and times, you have to add the following declarations to the =xsl:stylesheet= element: <verbatim> xmlns:date="http://exslt.org/dates-and-times" extension-element-prefixes="date"> </verbatim> You can now use the functions define in the =date= namespace. They are explained here: * http://www.exslt.org/date/index.html Example: <verbatim> <xsl:value-of select="date:year(date/text())"/> </verbatim> Now change your stylesheet to format the date using these functions (=year=, =month-in-year=, etc). <!-- * Set PREV_SKIN = customtitle * Set CUSTOMHEADTITLE = GW / XSLT Exercise * Set CUSTOMTOPICTITLE = XSLT Exercise -->
Home
People
Development
Resources