Dr. Chunbo Chu
Week 3
XMLNot a replacement for HTML.XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is.
HTML was designed to display data, with focus on how data looks.
HTML is about displaying information, while XML is about carrying information.
XML does not DO anything. Was created to structure, store, and transport information.
COMP205 - Survey of Computer Languages
Example<?xml version="1.0" encoding="ISO-8859-1"?><note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body></note>
COMP205 - Survey of Computer Languages
SyntaxTree StructureElements
Empty: <tagname [attr="value" …] />Non-Empty: <tagname [attr="value" …] > stuff </tagname>stuff may be other elements or text or comments -- or
a mixMust Have a Closing TagTags are Case SensitiveMust be Properly NestedMust Have a Root ElementAttribute Values Must be Quoted
<note date="12/11/2007"> <to>Tove</to> <from>Jani</from></note>
COMP205 - Survey of Computer Languages
SyntaxComment
<!-- This is a comment --> Entity References
Some characters have a special meaning in XML.
If you place a character like "<" inside an XML element, it will generate an error because the parser interprets it as the start of a new element.
This will generate an XML error: <message>if salary < 1000 then</message>
To avoid this error, replace the "<" character with an entity reference: <message>if salary < 1000 then</message>
COMP205 - Survey of Computer Languages
Document Tree
COMP205 - Survey of Computer Languages
ExerciseWrite an XML file for a bookstoreLanguage as an attribute of the titleCategory as an attribute of the bookSave your file as: bookstore.xml
Category Title Language Author Year PriceCOOKING Everyday ItalianEn Giada 2005 30.00CHILDREN Harry Potter En Rowling 2005
29.99WEB Learning XML En Erik 2003
39.95
COMP205 - Survey of Computer Languages
XML File<?xml version="1.0" encoding="ISO-8859-1"?><bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="WEB"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book></bookstore>
COMP205 - Survey of Computer Languages
XSLT: XML Stylesheet Language -Transforms
COMP205 - Survey of Computer Languages
Templates XSL Files Generating Text and Attributes Includes The “Pull” Approach
EXtensible Stylesheet LanguageCSS = Style Sheets for HTML
HTML uses predefined tags, and the meaning of each tag is well understood.
The <table> tag in HTML defines a table - and a browser knows how to display it.
Adding styles to HTML elements are simple. Telling a browser to display an element in a special font or color, is easy with CSS.
COMP205 - Survey of Computer Languages
http://www.w3schools.com/xsl/
EXtensible Stylesheet LanguageXSL = Style Sheets for XML
XML does not use predefined tags (we can use any tag-names we like), and therefore the meaning of each tag is not well understood.
A <table> tag could mean an HTML table, a piece of furniture, or something else - and a browser does not know how to display it.
XSL describes how the XML document should be displayed!
COMP205 - Survey of Computer Languages
XSLMore Than a Style Sheet LanguageXSL consists of three parts:
XSLT - a language for transforming XML documents
XPath - a language for navigating in XML documents
XSL-FO - a language for formatting XML documents
COMP205 - Survey of Computer Languages
XSLT – An XML Transform LanguageXSLT is itself an XML language (that is, it
uses tags that meet the XML rules)XSLT is standardized by the W3C:
http://www.w3.org/TR/xsltStands for “XML Stylesheet Language –
Transformations”It’s primary goal is to add presentation
“style” to XML dataFor example, it can convert XML to HTML
It has lots of other uses as well
COMP205 - Survey of Computer Languages
XML TransformsStandard ways to transform XML files
Into other XML filesInto HTML or other visual presentation languages
(for instance, for wireless and other handheld devices)
What features would such a transform language have?
How Does it Work?Uses XPath to define parts of the source document
that should match one or more predefined templates. When a match is found, transform the matching part
of the source document into the result document.
COMP205 - Survey of Computer Languages
BrowsersAll major browsers have support for XML and XSLT.Mozilla Firefox
Firefox 3 supports XML, XSLT, and XPath.Internet Explorer
Internet Explorer 6 supports XML, XSLT, and XPath.Google Chrome
Chrome 1 supports XML, XSLT, and XPath.Opera
Opera 9 supports XML, XSLT, and XPath. Opera 8 supports only XML + CSS.
Apple SafariSafari 3 supports XML and XSLT.
COMP205 - Survey of Computer Languages
TemplatesFundamental idea in XSLT:
For each type of XML tag in the source document Provide a template consisting of the text to
output Parameterize the templates to plug in tag
attribute values, etc. Indicate in the templates where the text
generated by contained tags goes
COMP205 - Survey of Computer Languages
How Can We Define This Transformation? <table border="2">
<tr><th>Course</th><th>Day</th><th>Time</th>
</tr> <tr>
<td>COMP 361</td><td>Wed</td><td>5:45</td>
</tr> <tr>
<td>COMP 360</td><td>Tue</td><td>5:45</td>
</tr></table>
COMP205 - Survey of Computer Languages
<schedule> <course name=“COMP 361”> <day>Wed</day> <time>5:45</time> </course> <course name=“COMP 360”> <day>Tue</day> <time>5:45</time> </course></schedule>
The Transformation Defined in Words
Wherever there is a <schedule> element, Generate a table with “Course”, “Day”, and “Time”
as column headers Look at the content of <schedule>
Wherever there is a <course> element Generate a table row Generate a cell, using the “name” attribute of the
<course> Generate a cell, using a <day> element in the content Generate a cell, using a <time> element in the content
Wherever there is a <day> element Output the text content of the <day> element
Wherever there is a <time> element Output the text content of the <time> element
COMP205 - Survey of Computer Languages
Writing Our Transform Specification in XSLT - 1
For the top element (<schedule>),
Generate a table with “Course”, “Day”, and “Time” as column headers
Process the contents of <schedule> ... </schedule> (i.e., <course> elements)
COMP205 - Survey of Computer Languages
<xsl:template match=“schedule”><table border="2"> <tr>
<th>Course</th> <th>Day</th> <th>Time</th>
</tr> <xsl:apply-templates/></table>
</xsl:template>
Writing Our Transform Specification in XSLT - 2
For each <course> element
Generate a table row Generate a cell, using
the “name” attribute of the <course>
Generate a cell, using a <day> element in the content
Generate a cell, using a <time> element in the content
COMP205 - Survey of Computer Languages
<xsl:template match=“course”> <tr> <td> <xsl:value-of select=“@name” /> </td> <td> <xsl:apply-templates
select=“day”/> </td> <td> <xsl:apply-templates
select=“time”/> </td> </tr></xsl:template>
<course name=“COMP 360”> <day>Tue</day> <time>5:45</time> </course>
Writing Our Transform Specification in XSLT - 3
For each <day> element
Output the text content of the <day> element
For each <time> element
Output the text content of the <time> element
COMP205 - Survey of Computer Languages
<xsl:template match=“day”><xsl:value-of select=“text()” />
</xsl:template><xsl:template match=“time”>
<xsl:value-of select=“text()” /></xsl:template>
Actually, these templates are not needed since there are built-in (default) templates that do the same thing. But it’s a good idea to define them anyway while you're learning XSLT.
The Overall Structure of an XSL File
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:output method="html" />
<!-- the xsl:template elements go here --!>
</xsl:stylesheet>
COMP205 - Survey of Computer Languages
The XSL file: http://cs.franklin.edu/~brownc/461/XML/scheduleTransform.xsl
Demo: http://cs.franklin.edu/~brownc/461/XML/scheduleWithTransform.xml
Specifies that the xsl: prefix is used for XSL Transforms, Version 1.0
Turns on special rules for outputting HTML (because HTML does not follow the XML rules)
View Source to see the XML
The HTML Output Method• <xsl:output method="html" />• Tags in template must follow XML
rules• The HTML Output Method will
convert the output to follow (old) HTML rules
• <br></br> <br>• <img src="…"></img> <img src="…">
• Also, adds an HTML declaration tag.
COMP205 - Survey of Computer Languages
Assigning an XSL File to Your XML File
Add the following processing instruction to your XML file (just after the <?xml ...):
<?xml-stylesheet href="scheduleTransform.xsl" type="text/xsl" ?>
COMP205 - Survey of Computer Languages
Your XSL file
Tells the transform software that it is an XSL transform
(There are other types of “stylesheets”)
Note the ?
More About the <xsl:template> Element
<xsl:template match=“pattern”>The match attribute can be a patternThe pattern language is quite different
from that for JavaScript/PerlIts Goal: Find nodes in a tree defined by
XMLElementsAttributesText blocksComments (yes, even comments)
COMP205 - Survey of Computer Languages
Patterns
• match="abc" – finds all <abc> elements• match="abc/def" – finds all <def> elements
that are children of <abc> elements• match="abc//def" – find all <def> that are
descendants of an <abc>
COMP205 - Survey of Computer Languages
Somewhere under an <abc>, not necessarily direct child elements
The // means roughly “with anything in between”
Patterns for Attributes
Use @ to indicate an attribute valueUse = to indicate equality (not ==)Use […] to "qualify" a matchExample:
match="abc[@name='fred']" Find all <abc> elements whose name
attribute is equal to “fred”
COMP205 - Survey of Computer Languages
Matching a Specific Place in the Hierarchy
match="/aaa/bbb"Find any <bbb> tag that is
under the top level <aaa> tag
COMP205 - Survey of Computer Languages
<aaa name="George">
<bbb option="5" />
<bbb option="8" >
<ccc option="0">
<bbb option="9" />
</ccc>
</aaa>
Example:
/aaa/bbb matches these,
not this
/aaa//bbb matches all the <bbb> tags anywhere under the <aaa> tag
Patterns and XPath
The patterns in XSLT follow the XPath standardsIt support lots of other pattern featuresSee http://www.w3.org/TR/xpath
COMP205 - Survey of Computer Languages
Generating Text Output
<xsl:template match="course"> <tr> <td> <xsl:value-of select="@name"/> </td> <td> <xsl:value-of select="day"/> </td> <td> <xsl:apply-templates select="time"/> </td> </tr> </xsl:template>
COMP205 - Survey of Computer Languages
Inserts the value of the “name” attribute of <course>
Select the child element <day> and insert it’s string value.
The string value of an element is the text in its content.
Because the template for <time> just outputs the value, xsl:value-of and xsl:apply-templates accomplish the same result in this case.
Non xsl: tags are output as-is
Outputting Attributes
<xsl:template match="item"> <xsl:value-of select="@itemID"/> <img src="{@imageURL}" /> Price: <xsl:value-of select="@price"/></xsl:template>
COMP205 - Survey of Computer Languages
{ … } allows you to put an expression inside the quotes in an attribute you are generating
Tags are not allowed inside attributes in XML. Thus, <xsl:value-of> works only for generating text outside of a tag
You cannot write
<img src="<xsl:value-of …>" />
ExerciseWrite an XSLT file that transform your bookstore.xml into an HTML file which displays like this:
Save your XSLT file as: bookstoreTransform.xsl in the same directory as bookstore.xml.Run it in a browser.
COMP205 - Survey of Computer Languages
Variables and Parameters
<xsl:variable name="aName">value</xsl:variable>
<xsl:param name="aName" />
<xsl:value-of select="$aname">
COMP205 - Survey of Computer Languages
Defining
Using
• xsl:variable defines a constant to be used in subsequent or subtending templates
• xsl:param defines a parameter passed in from outside the stylesheet or a parameter passed into a template
Using a Parameter to Select One Item from a List in XML
<xsl:param name="itemid" />
<xsl:output method="html" />
<xsl:template match="item[@id={$itemid]}">
Description: <xsl:value-of select="./description"/>
<br>
Price: <xsl:value-of select="./price"/>
<br><img src="{./imgUrl}">
</xsl:template>
COMP205 - Survey of Computer Languages
Including Other Templates <xsl:include href="url" />
COMP205 - Survey of Computer Languages
URL to another XSL file.
The templates in it are merged into the main XSL file.
Can only be placed as child of the <xsl:stylesheet> tag
Think of <xsl:include> as meaning "include some more templates"
Don't think of <xsl:include> as meaning "include something in the output"
The Pull Approach to XSL
COMP205 - Survey of Computer Languages
An alternative for certain types of problems and certain types of
programmers
NOT ALLOWED IN THE ASSIGNMENT!
The Original, Template-Oriented Description
Wherever there is a <schedule> element, Generate a table with “Course”, “Day”, and “Time”
as column headers Look at the content of <schedule>
Wherever there is a <course> element Generate a table row Generate a cell, using the “name” attribute of the
<course> Generate a cell, using a <day> element in the content Generate a cell, using a <time> element in the content
Wherever there is a <day> element Output the text content of the <day> element
Wherever there is a <time> element Output the text content of the <time> element
COMP205 - Survey of Computer Languages
The “Pull” Approach to Writing XSLTRewording the description of the transform …Generate a table with “Course”, “Day”, and
“Time” as column headersFor each <course> element under a <schedule>
element Generate a table row Generate a cell, using the “name” attribute of the
<course> Generate a cell, using the value of the <day> element
in the content Generate a cell, using the value of the <time> element
in the content
COMP205 - Survey of Computer Languages
More like the JSP/ASP/PHP approach
Example: http://cs.franklin.edu/~brownc/461/XML/scheduleWithPullTransform.xml
http://cs.franklin.edu/~brownc/461/XML/schedulePullTransform.xsl
Summary of the Pull Approach
There is one template (match="/")Its content defines the entire HTML
outputFor substitutions
– <xsl:value-of select="patn"/>Analogous to <%= … %> in JSP
For repeats (iterations) <xsl:for-each select="patn2"> stuff to repeat</xsl:for-each>
Analogous to <% for(k=0; k<N; k++){%>COMP205 - Survey of Computer Languages
“Pulls” the value to substitute
“Pulls” the set of elements to iterate over
http://cs.franklin.edu/~brownc/461\XML\schedulePullTransform.xsl
Push vs. Pull<book>
<title>Beneath the Underdog</title>
<para>In other words, I am three.</para>
<para>"Which one is real?"</para> <para>"They're all real."</para>
</book>
COMP205 - Survey of Computer Languages
Pull<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title> <xsl:value-of select="book/title"/> </title> </head>
<body>
<h1> <xsl:value-of select="book/title"/> </h1>
<xsl:for-each select="book/para">
<p> <xsl:value-of select="."/> </p>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
COMP205 - Survey of Computer Languages
Push<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0"> <xsl:template match="book">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title><xsl:value-of select="book/title"/></title> </head>
<body> <xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="para">
<p> <xsl:apply-templates/> </p>
</xsl:template>
<xsl:template match="title">
<h1> <xsl:apply-templates/> </h1>
</xsl:template>
</xsl:stylesheet>
COMP205 - Survey of Computer Languages
Choosing Your XSL Design Approach Many times, it’s just a matter of personal
coding preferenceUse the “pull” approach
When your XML file’s structure does not match well the structure of the desire HTML
When you prefer a “JSP/ASP/PHP-like” coding style
When you want to use XML information more than once in the output (pull it in multiple times)
Use the template-per-element-type approachWhen particular type of XML information is
formatted the same regardless of context
COMP205 - Survey of Computer Languages
Advanced XSLT – For You to ExploreExpressions: arithmetic, Boolean, and
string operationsAdvanced Patterns: complex conditionals
on values and position within the treeConditionalsSortingModes: switching to a different set of
templates for a sub-tree of XML elementsLots more
COMP205 - Survey of Computer Languages
Formatting – The Companion to XSLT (for you to explore)Formerly known as XSL-FOTags that specify user output at a higher
level than HTMLCan be used to generate HTML or other
language for creating user outputUsed to permit one transform to generate
output for multiple types of devices or uses (e.g., printer friendly alternative pages)
http://www.w3.org/TR/xsl/
COMP205 - Survey of Computer Languages
XSLT ReferencesWeb Programming (course text) Chap. 3, 4.COMP 203 Key PointsW3C Specification for XSLT
http://www.w3.org/TR/xslt W3C Specification for Xpath, the patterns
used in XSLT:http://www.w3.org/TR/xpath
Online tutorialhttp://www.xml.com/pub/a/2000/08/holman/
index.html
COMP205 - Survey of Computer Languages
XSLT ReferencesWeb Programming (course text) Chap. 3, 4.COMP 203 Key PointsW3C Specification for XSLT
http://www.w3.org/TR/xslt W3C Specification for Xpath, the patterns
used in XSLT:http://www.w3.org/TR/xpath
Online tutorialhttp://www.xml.com/pub/a/2000/08/holman/
index.html
COMP205 - Survey of Computer Languages
Top Related