Rendering XML Document

Q5M1 - XML Dudy Fathan Ali S.Kom
Rendering XML Document
Q5M1 - XML
Dudy Fathan Ali, S.Kom (DFA)
2015
CEP - CCIT
Fakultas Teknik Universitas Indonesia

Objectives
In this session, you will learn to:
Transform an XML document through a Cascading Style Sheet
Transform an XML document through Extensible Style Sheet
Language

Introducing Cascading Style Sheet
A CSS is a text file containing one or more rules or definitions for
the style characteristics of a particular element.
It controls how tags are formatted in XML and HTML documents.
The CSS file can be included in XML documents with the same
data structure.

Creating CSS
The syntax for coding a CSS is:
elementname {
property1: value;
property2: value;
}
elementname specifies
the name of the element.

Creating CSS
elementname {
property1: value;
property2: value;
}
property1 and property2
specify the property names, such
as font-family, font-size, and color

Creating CSS
elementname {
property1: value;
property2: value;
}
value specifies the property
values for a property name.
For example, to display the film title in red, you can type
the following code in a CSS file:
FILM {COLOR: RED}

Applying CSS
A CSS can be applied to an XML document using the following
syntax:
<?xml:stylesheet type="text/css" href="path-name"?>
Instructs the browser that the XML
document uses a stylesheet.

Applying CSS
syntax:
Specifies the type of
formatting that is being used.

Applying CSS
syntax:
Specifies the name of the CSS
file used to format the XML
document.

Demo: Creating a CSS
Problem Statement:
Jim, the XML developer at CyberShoppe, has been asked to display
the product details for Cybershoppe in a browser in the following
format:
The price per unit, description, and quantity on hand for each product
should be displayed in teal, with a font size of 10 pts.
The product name should be displayed in red, with a font size of 20 pts.
It should be displayed in bold.
All details should be displayed in the Arial font.

Introducing XSL
CSS does not support the reorder, sort, and display of
elements based on a condition.
For such advanced formatting, XML supports Extensible Style
Sheet Language (XSL).
XSL has two parts:
XSL Transformations (XSLT)
XML Path (XPath)
XSL:
Contains instructions on how an XML document should be
transformed into an HTML or an XHTML document.
Uses XPath expressions to extract specific data from an XML
document.
The XSLT processor transforms the XML document into an
HTML or XHTML or into another XML document.

Analyzing the Working of the XSLT Processor
The XSLT processor applies the transformation information to
the source document and builds the result tree as shown in the
following figure.
MSXML Parser
XSLT tree
XSLT
processor
Source tree
Result tree
XSLT style sheet
XML document

Formatting Data Using XSLT
XSLT provides the following elements to select and format
data:
stylesheet
value-of
for-each
sort
text

data:
stylesheet
value-of
for-each
sort
text
Instructs the browser that the document is a style
sheet file.
Is the root element for all XSLT style sheets.
Is written as:
<xsl:stylesheet
xmlns:xsl=
"http://www.w3.org/1999/XSL/Transform"
version="1.0">

data:
stylesheet
value-of
for-each
sort
text
Displays the value of the specified element or
attribute.
Follows the syntax:
<xsl:value-of
select="elementname/attributename“
/>

data:
stylesheet
value-of
for-each
sort
text
Instructs the XSLT processor to process the
information for each instance of the specified pattern.
Follows the syntax:
<xsl:for-each select="pattern">
[action to be performed]
</xsl:for-each>

data:
stylesheet
value-of
for-each
sort
text
Sorts data based on the values assigned to elements and
attributes.
Follows the syntax:
<xsl:sort select="expression"
order="ascending | descending"
case-order="upper-first | lower-first“
data-type="text | number | qname"/>

data:
stylesheet
value-of
for-each
sort
text Generates constant text in the output and displays
labels.
Follows the syntax:
<xsl:text>
Text to be displayed as label
</xsl:text>

Creating XSLT Template Rules
A template rule:
Describes how an XML element and its contents are converted into
a specific format for displaying in the browser.
Consists of two parts:
A pattern that identifies an XML element in an XML document.
An action or processing code that details the transformation and
rendering of the resulting element.
XSLT uses two main elements for creating template rules:
template
apply-templates

A template rule:
template
apply-templates
Defines a template for the desired
output.
Follows the syntax:
<xsl:template match="pattern">
[action to be taken]
</xsl:template>

A template rule:
template
apply-templates Instructs the XSLT processor to find an
appropriate template and perform the
specified tasks on selected elements.
Follows the syntax:
<xsl:apply-templates
[select="pattern"]>

Demo: Creating an XSLT Style Sheet to Format Data
Problem Statement:
CyberShoppe needs to display product details, such as product ID,
name, and price per unit. The following figure depicts a sample
output.
The details about the products should be displayed in red.

Thank You!
Dudy Fathan Ali S.Kom
dudy.fathan@eng.ui.ac.id

Rendering XML Document

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Rendering XML Document (20)

More from Dudy Ali (20)

Recently uploaded (20)

Rendering XML Document