rendering xml document
TRANSCRIPT
Q5M1 - XML Dudy Fathan Ali S.Kom
Rendering XML DocumentQ5M1 - XML
Dudy Fathan Ali, S.Kom (DFA)2015
CEP - CCITFakultas Teknik Universitas Indonesia
Objectives
Q5M1 - XML Dudy Fathan Ali S.Kom
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
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.
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.
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
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}
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.
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.
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.
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.
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.
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
Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format data:
stylesheetvalue-offor-eachsorttext
Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
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">
Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format data:
stylesheetvalue-offor-eachsorttext
Displays the value of the specified element or attribute.
Follows the syntax:<xsl:value‑of
select="elementname/attributename“/>
Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format data:
stylesheetvalue-offor-eachsorttext
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>
Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format data:
stylesheetvalue-offor-eachsorttext
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"/>
Formatting Data Using XSLT
Q5M1 - XML Dudy Fathan Ali S.Kom
XSLT provides the following elements to select and format data:
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
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
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>
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"]>
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.
Q5M1 - XML Dudy Fathan Ali S.Kom
Thank You!Dudy Fathan Ali S.Kom