eca 228 internet/intranet design i xslt example. eca 228 internet/intranet design i 2 css...

ECA 228 Internet/Intranet Design I

XSLT Example

ECA 228 Internet/Intranet Design I2

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


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 )


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


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


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


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

8

XPath node tree: breed_report.xmlroot (/)

element: author

element: date

text: Michael Barath

element: breed_report

processing instructions: xml-stylesheet type=“text/xsl” href=“breed_report.xsl”

text: 24 November, 2004

element: time

text: 08:13

element: breed

element: name

attribute: img = “papillon.jpg”

text: Papillon

element: . . .


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


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>


XPath cont …

XPath provides syntax to reference nodes– absolute

– relative relative to context node

– any path beginning with a slash ( / ) is absolute

standard/general_appearance

/breed_report/breed/standard/general_appearance


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/text( )

/breed_report/breed/name/@img


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


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>



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



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


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


Output Method cont …

attribute include– method– version– encoding– omit-xml-declaration– indent– media-type

<xsl:output method=“html” version=“4.0” />


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


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>


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>


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>


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 =“name” >

<xsl:template match =“/” >

<xsl:value-of select=“.” />



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





</head><body>


<xsl:apply-templates select="breed_report/breed/name" /></body></html>

</xsl:template>

<xsl:template match =“name” ><h3><xsl:value-of select=“.” /></h3></xsl-template>



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>



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


<xsl:template match =“name” ><h3><xsl:value-of select=“.” /></h3><xsl:apply-template select=“../group” /></xsl-template>




</head><body>


<xsl:apply-templates select="breed_report/breed/name" /></body></html>

</xsl:template>

<xsl:template match =“group” ><h4><xsl:value-of select=“.” /></h4></xsl-template>



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>


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


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>


Conditionals cont …

<xsl:if test="year_2003/@number < year_2002/@number"><img src="images/down.gif" width="32" height="20" />

</xsl:if>

<rank> <year_2003 year="2003" rank="2" number="52530" /> <year_2002 year="2002" rank="2" number="56124" />

</rank>


Conditional Operators

OPERATOR REPRESENTS

= equal to

!= not equal to

< less than

< = less than or equal to

> greater than

> = greater than or equal to



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:otherwise ><xsl:when >



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


Sorting

by default, nodes are processed in the order in which they appear in the XML document

sorting allows you to order them

notice the element does not have a separate closing tag

can be used inside <xsl:template> or <xsl:for-each>

<xsl:sort />


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:sort select="." />

</xsl:apply-templates>

<xsl:apply-templates select="breed_report/breed/name" />


Sorting cont …

<xsl:sort /> uses several attributes to control sorting

<xsl:sort /> attributes

select = “expression”

data-type = “text | number”

order = “ascending | descending”

case-order = “upper-first | lower-first”


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 document

will cause errors

<a href=“ <xsl:value-of select=“../club_link” /> ” />Link</a>

<img src=“images/ <xsl:value-of select=“@img” /> ” />


Creating Elements cont …

likewise, using character entities such as < or "

will return unexpected results

<a href=" <xsl:value-of select=“../club_link” /> &quot />Link</a>

<img src="images/ <xsl:value-of select=“@img” /> " />



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



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>



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>



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 xslt example. eca 228 internet/intranet design i 2 css...

Documents