1 / 44

ECA 228 Internet/Intranet Design I

Learn about the limitations of CSS in XSLT, including the inability to modify content, insert additional text, and display attribute values. Discover how to create XSLT stylesheets and use XPath to reference nodes in an XML document. Explore the use of root templates and literal result elements in XSLT.

dkennedy
Download Presentation

ECA 228 Internet/Intranet Design I

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. ECA 228 Internet/Intranet Design I XSLT Example

  2. CSS Limitations • cannot modify content • cannot insert additional text • does not display value of attributes • difficult to combine content from more than one document • elements can only be formatted one way ECA 228 Internet/Intranet Design I

  3. XSL • W3C began development in 1998 • combination of 3 separate languages • XSLT: transform an XML document into other kinds of documents • XPath: provides a path to XML elements • XSL-FO: implement page layout and design( not yet supported ) ECA 228 Internet/Intranet Design I

  4. XSLT • create an XSLT stylesheet • XSLT is an XML document • name it with .xsl extension • converts a source document to a result document • transformation on client side or server side ECA 228 Internet/Intranet Design I

  5. XSLT cont … • very few browsers have built-in support for XSLT • IE5x and NN6 do not fully support the W3C specs • IE6 and NN7 do support the specs • client-side processors • XML Spy • MSXML • Saxon • Xalan • processors transform XML into actual HTML file ECA 228 Internet/Intranet Design I

  6. XSLT cont … • link the XML file to the XSLT stylesheet • root element of XSLT stylesheet is either <stylesheet> or <transform> • include in the W3C namespace <?xml-stylesheet type=“text/xsl” href=“breed_report.xsl” ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> ECA 228 Internet/Intranet Design I

  7. XPath • each component of an XML document is called a node • the entire structure is called a node tree • node tree consists of • the XML document itself • comments • processing instructions • namespaces • elements • element text • element attributes ECA 228 Internet/Intranet Design I

  8. XPath node tree: breed_report.xml root (/) processing instructions: xml-stylesheet type=“text/xsl” href=“breed_report.xsl” element: breed_report element: author text: Michael Barath element: date text: 24 November, 2004 element: time text: 08:13 element: breed element: name attribute: img = “papillon.jpg” text: Papillon element: . . .

  9. XPath cont … • root node ( / ) • root node refers to the XML document itself • not the same as the root element of the XML doc • relationships between nodes • parent: a node that contains another node • child: node contained by a parent • sibling: nodes that share a common parent • descendent: any node found below another • ancestor: any node above another node ECA 228 Internet/Intranet Design I

  10. XPath cont … • nodes are distinguished by the object they refer to • element node <name img=“papillon.jpg” >Papillon</name> • attribute node <name img=“papillon.jpg” >Papillon</name> • text node <name img=“papillon.jpg” >Papillon</name> ECA 228 Internet/Intranet Design I

  11. XPath cont … • XPath provides syntax to reference nodes • absolute • relative • relative to context node • any path beginning with a slash ( / ) is absolute /breed_report/breed/standard/general_appearance standard/general_appearance ECA 228 Internet/Intranet Design I

  12. XPath cont … • Attribute nodes • not technically children of parent argument • syntax uses at ( @ ) sign • Text node • the text contained in an element • syntax uses text( ) /breed_report/breed/name/@img /breed_report/breed/name/text( ) ECA 228 Internet/Intranet Design I

  13. Root Template • template • collection of XSLT elements which tell processor how to transform source document • root template • sets up initial code for the result document • place the root template at the top of the XSLT document ECA 228 Internet/Intranet Design I

  14. Root Template cont … • template contains 2 types of content • XSLT elements • elements which are part of the XSLT namespace • send commands to the processor • literal result elements • text sent to result document but not acted on by processor, eg, all HTML tags <xml:value-of select=“name” /> <h1>Breed Results</h1> ECA 228 Internet/Intranet Design I

  15. Root Template cont … • literal result elements • all HTML tags in XSLT document are literal result elements • to use HTML in result document simply add them to root template • any tag which does not start with the xsl namespace prefix ( xsl: ) are treated as literals • all HTML tags must follow strict XML syntax rules ECA 228 Internet/Intranet Design I

  16. Root Template cont … <xsl:template match="/"> <html> <head> <title>AKC Breed Report</title> <link rel="stylesheet" type="text/css" href="breed_report.css" /> </head> <body> <h1 class="title">AKC Breed Report</h1> <h2 class="title">Information by breed</h2> </body> </html> </xsl:template> ECA 228 Internet/Intranet Design I

  17. Output Method • most processors output result document as HTML if <html> tag is present in code • not part of the standard • to explicitly define output type use the element <xsl:output attributes /> • formats • html • xml • text ECA 228 Internet/Intranet Design I

  18. Output Method cont … • attribute include • method • version • encoding • omit-xml-declaration • indent • media-type <xsl:output method=“html” version=“4.0” /> ECA 228 Internet/Intranet Design I

  19. Transforming Source Document • 2 ways to view result document • view in browser that contains compliant XSLT processor • use a processor that generates separate HTML file • source will no longer be XML, but HTML • processors: • XML Spy • Saxon • Apache Xalan • etc ECA 228 Internet/Intranet Design I

  20. Inserting Node Value • <xsl:value-of select=“ XPath expression ” /> • “select” attribute takes an XPath expression to identify the node ( matches only the first node ) Last Updated: <xsl:value-of select=“breed_report/date” /> at <xsl:value-of select=“breed_report/time” /> <h3><xsl:value-of select=“breed_report/breed/name” /></h3> ECA 228 Internet/Intranet Design I

  21. Processing Batch of Nodes • to process more than one node • note that the content node has changed from root to “breed_report/breed” • the value of the “select” attribute changes to “name” <xsl:for-each select =“breed_report/breed” ><h3><xsl:value-of select=“name” /></h3></xsl:for-each> ECA 228 Internet/Intranet Design I

  22. Applying a Template • rather than using <xsl:for-each> it is often more efficient to create a template to apply to nodes repeated throughout the document • a template to apply to all <name> nodes <xsl:template match =“name” ><h3><xsl:value-of select=“.” /></h3></xsl:template> ECA 228 Internet/Intranet Design I

  23. Applying a Template cont … • root template: • “name” template • the content node has changed from “breed_report/breed” to “name” • value of select attribute changes to dot ( . ) <xsl:template match =“/” > <xsl:template match =“name” > <xsl:value-of select=“.” /> ECA 228 Internet/Intranet Design I

  24. Applying a Template cont … • to use the “name” template insert the following <xsl:apply-template> where it is to be applied, ie, from inside the root template • the “name” template will be applied to every <name> node in the document • the output from the “name” template will be placed in the result document at the point where <xsl:apply-template> references the template <xsl:apply-template select =“breed_report/breed/name” > ECA 228 Internet/Intranet Design I

  25. Applying a Template cont … <xsl:template match="/"> <html> <head> <title>AKC Breed Report</title> <link rel="stylesheet" type="text/css" href="breed_report.css" /> </head> <body> <h1 class="title">AKC Breed Report</h1> <h2 class="title">Information by breed</h2> <xsl:apply-templates select="breed_report/breed/name" /> </body> </html> </xsl:template> <xsl:template match =“name” ><h3><xsl:value-of select=“.” /></h3></xsl-template> ECA 228 Internet/Intranet Design I

  26. Applying a Template cont … • one advantage to using templates is breaking up the source nodes into manageable pieces • create a template to process “group” nodes <xsl:template match =“group” ><h4>Group: <xsl:value-of select=“.” /></h4></xsl:template> ECA 228 Internet/Intranet Design I

  27. Applying a Template cont … • apply the template from within the name template • because this template is being applied from within the name template, not the root template, “name” is now the context node • notice the XPath expression XPath uses ../ to move up one level, relative to the context node <xsl:apply-template select =“../group” > ECA 228 Internet/Intranet Design I

  28. Applying a Template cont … <xsl:template match="/"> <html> <head> <title>AKC Breed Report</title> <link rel="stylesheet" type="text/css" href="breed_report.css" /> </head> <body> <h1 class="title">AKC Breed Report</h1> <h2 class="title">Information by breed</h2> <xsl:apply-templates select="breed_report/breed/name" /> </body> </html> </xsl:template> <xsl:template match =“name” ><h3><xsl:value-of select=“.” /></h3><xsl:apply-template select=“../group” /></xsl-template> <xsl:template match =“group” ><h4><xsl:value-of select=“.” /></h4></xsl-template> ECA 228 Internet/Intranet Design I

  29. Applying a Template cont … • continue applying templates as needed to insert content from the source document into the result document <xsl:template match="standard"> <h4 class="standard">General Appearance:</h4> <xsl:value-of select="general_appearance" /> <h4 class="standard">Size:</h4> <xsl:value-of select=“size" /> <h4 class="standard">Head:</h4> <xsl:value-of select=“head" /></xsl:template> ECA 228 Internet/Intranet Design I

  30. Attribute nodes • XPath reference to reference attribute values uses the at sign ( @ ) <rank> <year_2003 year="2003" rank="2" number="52530" /> <year_2002 year="2002" rank="2" number="56124" /> </rank> <xsl:value-of select =“rank/year_2003/@year” ><xsl:value-of select =“rank/year_2003/@rank” ><xsl:value-of select =“rank/year_2003/@number” > ECA 228 Internet/Intranet Design I

  31. Conditionals • process nodes only if certain conditions exist • equal to a certain word • less than or greater than a particular value • to run a conditional test against the content of a node <xsl:if test=“expression” > …run code if condition is met</xsl:if> ECA 228 Internet/Intranet Design I

  32. Conditionals cont … <rank> <year_2003 year="2003" rank="2" number="52530" /> <year_2002 year="2002" rank="2" number="56124" /> </rank> <xsl:if test="year_2003/@number &lt; year_2002/@number"> <img src="images/down.gif" width="32" height="20" /> </xsl:if> ECA 228 Internet/Intranet Design I

  33. Conditional Operators ECA 228 Internet/Intranet Design I

  34. Conditionals cont … • xsl:if allows for only one condition to be tested • to test for several conditions • nested inside xsl:choose, use series of xsl:when to define more than one condition • use as many xsl:when elements as necessary • to designate default processing, use xsl:otherwise <xsl:choose > <xsl:when > <xsl:otherwise > ECA 228 Internet/Intranet Design I

  35. Conditionals cont … <xsl:choose> <xsl:when test="year_2003/@rank > year_2002/@rank"> <img src="images/up.gif" width="32" height="20" </xsl:when> <xsl:when test="year_2003/@rank &lt; year_2002/@rank"> <img src="images/down.gif" width="32" height="20" /> </xsl:when> <xsl:otherwise> <img src="images/same.gif" width="32" height="20" /> </xsl:otherwise> </xsl:choose> ECA 228 Internet/Intranet Design I

  36. Sorting • by default, nodes are processed in the order in which they appear in the XML document • sorting allows you to order themnotice the element does not have a separate closing tag • can be used inside <xsl:template> or <xsl:for-each> <xsl:sort /> ECA 228 Internet/Intranet Design I

  37. Sorting cont … • <xsl:sort> uses the select attribute which indicates the node to sort on • change original <xsl:apply-templates /> <xsl:sort select=“.” /> <xsl:apply-templates select="breed_report/breed/name" /> <xsl:apply-templates select="breed_report/breed/name"> <xsl:sort select="." /> </xsl:apply-templates> ECA 228 Internet/Intranet Design I

  38. Sorting cont … • <xsl:sort /> uses several attributes to control sorting ECA 228 Internet/Intranet Design I

  39. Creating Elements • if links or paths to images are stored in an XML node, an additional step is required to add them to the result documentwill cause errors <a href=“ <xsl:value-of select=“../club_link” /> ” />Link</a> <img src=“images/ <xsl:value-of select=“@img” /> ” /> ECA 228 Internet/Intranet Design I

  40. Creating Elements cont … • likewise, using character entities such as &lt; or &quot; will return unexpected results &lt;a href=&quot; <xsl:value-of select=“../club_link” /> &quot />Link&lt;/a> &lt;img src=&quot;images/ <xsl:value-of select=“@img” /> &quot; /> ECA 228 Internet/Intranet Design I

  41. Creating Elements cont … • <xsl:element> • takes an attribute, “name”, which has as a value the type of HTML tag to create • <xsl:attribute> • takes an attribute, “name”, which has as a value the name of HTML attribute to create <xsl:element name=“img” <xsl:attribute name=“src” ECA 228 Internet/Intranet Design I

  42. Creating Elements cont … • to create an <img> tag with name/@img as the src, and other appropriate values for other attributes • notice the value of the “alt” attribute is set to value of breed_report/breed/name, which was already used earlier in an <h3> tag <xsl:element name="img"> <xsl:attribute name="src">images/<xsl:value-of select="@img" /></xsl:attribute> <xsl:attribute name="alt"><xsl:value-of select="." /></xsl:attribute> <xsl:attribute name="width">100</xsl:attribute> <xsl:attribute name="height">100</xsl:attribute> <xsl:attribute name="class">breed_image</xsl:attribute> </xsl:element> ECA 228 Internet/Intranet Design I

  43. Creating Elements cont … • to create links with an <a> tag, <club_link> as the href • the literal “Link to National Club” becomes the actual link in the result document <xsl:element name="a"> <xsl:attribute name="href"> <xsl:value-of select="../club_link" /> </xsl:attribute> Link to National Club </xsl:element> ECA 228 Internet/Intranet Design I

  44. Creating Elements cont … • to create HTML comments which are inserted into the result document <xsl:comment> This is a comment </xsl:comment> ECA 228 Internet/Intranet Design I

More Related