1 / 22

Extensible Stylesheet Language (XSL) By Example

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

sabina
Download Presentation

Extensible Stylesheet Language (XSL) By Example

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Outline • XSL Basics • Real-life Example • Simple Example • Conclusion

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

  4. Flow Diagram • XML store data • XSL store layout information XSL Processor

  5. Real-life Example • i-view web client

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

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

  8. Starting with Simple XML <?xml version="1.0"?> <students> <section id="PhD"> <name>Current Ph.D. Students</name> </section> </students>

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

  10. The Result

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

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

  13. Second Result

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

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

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

  17. Third Result

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

  19. Fourth Result

  20. Final Result • By completing the XML file • The browser will use the XSL to generate the tables, images, text according to the XML data

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

  22. The End

More Related