220 likes | 347 Views
Extensible Stylesheet Language (XSL) By Example. Tony Wat 9 October 2002. Outline. XSL Basics Real-life Example Simple Example Conclusion. XSL Basics. XSL is a language for expressing style sheets
E N D
Extensible Stylesheet Language (XSL) By Example Tony Wat 9 October 2002
Outline • XSL Basics • Real-life Example • Simple Example • Conclusion
XSL Basics • XSL is a language for expressing style sheets • Styling requires a source XML document, containing the information that the style sheet will display and the style sheet itself which describes how to display a document of a given type
Flow Diagram • XML store data • XSL store layout information XSL Processor
Real-life Example • i-view web client
i-view web client • Based on XML data • Browser perform the XSL translation and display the result • Can use different XSL files for different layouts
Simple Example • Data can be expressed in structural form. • XSL perform the generation of layout based on the data • This example only applies to XSL Transformation by Internet Explorer
Starting with Simple XML <?xml version="1.0"?> <students> <section id="PhD"> <name>Current Ph.D. Students</name> </section> </students>
A simple XSL <?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="/students"> <html> <head> <title>My Fellow Students</title> <base href="http://www.cse.cuhk.edu.hk/~lyu/"/> </head> <body background="images/background/turtex.gif"> </body> </html> </xsl:template> </xsl:stylesheet>
XML Data <students> <section id="PhD"> <name>Current Ph.D. Students</name> <group> <person> <name>AAAA BBBB CCCC</name> <image>abc.jpg</image> <homepage>http://www.cse.cuhk.edu.hk/~abc/</homepage> </person> <publications> <category>Presentation</category> <item>This is a topic</item> </publications> </group> <group> …… </group> </section> </students>
Second XSL <?xml version="1.0"?> .... <xsl:template match="/students"> .... <h1>My Fellow Students</h1> <ul> <xsl:apply-templates select="section“/> </ul> .... </xsl:template> <xsl:template match="section"> <li><a><xsl:attribute name="href"> #<xsl:value-of select="@id"/></xsl:attribute> <xsl:value-of select="name"/></a></li> </xsl:template> ....
Third XSL <body background="images/background/turtex.gif"> <h1>My Fellow Students</h1> <ul> <xsl:apply-templates select="section"> <xsl:with-param name="area" select="'links'"/> </xsl:apply-templates> </ul> <xsl:apply-templates select="section"> <xsl:with-param name="area" select="'students'"/> </xsl:apply-templates> </body> .....
Third XSL (2) <xsl:template match="section"> <xsl:param name="area" select="'unknown'"/> <xsl:choose> <xsl:when test="$area='links'"> <li><a><xsl:attribute name="href">#<xsl:value-of select="@id"/></xsl:attribute><xsl:value-of select="name"/></a></li> </xsl:when> <xsl:when test="$area='students'"> <a><xsl:attribute name="name"><xsl:value-of select="@id"/></xsl:attribute></a> <h2><xsl:value-of select="name"/></h2> <table border="1" cellpadding="0" cellspacing="0" width="600"> <xsl:apply-templates select="group"/> </table> </xsl:when> </xsl:choose> </xsl:template>
Third XSL (3) <xsl:template match="group"> <tr><td width="120" valign="top"> <xsl:for-each select="person"> <img border="0" width="120"> <xsl:attribute name="src"> <xsl:value-of select="image"/> </xsl:attribute> </img><br/> </xsl:for-each> </td></tr> </xsl:template>
Fourth XSL <xsl:choose> <xsl:when test="homepage"> <a><xsl:attribute name="href"> <xsl:value-of select="homepage"/></xsl:attribute> <xsl:value-of select="name"/></a><br/><br/> </xsl:when> <xsl:otherwise> <xsl:value-of select="name"/><br/><br/> </xsl:otherwise> </xsl:choose> <xsl:for-each select="publications"> <b><xsl:value-of select="category"/></b><br/> <ul> <xsl:for-each select="item"> <li><xsl:copy-of select="."/></li> </xsl:for-each> </ul> </xsl:for-each>
Final Result • By completing the XML file • The browser will use the XSL to generate the tables, images, text according to the XML data
Conclusion • This example may not be a good situation to apply XSL • There are user-friendly web page editing tools for managing such information • However, website of large amount of heterogeneous data requiring a consistent layout maybe of advantage • e.g. i-view web client