Dr. Chunbo Chu Week 3. XML Not a replacement for HTML. XML and HTML were designed with different goals: XML was designed to transport and store data,

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>


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>


SyntaxComment

 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>


Document Tree


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


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>


XSLT: XML Stylesheet Language -Transforms


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.


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!


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


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


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.


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.


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


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>


<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


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)


<xsl:template match=“schedule”><table border="2"> <tr>

<th>Course</th> <th>Day</th> <th>Time</th>

</tr> <xsl:apply-templates/></table>

</xsl:template>


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


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


For each <day> element

Output the text content of the <day> element

For each <time> element

Output the text content of the <time> element


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


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.


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


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)


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>


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”


Matching a Specific Place in the Hierarchy

match="/aaa/bbb"Find any <bbb> tag that is

under the top level <aaa> tag


<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


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>


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>


{ … } 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.


Variables and Parameters

<xsl:variable name="aName">value</xsl:variable>

<xsl:param name="aName" />

<xsl:value-of select="$aname">


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>


Including Other Templates <xsl:include href="url" />


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


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


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


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>


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>


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>


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


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


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/


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


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

Documents

Dr. Chunbo Chu Week 3. XML Not a replacement for HTML. XML and HTML were designed with different goals: XML was designed to transport and store data,