Rendering XML Document

Q5M1 - XML Dudy Fathan Ali S.Kom

Rendering XML DocumentQ5M1 - XML

Dudy Fathan Ali, S.Kom (DFA)2015

CEP - CCITFakultas Teknik Universitas Indonesia

Objectives


In this session, you will learn to:Transform an XML document through a Cascading Style SheetTransform 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




property1 and property2 specify the property names, such as font-family, font-size, and color

Creating CSS




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




Specifies the type of formatting that is being used.

Applying CSS




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:

stylesheetvalue-offor-eachsorttext





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





Displays the value of the specified element or attribute.

Follows the syntax:<xsl:value‑of

select="elementname/attributename“/>





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>





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




stylesheetvalue-offor-eachsorttext 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





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>





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

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

[email protected]

mailto:[email protected]

Technology

Rendering XML Document