Rendering XML Document

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

2. Objectives
Q5M1 - XML Dudy Fathan Ali S.Kom
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

3. Introducing Cascading Style Sheet
Q5M1 - XML Dudy Fathan Ali S.Kom
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.

4. Creating CSS
Q5M1 - XML Dudy Fathan Ali S.Kom
The syntax for coding a CSS is:
elementname {
property1: value;
property2: value;
}
elementname specifies
the name of the element.

5. Creating CSS
Q5M1 - XML Dudy Fathan Ali S.Kom
The syntax for coding a CSS is:
elementname {
property1: value;
property2: value;
}
property1 and property2
specify the property names, such
as font-family, font-size, and color

6. Creating CSS
Q5M1 - XML Dudy Fathan Ali S.Kom
The syntax for coding a CSS is:
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}

7. Applying CSS
Q5M1 - XML Dudy Fathan Ali S.Kom
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.

8. Applying CSS
Q5M1 - XML Dudy Fathan Ali S.Kom
A CSS can be applied to an XML document using the following
syntax:
<?xml:stylesheet type="text/css" href="path-name"?>
Specifies the type of
formatting that is being used.

9. Applying CSS
Q5M1 - XML Dudy Fathan Ali S.Kom
A CSS can be applied to an XML document using the following
syntax:
<?xml:stylesheet type="text/css" href="path-name"?>
Specifies the name of the CSS
file used to format the XML
document.

10. Demo: Creating a CSS
Q5M1 - XML Dudy Fathan Ali S.Kom
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.

11. Introducing XSL
Q5M1 - XML Dudy Fathan Ali S.Kom
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.

12. Analyzing the Working of the XSLT Processor
Q5M1 - XML Dudy Fathan Ali S.Kom
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

13. Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format
data:
stylesheet
value-of
for-each
sort
text

14. Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format
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">

15. Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format
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“
/>

16. Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format
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>

17. Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format
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"/>

18. Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format
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>

19. Creating XSLT Template Rules
Q5M1 - XML Dudy Fathan Ali S.Kom
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

20. Creating XSLT Template Rules
Q5M1 - XML Dudy Fathan Ali S.Kom
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
Defines a template for the desired
output.
Follows the syntax:
<xsl:template match="pattern">
[action to be taken]
</xsl:template>

21. Creating XSLT Template Rules
Q5M1 - XML Dudy Fathan Ali S.Kom
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 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"]>

22. Demo: Creating an XSLT Style Sheet to Format Data
Q5M1 - XML Dudy Fathan Ali S.Kom
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.

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