Displaying XML

files in browser
 Displaying XML files in browser

• Relating XML document and style sheet:

– We can use either a cascading style sheet
(.css) or an XSLT style sheet (.xsl)
– http://www.w3.org/Style/CSS/
– http://www.w3.org/Style/CSS/learning
<?xml-stylesheet type = “text/css” href = “job.css"?>

2
 Style Sheets
• Cascading style sheets (CSS)
• A means for presenting document
– We locate the style sheet in a file
• Ex: job.css
• Has rules and declarations to tell browser
how to display the document
• In the XML document add a line to show
where the stylesheet is located
<?xml-stylesheet type=“text/css” href=“job.css”?>

3
 Style Sheets
• Two parts in style sheet
– Element selector
– Property declarations
Element (comma separated list)

Properties (property and

address {
value pairs separated by
semicolons)
font-size: 12pt;
font-family: arial
}
4
 Selected Formatting Properties
A wide variety of properties
Property Description Values
font Font properties font: italic small-caps bold 12px arial
font-family Typeface font-family: arial
font-size Size of font font-size: small
font-style Style of font font-style: italic
text-align Alignment of texttext-align: center
text-indent Indent first line text-indent: 10 (# pixels)
color Text color color: red
and many, many more....

5
 Cascading Style To,
Sheets
from elements
are bold, left aligned,
to, from {
with solid border
font-weight:bold;
text-align:left;
border-style:solid Subject element is
} underlined, green background
subject { color (yuck), text is yellow
text-decoration: underline;
background-color: green;
color: yellow
Default properties to use:
}
text color is green
*{
color:green
} See job.css
6
 CSS Inheritance
• Hierarchy of elements in XML docs
• Hierarchy is applied to style sheet with
property inheritance

• Properties defined for parents are passed to

child elements
– E.g., parent is 18pt -> child is 18pt unless
property is redefined
7
 Example

<?xml version = “1.0”?>

<?xml-stylesheet type = “text/css” href = “job.css"?>
<job-posting>
<title> Job Title: <emphasis> Web Master </emphasis> </title>
<description> We are looking for a Web master to create and oversee
our company&apos;s web pages. </description>
<skill-list>
<skill> Basic writing skills </skill>
<skill> Good oral skills </skill>
<skill> Programming experience in web languages </skill>
</skill-list>
</job-posting>

8
 Style sheet (.css)
title { font-size: 28pt; color: red; }
emphasis { font-weight: bold; }
description { display: block; margin-top: 15px; font-
size: 18pt; }
skill-list {background-color: yellow;
color: green;}
skill { display: block; margin-left: 30px;
margin-top: 5px; font-size: 14pt;
font-family: 'Comic Sans MS';}

9
 CSS Inheritance
– Consider job.xml and job.css example
• <emphasis> tag is within both the <title> tag and
the <skill> tag
• In both cases it changes the font to bold, but does
not affect any other formatting
• The other properties are inherited from the parent
tag

10
 CSS Limitations
• CSS is not a general way of expressing
presentation; it provides a “static”
formatting
• E.g., we can’t make on-the-fly decisions
about whether to include a header or footer,
whether to color something green when it
has two children, etc.
– Formatting is based on the tags / attributes, not
on the organization
11
 CSS Limitations
• We can get around these limitations using
Javascript / DOM
– Allows dynamic updating of the style through
events
• We can also use XSL for style
– XSL is more flexible than CSS – we will
briefly look at XSL

12
XSLT
 XSLT Overview
• What is XSLT?
– XSL is the Extensible Style Language.
– It has two parts: the transformation language and the
formatting language.
– XSLT provides a syntax for defining rules that
transform an XML document to another document.
• For example, to an HTML document.
– An XSLT “style sheet” consists primarily of a set of
template rules that are used to transform nodes
matching some patterns.
 XSLT Overview
• The xml-stylesheet element in the XML instance references an XSL
style sheet.
• In general, children of the stylesheet element in a stylesheet are
templates.
• A template specifies a pattern; the template is applied to nodes in the
XML source document that match this pattern.
– Note: the pattern “/” matches the root node of the document, we will see
this later
• In the transformed document, the body of the template element
replaces the matched node in the source document.
• In addition to text, the body may contain further XSL terms, e.g.:
– xsl:value-of extracts data from selected sub-nodes.
 XSLT Overview

• We have an XML document and the style sheet (or rules) to transform it. So,
how do you transform the document?.
• You can transform documents in three ways:
– In the server. A server program, such as a Java servlet, can use a style
sheet to transform a document automatically and serve it to the client.
For example, XML Enabler, which is a servlet that you’ll find at XML for Java
Web site, www.alphaworks.ibm.com/tech/xml4j
– In the client. An XSL-enabled browser may convert XML downloaded
from the server to HTML before display. Currently Internet Explorer
supports a subset of XSLT.
– In a standalone program. XML stored in or generated from a database,
say, maybe “manually” converted to HTML before placing it in the server’s
document directory.
• In any case, a suitable program takes an XML document as input and an XSLT
“style sheet”.
 Format of Style Sheet
• XSLT style sheet is itself an XML document.
• We will be using the XSLT elements from the namespace.
http://www.w3.org/1999/XSL/Transform
– As a matter of convention we use the prefix xsl: for this namespace.
• The document root in an XSLT style sheet is an xsl:stylesheet element,
e.g.:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
...
</xsl:stylesheet>
– A synonym for xsl:stylesheet is xsl:transform.
• Several kinds of elements can be nested inside xsl:stylesheet, but by
far the most important is the xsl:template element.
Format of Style Sheet

18
 XSLT
Templates

• The XSLT processor transforms the XML document according to

transformation models (templates) described in the XSL sheet to produce
a new document according to the type of desired output,

• Each transformation model defines processing to be performed on an

element or set of elements in the source XML document. .

• A template is represented by the <template> tag in the XSL sheet,

• An XSL sheet can contain several models

 XSLT
Templates

• When you match or select nodes, a template tells the XSLT processor how to
transform the node for output
• So all our templates will have the form:
<xsl:template match=“pattern”>
template body
</xsl:template>
• The pattern is an Xpath expression describing the nodes to which the template
can be applied.
• The processor scans the input document for nodes matching this pattern, and
replaces them with the text included in the template body.
 XSLT
Templates

• The content of the <template> tag represents the transformation rules to apply
to the elements selected by the match expression

21
 XSLT
Templates

 The template tag defines a transformation model.

 match: allows you to select elements of the XML document on which the
transformation will be applied name,:
 name of the template, it allows you to call the template directly without going
through the evaluation of the nodes of the document <xsl:call-template> ,
 priority: model priority, used if the XSLT processor identifies multiple
transformation models for the same node
 XSLT
Templates

• The <apply-templates> tag: asks the XSLT processor to apply a defined template
that corresponds to the XPath expression provided by its select attribute.
• select: is used to identify the models that will be applied, the match is made on the
basis of the match attribute of the model
- If select is not provided, the template is applied to all childs of the current
node..

• In the case where several models correspond to the select expression: It is therefore
necessary:
– Use the model's priority attribute
– Use the template with the most specific match expression
XSLT
Templates
 XSLT
Logic : Loops

• <for-each> loops through elements that match the result of the attribute's
XPath expression select
 XSLT
Logic: conditional processing

• <if> allows performing conditional processing if the result of the expression of

the attribute test is true
– The test expression accepts the same syntax as XPath predicates.
 XSLT
Logic: conditional processing

• <choose>allows making a choice among several alternatives.

• <when>, processing to be performed if the test expression is true
• <otherwise>, process to perform if no condition <when> is met
 XSLT
Logique : order

• <sort> is used to order a set of elements

• <sort> comes as a child of a <template> or a <for-each> to order its
elements
– select : expression used as a sorting criterion
– data-type : text or number , specifies the sort type
– order : ascending ou descending
– case-order : upper-first ou lower-first
 XSLT
XML content generation

• <copy> provides a simple way to copy the current node to the output,
– use-attribute-sets : the attributes of the node that will be copied, if empty all
– <copy> does not copy the children of the node
– <element> allows to creation an XML element in the output
– name : local name of the element
– <attribute> > used in conjunction with <element> to add an
attribute to it
– name : attribute name,
 XSLT
Output

• The <output> tag is the 1st child of the root of the XSLT document, this
tag indicates:
• method : Output format xml, html or texte.
– doctype-public : is the name of the standard respected by the output.
– doctype-system : is the link to the DTD of this standard.
– indent=yes : indicates that the generated file will be indented automatically.
• disabling indentation decreases the size of generated files.
 Exemple
Consider the following XML document and XSLT document, which we can think of as the definition of a query on the
document:
<BIBLIO>
<LIVRE ISBN= “2-212-09052-8” LANG= “FR”>
<AUTEUR>
<NOM>Michard</NOM>
<PRENOM>Alain</PRENOM>
</AUTEUR>
<TITRE>XML, Langage et Applications</TITRE>
<EDITEUR>Eyrolles</EDITEUR>
<DATE_ACHAT>1998</DATE_ACHAT>
<PRIX monnaie= “FF”>340</PRIX>
</LIVRE>
<LIVRE ISBN= “2-7440-0628-9” LANG= “FR”>
<AUTEUR>
<NOM>Ladd</NOM>
<PRENOM>Eric</PRENOM>
</AUTEUR>
<AUTEUR>
<NOM>O’Donnel</NOM>
<PRENOM>Jim</PRENOM>
</AUTEUR>
<TITRE>HTML4, XML et Java 2</TITRE>
<EDITEUR>Campus Press</EDITEUR>
<PRIX monnaie= “FF”>349</PRIX>
</LIVRE>
</BIBLIO>
 Exemple
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml" indent="yes"/>
<xsl:template match="/">
<LIVRES>
<xsl:for-each select="BIBLIO/LIVRE">
<LIVRE>
<ISBN> <xsl:apply-templates select="@ISBN"/></ISBN>
<TITRE> <xsl:apply-templates select="TITRE"/></TITRE>
<xsl:for-each select="AUTEUR">
<AUTEUR> <xsl:apply-templates select="NOM"/>,
<xsl:apply-templates select="PRENOM"/>
</AUTEUR>
</xsl:for-each>
<EDITEUR> <xsl:apply-templates select="EDITEUR"/></EDITEUR>
</LIVRE>
</xsl:for-each>
</LIVRES>
</xsl:template>
</xsl:stylesheet>

32
 Exemple
Executing this document allows to obtain the following XML document:

<LIVRES>
<LIVRE>
<ISBN>2-212-09052-8</ISBN>
<AUTEUR>Michard, Alain</AUTEUR>
<TITRE>XML, Langage et Applications</TITRE>
<EDITEUR>Eyrolles</EDITEUR>
</LIVRE>
<LIVRE>
<ISBN>2-7440-0628-9</ISBN>
<AUTEUR>Ladd, Eric</AUTEUR>
<AUTEUR>O’Donnel, Jim</AUTEUR>
<TITRE>HTML4, XML et Java 2</TITRE>
<EDITEUR>Campus Press</EDITEUR>
</LIVRE>
</LIVRES>

33