Extensible Stylesheet Language (XSL) By Example Tony Wat 9 October 2002.

Extensible Stylesheet Language (XSL) By Example

Tony Wat9 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>

The Result

01.xml 01.xsl

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>....

Second Result

02.xml 02.xsl

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>

Third Result

03.xml 03.xsl

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>

Fourth Result

04.xml 04.xsl

Final Result By completing the XML file The browser will use the XSL to

generate the tables, images, text according to the XML data

05.xml 05.xsl

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

The End

Extensible Stylesheet Language (XSL) By Example Tony Wat 9 October 2002.

Documents

Transcript of Extensible Stylesheet Language (XSL) By Example Tony Wat 9 October 2002.