Transcript Week 12 – XML Part II

Week 12 – XML Part II
XHTML -- Introduction
 XSLT -- XSL Transforms

1
XHTML

HTML that is well-formed XML
2
HTML Isn’t XMLCompatible


Leaves HTML out of the burgeoning set
of tools and other technology
surrounding XML.
Complicates the use of stylesheets and
transforms.
COMP/DCOM 461 – CWB
3
XHTML – An XMLCompatible Version of HTML

Strategy: 3 flavors




A Strict Flavor cleanly separates structural markup
and layout markup
For compatibility with some of the older browsers,
a Transitional Flavor defines a minimal
modification of HTML that is XML-compatible
The Frameset Flavor has support for HTML frames
Spec: http://www.w3.org/TR/xhtml1/

See Appendix C for guidelines for writing
Transitional XHTML that works with many existing
browsers (see next slide)
COMP/DCOM 461 – CWB
4
Writing HTML That Is
Well-Formed XML
1.
2.
3.
4.
5.
6.
7.
8.
Compatibility
with old
browsers
Empty elements: end the tag with /> but leave a space in front of the /.
Example: <img src=“whatever” />
Don’t omit the closing tags where they are optional in HTML (But, use
<p> </p> -- don’t use <p /> )
Use external style sheets and scripts because symbols like < and &
are a problem if defined in-line – the <!– comment trick won’t always work
Avoid line breaks inside attribute values.
Use both name and id attributes to make identifiers
Boolean attributes such as checked must have values equal to the
attribute name (e.g., checked="checked")
Use lower case tag names and attribute names.
Watch &, especially in URLs: href="frobbly?id=345&amp;color=purple"
Other details as listed in Appendix C of the XHTML spec:
http://www.w3.org/TR/xhtml1/#guidelines
COMP/DCOM 461 – CWB
5
XSLT: XML Stylesheet
Language -Transforms





Templates
XSL Files
Generating Text and Attributes
Includes
Tips for the Homework
6
XML Transforms

Standard ways to transform XML files



Into other XML files
Into HTML or other visual presentation
languages (for instance, for wireless and
other handheld devices)
What features would such a transform
language have?
COMP/DCOM 461 – CWB
7
How Can We Define This
Transformation?
<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>
<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>Wed</td>
<td>5:45</td>
</tr>
</table>
COMP/DCOM 461 – CWB
8
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





a
a
a
a
table row
cell, using the “name” attribute of the <course>
cell, using a <day> element in the content
cell, using a <time> element in the content
Wherever there is a <day> element


Generate
Generate
Generate
Generate
Output the text content of the <day> element
Wherever there is a <time> element

Output the text content of the <time> element
COMP/DCOM 461 – CWB
9
XSLT – An XML Transform
Language


XSLT 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/xslt


Stands for “XML Stylesheet Language –
Transformations”
It’s primary goal is to add presentation “style”
to XML data


For example, it can convert XML to HTML
It has lots of other uses as well
COMP/DCOM 461 – CWB
10
Templates

Fundamental 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
COMP/DCOM 461 – CWB
11
Writing Our Transform
Specification in XSLT - 1
<xsl:template match=“schedule”>
<table border="2">
<tr>
Generate a table
<th>Course</th>
with “Course”,
<th>Day</th>
“Day”, and
<th>Time</th>
“Time” as
</tr>
column headers
<xsl:apply-templates/>
Look at the
</table>
content of
</xsl:template>
For the top element
(<schedule>),


<schedule>
COMP/DCOM 461 – CWB
12
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
<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>
COMP/DCOM 461 – CWB
13
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
<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
COMP/DCOM 461 – CWBwhile learning XSLT.
14
The Overall Structure of
that the xsl:
an XSL File Specifies
prefix is used for XSL
Transforms, Version 1.0
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:output method="html" />
Turns on special rules for
outputting HTML (because
HTML does not follow the
XML rules)
<!-- 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
View Source to see the XML
COMP/DCOM 461 – CWB
15
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 HTML rules



<br></br>  <br>
<img src="…"></img>  <img src="…">
COMP/DCOM 461 – CWB
16
Assigning an XSL File to
Your XML File
Add the following tag to your XML file:
<?xml-stylesheet
href="scheduleTransform.xsl"
type="text/xsl" ?>
Tells the transform
software that it is an XSL
transform
Your XSL
file
Note the ?
(There are other types of
“stylesheets”)
COMP/DCOM 461 – CWB
17
More About the
<xsl:template> Element
<xsl:template match=“pattern”>
 The match attribute can be a pattern
 The pattern language is quite different from
that for JavaScript/Perl
 Its Goal: Find nodes in a tree defined by XML




Elements
Attributes
Text blocks
Comments (yes, even comments)
COMP/DCOM 461 – CWB
18
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”
COMP/DCOM 461 – CWB
19
Patterns for Attributes




Use @ to indicate an attribute value
Use = to indicate equality (not ==)
Use […] to "qualify" a match
Example:
match=“abc[@name=‘fred’]”
 Find all <abc> elements whose name
attribute is equal to “fred”
COMP/DCOM 461 – CWB
20
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" />
Example:
<bbb option="8" >
/aaa/bbb matches these,
<ccc suboption="0">
not this
<bbb option="9" />
/aaa//bbb matches all the
<bbb> tags somewhere
under the <aaa> tag
</ccc>
</aaa>
COMP/DCOM 461 – CWB
21
Patterns and XPath

The patterns in XSLT follow the XPath
standards


It support lots of other pattern features
See http://www.w3.org/TR/xpath
COMP/DCOM 461 – CWB
22
Generating Text Output
Non xsl: tags are
<xsl:template match="course">
output as-is
<tr>
Inserts the value
<td>
of the “name”
attribute of
<xsl:value-of select="@name"/>
<course>
</td>
<td>
Select the child element
<xsl:value-of select="day"/>
<day> and insert it’s
</td>
string value.
<td>
<xsl:apply-templates
The string value of an
select="time"/>
element is the text in its
</td>
content.
</tr>
</xsl:template>
Because the template for <time> just
outputs the value, xsl:value-of and xsl:applytemplates accomplish the same result in this
COMP/DCOM 461 – CWB
23
case.
Outputting Attributes
Tags are not allowed inside attributes in XML. Thus, <xsl:valueof> works only for generating text outside of a tag
You cannot write
<xsl:template match=“item”>
<img src="<xsl:value-of …>" />
<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
COMP/DCOM 461 – CWB
24
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
COMP/DCOM 461 – CWB
25
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>
COMP/DCOM 461 – CWB
26
Including Other
Templates
<xsl:include href="url" />
Can only be placed as
child of the
<xsl:stylesheet> tag
URL to another XSL file.
The templates in it are merged into the
main XSL file.
Think of <xsl:include> as meaning "include some more templates"
Don't think of <xsl:include> as meaning "include something in the output"
COMP/DCOM 461 – CWB
27
The Pull Approach to XSL
An alternative for certain types of
problems and certain types of
programmers
28
The Original, Templateoriented 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





a
a
a
a
table row
cell, using the “name” attribute of the <course>
cell, using a <day> element in the content
cell, using a <time> element in the content
Wherever there is a <day> element


Generate
Generate
Generate
Generate
Output the text content of the <day> element
Wherever there is a <time> element

Output the text content of the <time> element
COMP/DCOM 461 – CWB
29
The “Pull” Approach to
More like the
Writing XSLT
JSP approach
Rewording the description of the transform …
 Generate a table with “Course”, “Day”, and “Time” as
column headers
 For 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
Example:
http://cs.franklin.edu/~brownc/461\XML\scheduleWithPullTransform.xml
http://cs.franklin.edu/~brownc/461\XML\schedulePullTransform.xsl
COMP/DCOM 461 – CWB
30
Summary of the Pull
Approach



There is one template (match=“/”)
Its content defines the entire HTML output
For substitutions



<xsl:value-of select=“patn”/>
Analogous to <%= … %> in JSP
For repeats (iterations)


<xsl:for-each select=“patn2”>
stuff to repeat
</xsl:for-each>
“Pulls” the value
to substitute
“Pulls” the set
of elements to
iterate over
Analogous to <% for(k=0; k<N; k++){%>
http://cs.franklin.edu/~brownc/461\XML\schedulePullTransform.xsl
COMP/DCOM 461 – CWB
31
Choosing Your XSL
Design Approach


Many times, it’s just a matter of personal
coding preference
Use the “pull” approach




When your XML file’s structure does not match
well the structure of the desire HTML
When you prefer a “JSP 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 approach

When particular type of XML information is
formatted the same regardless of context
COMP/DCOM 461 – CWB
32
Implicit Stylesheets –
XHTML Files with XSLT
Embedded


Supplemental
information for
COMP 461:
used in the online tutorial
May be used when there is just one
<xsl:template> tag, as in the “pull” approach
Instead of <xsl:stylesheet> and
<xsl:template> tags, use XSL attributes in the
top-level HTML tag
<html xmlns:xsl=http://www.w3.org/1999/XSL/Transform
xsl:version="1.0">

And <xsl:for-each> tags to pull in the XML data
Example: http://www.xml.com/pub/a/2000/08/holman/s2_1.html?page=2 (mid-page)
COMP/DCOM 461 – CWB
33
Advanced XSLT – For You
to Explore






Expressions: arithmetic, Boolean, and string
operations
Advanced Patterns: complex conditionals on
values and position within the tree
Conditionals
Sorting
Modes: switching to a different set of
templates for a sub-tree of XML elements
Lots more
COMP/DCOM 461 – CWB
34
Formatting – The Companion
to XSLT (for you to explore)





Formerly known as XSL-FO
Tags that specify user output at a higher level
than HTML
Can be used to generate HTML or other
language for creating user output
Used 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/
COMP/DCOM 461 – CWB
35
XSLT References

W3C 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 tutorial
http://www.xml.com/pub/a/2000/08/holman/index.html
 Note: some examples use the implicit form of
stylesheet
COMP/DCOM 461 – CWB
36
Using Jakarta XTags to Perform XSL
Transforms in JSP
37
XSL in JSP
Browser
Controller
Servlet
JSP
XSL Transform
XML
COMP/DCOM 461 – CWB
XSL
38
XTags for XSL in JSP
Declare
use of
XTags
<%@ taglib
uri="http://jakarta.apache.org/taglibs/xtags-1.0"
prefix="xtags" %>
<% String item=
(String)request.getAttribute("itemid"); %>
Stuff before the transform<br>
<xtags:style
Invoke style
xml="xml/scheduleWithTransform.xml"
tag to get
xsl="xml/scheduleTransformWithParam.xsl"
transformed
outputMethod="html" >
XML
<xtags:param name="itemid" value="<%=item%>" />
</xtags:style>
Pass a
<br>Stuff after the transform.
parameter to
the transform
COMP/DCOM 461 – CWB
39
XSL for Catalog Detail
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
Declare parameter itemid, passed in from tag
<xsl:param name="itemid" />
<xsl:output method="html" />
Apply templates to contents of <catalog>
<xsl:template match="catalog">
<xsl:apply-templates />
Match on desired <item> element
</xsl:template>
<xsl:template match='item[@id=$itemid]'>
Description : <xsl:value-of select="./description"/>
Since output method is "html", this will become just <br>
<br></br>
Price: <xsl:value-of select="./price"/>
<br></br><img src="{./imgUrl}"></img>
</xsl:template>
Empty template to suppress
Template to
<xsl:template match="item">
default behavior for other
generate detailed
</xsl:template>
<item> elements
description
</xsl:stylesheet>
COMP/DCOM 461 – CWB
40
XSL in JSP
XSL Parameter
Browser
JSP
Controller
Servlet
Request
Context
xtags:style
tag
itemid
XSL Transform
XML
itemid
COMP/DCOM 461 – CWB
XSL
41
XSL Tips

Including Javascript:


These are
standard XML
quoting tags.
Use the src attribute of the <script> tag to
avoid potential problems
Or you may embed the script in the CDATA
quotes:
<![CDATA[
function f() { if(a < b ) c = d; }
]]>
The < would
otherwise look like
the start of a tag.
COMP/DCOM 461 – CWB
42
XSL Tips
Recall: XSL included
files must contain
templates
Including HTML from another file:
 Use <xsl:import> or <xsl:include> tag





The included material is an XSL file defining a
named template containing the desired HTML
Use the import/include tags only at the top level:
not inside a template
Call the imported, named template within another
template using <xsl:call-template>
Be sure the included HTML is well-formed XML!
Example:
http://cs.franklin.edu/~brownc/461/XML/scheduleWithInclud
e.xml
COMP/DCOM 461 – CWB
43
XSL Tip
Note regarding previous slide:
 When invoking XSL from JSP, it is better
to include untransformed HTML from
JSP than from within the XSL file.
COMP/DCOM 461 – CWB
44
HTML Code in XSLT


HTML code in XSLT templates must be
well-formed XML
Use the XHTML rules …
COMP/DCOM 461 – CWB
45
Writing HTML That Is
Well-Formed XML
1.
2.
3.
4.
5.
6.
7.
8.
Compatibility
with old
browsers
Empty elements: end the tag with /> but leave a space in front of the /.
Example: <img src=“whatever” />
Don’t omit the closing tags where they are optional in HTML (But, use
<p> </p> -- don’t use <p /> )
Use external style sheets and scripts because symbols like < and &
are a problem if defined in-line – the <!– comment trick won’t always work
Avoid line breaks inside attribute values.
Use both name and id attributes to make identifiers
Boolean attributes such as checked must have values equal to the
attribute name (e.g., checked="checked")
Use lower case tag names and attribute names.
Watch &, especially in URLs: href="frobbly?id=345&amp;color=purple"
Other details as listed in Appendix C of the XHTML spec:
http://www.w3.org/TR/xhtml1/#guidelines
COMP/DCOM 461 – CWB
46
Homework Assignment
XML Part II
http://cs.franklin.edu/Syllabus/comp461/assignments.html#xml2

Write JSP pages and XSL transforms for






The catalog index page
The catalog detail pages (one template for all)
The JSP should contain all stuff not dependent on the
XML data
The stuff that is dependent on XML should be
inserted by using the <xtags:style> tag
For a detail page, use the <xtags:param> tag to pass
the item ID to the transform
Submit printouts of the XSL files only
COMP/DCOM 461 – CWB
47