displaying xml documents using css and xsl
TRANSCRIPT
Displaying XML Documents Using CSS and
XSL
Chapter 3
Core XML / Chapter 2 / Slide 2 of 25
Review-1 A well-formed document is one that conforms to the basic
rules of XML. A valid document is well formed and is also validated
against a DTD. The DTD specifies the grammatical structure of an XML
document, thereby allowing XML parsers to understand and interpret the document’s contents.
The use of the SYSTEM keyword indicates to the parser that this is an external declaration, and that the set of rules for this XML document can be found in a specified file.
EMPTY element-content type specifies that the element has no child elements or character data.
Core XML / Chapter 2 / Slide 3 of 25
Review-2 #CDATA means that the element contains character data
that is not to be parsed by a parser.#PCDATA means that the element contains data that is to be parsed by a parser.
Specifying a default value for an attribute in the DTD ensures that the attribute will get a value, even if the author of the XML document does not include it.
Specifying the value of an attribute as ‘Implied’ means that the particular attribute is not mandatory and can be specified in the XML document.
Specifying the value of an attribute as ‘Required’ means that the particular attribute is mandatory (that is, its value must be provided in the XML document).
Core XML / Chapter 2 / Slide 4 of 25
Review-3 ‘ID’ is the identifier type, and should be unique. This
attribute value is used to search for a particular instance of an element. Each element can only have one attribute of type ID.
A DTD can be either External or Internal. Entities allow us to create an alias to some large piece
of text, so that, in the document, the same piece of text can be referred to, simply by referring to the alias.
Namespaces allow us to combine documents from different sources, and be able to identify which elements or attributes come from which source.
Core XML / Chapter 3 / Slide 5 of 34
Objectives Display an XML document in a browser Identify the style rules of CSS Discuss different patterns and templates of XSL Apply different styles to XML elements using CSS
and XSL Transform XML documents into HTML documents
using XSLT Identify the differences between CSS and XSL
Core XML / Chapter 3 / Slide 6 of 34
Style Sheets - 1
An XML document can be displayed in different formats in different display devices such as computer, printer, and the like.
Document to be displayed
Core XML / Chapter 3 / Slide 7 of 34
Style Sheets - 2 A Style sheet is a set of instructions to display the
documents:
Style sheets
Data Presentation Layer
It separates presentation layer from the content data of the document.
A single XML document can have multiple style sheets
Core XML / Chapter 3 / Slide 8 of 34
Style Sheets - 3 A few style sheets available in the market
include: CSS- Cascading Style Sheets XSL-eXtensible Style sheet Language DSSL-Document Style Semantics and
Specification Language
Core XML / Chapter 3 / Slide 9 of 34
Uses of CSS and XSL
Cascading style sheetis used to manipulate
Visibility of an element
Positioning and sizing of elements
Colors and Background
Font and Text Spacing
XSL is used for formatting and converting documents written in one XML DTD into another DTD.
Core XML / Chapter 3 / Slide 10 of 34
XML and Style Sheets XML documents are plain text files. The style sheets are used to format and view the
XML document. Two commonly used style sheets with XML are:
CSS - an extension of HTML XSL - an XML specific styling language
Core XML / Chapter 3 / Slide 11 of 34
Working of XML
XML File
CSS
(XML + CSS)aware Browser
Formatted Document
Core XML / Chapter 3 / Slide 12 of 34
Displaying an XML Document Using CSS -1
XML document<?xml version='1.0'?>
<?xml-stylesheet type="text/css" href="hello.css"?>
<xsampdoc>
<greeting>Hello, <extension>there!</extension>
</greeting>
<answer>
<ans>Good <extension>morning!</extension>
</ans>
<question> How are you? </question>
</answer>
</xsampdoc>
Core XML / Chapter 3 / Slide 13 of 34
Displaying an XML Document Using CSS -1
Xsampdoc{ margin-top:.7in; margin-bottom: .7in; margin-left:1.5in; margin-right:1in; color: navy; background-color:white; display: block }greeting{ display:block; font-family: Arial, Helvetica, sans-
serif;font-size: 32pt; width: 30em; color: red }
question{ display:block;
font-size: x-large;
color: black; }answer.ans { display: block; font-size: 20pt; color: blue}
The CSS document for the XML document
Core XML / Chapter 3 / Slide 14 of 34
Displaying an XML Document Using CSS -2
OUTPUT
Core XML / Chapter 3 / Slide 15 of 34
CSS Style Rules The Syntax for style rules in a Cascading Style Sheet
is: Selector{declaration} The selector identifies the tag to which the style
applies. The declaration provides the style rules applied to
the selector. This is referred as ‘Simple Selector’.
Example:
greeting
{display:block;font-family: Arial, Helvetica,sans-serif;
font-size: 32pt; width: 30em; color: red }
Core XML / Chapter 3 / Slide 16 of 34
Multiple Selector Used to apply the same style rule for different elements Syntax:selector,selector…….{declaration}
Example
greeting,question
{font-family: sans-serif;
font-size: 32pt; }
Style Rule
Selector 1
Selector 2
The same Style Rule is being used by Selector1 and Selector2
Core XML / Chapter 3 / Slide 17 of 34
Contextual Selectors -1 It helps us to differentiate between the different
occurrence of a tag.
MADE IN
U.S.A
tag
Occurrence 1 Occurrence 2
Occurrence 1
tag([declaration]}
Occurrence 2
tag([declaration]}
Conceptual Selector
Core XML / Chapter 3 / Slide 18 of 34
Contextual Selectors -2 Example:<xsampdoc>
<greeting>Hello! <extension>there</extension></greeting>
<answer> <ans>Fine<extension>here</extension></ans> <ans>Thank you.</ans> </answer></xsampdoc>
Contextual Selectors to differentiate between the different occurrences of <extension>
greeting extension{[declarations]}
answer ans extension{[declaration]}
Core XML / Chapter 3 / Slide 19 of 34
Characters used in CSS
Character Name Function
: Colon Separates property and its value
; Semicolon Separates multiple property/value combinations
. Period Identifies selector context
, Comma Separates multiple selectors in a style rule
Core XML / Chapter 3 / Slide 20 of 34
Linking the CSS to XML The Cascading style sheet has to be referenced in the
XML document. We use a processing instruction to do so. Syntax:<?xml-stylesheet type=“text/css”
href=“url”?>
Example
<?xml-stylesheettype="text/css“ href="hello.css"?>
Core XML / Chapter 3 / Slide 21 of 34
Properties and Values A value of the CSS styling property may be a string, a
number with a unit, an integer, or a color value. Values can be absolute or relative, inheritable or non-
inheritable.
Example Absolute value
P{margin-left:3cm;}
A margin of 3 centimeter is created irrespective of the margin size.
Example Relative value
P{margin-left:10%}
A margin of 10% of the width of the page is created.
Core XML / Chapter 3 / Slide 22 of 34
Color Values
Gray White Red
Short form #888 #FFF #F00
Decimal Integer rgb(136,136,136) rgb(255,255,255) rgb(255,0,0)
Percentage rgb(55%,55%,55%)
rgb(100%,100%,100%)
rgb(100%,0,0)
XML supports the following color values:
Core XML / Chapter 3 / Slide 23 of 34
Formatting the Text - 1 The CSS properties allow to specify the font in which
an element will be displayed, its size and color. <absolute-size> and <relative-size> keywords are used
with font properties
<absolute-size>
xx-small
x-small
small
medium
<relative-size>
large
smaller
Core XML / Chapter 3 / Slide 24 of 34
Formatting the Text - 2 The different font properties that can be set are:
font-family
font-size
font-stylefont-weight
font-variantFont
Core XML / Chapter 3 / Slide 25 of 34
Boxes -1 Blocks of text can be contained in a box. The following three properties apply to the boxes:
Margins Border Padding
Padding is the distance between the contents of the adjacent box.
Margin is the distance between the border and the outer edge of the adjacent box, or between the border and its containing box.
Core XML / Chapter 3 / Slide 26 of 34
Boxes -2
Border
Core XML / Chapter 3 / Slide 27 of 34
Margins, Border and Padding
margin-top
margin-bottom
margin-left
margin-right
margin
Margins Borderborder-top
border-bottom
border-left
border-right
borderpadding-bottom
padding-top
padding-right
padding-left
padding
Padding
Boxes
The padding property is used to specify the distance or space between the border and its contents.
Core XML / Chapter 3 / Slide 28 of 34
Controlling Layout The CSS layout properties can control the box on the
screen. The boxes can be overlapped using the z-index
property.
A paragraph that is two inches by one inch and with a scroll bar is displayed
Core XML / Chapter 3 / Slide 29 of 34
XSL It is a style sheet application created specifically
for XML. Features of XSL include:
It provides a transformation language (XSLT). XSL can be used as a formatting language. XSL can be used to sort and filter. XSL can be used for pattern matching to find
records.
Core XML / Chapter 3 / Slide 30 of 34
XSL - 2
XML Document
XSL HTML
CSS
HTML document displayed in the Web
Core XML / Chapter 3 / Slide 31 of 34
Example for XSL The XSL style sheet code <html> <head> <title>Icons In Cricket</title> </head> <body> <h2>Icons In Cricket</h2> <table border="2"
cellpadding="3"> <tr> <td>Player</td>
<td>No. Of Catches</td>
<td>No. Of 100's</td> <td>No. Of 50's</td> </tr> <xsl:for-each
select="cricket/player" order-by ="-catches">
<tr> <td><xsl:value-of
select="name"/></td> <td><xsl:value-of
select="no_50"/></td><td><xsl:value-of
select="no_100"/></td> <td><xsl:value-of
select="catches"/></td> </tr> </xsl:for-each> </table> </body> </html>
Core XML / Chapter 3 / Slide 32 of 34
Patterns The patterns supported in XSL are:
Sorting Operators Filtering
Letters after sorting
Core XML / Chapter 3 / Slide 33 of 34
Sorting The default sorting is ascending order. The ‘-’ sign is used to sort in descending order.
The chart is organized in the descending order of catches
Core XML / Chapter 3 / Slide 34 of 34
Operators
XSL supports the se operators:
/
./
//
.//
*
@
=
/*/name
*/*
@*
//name
Core XML / Chapter 3 / Slide 35 of 34
Filtering and Logical Operators
Filter operations can contain expression such as Boolean expression, AND, OR, and NOT expressions
The different logical operators that can be used are:Operator DescriptionAND Logical andOR Logical orNOT Negation= Equal!= Not equal> Greater than< Less than>= Greater than or equal to<= Less than or equal
Core XML / Chapter 3 / Slide 36 of 34
Templates Templates are the instructions in an XSL style sheet, which
control the conversion of element and its content. It is represented by <xsl:template>…</xsl:template>
It is applied with the <xsl:apply-templates/> element
The template has two parts: The matching part The processing part
Matching part
Processing part
Core XML / Chapter 3 / Slide 37 of 34
Types of Matching
Matching
Matching by name
Matching by ancestry
Matching several names
Matching the root
Wildcard matches
Matching by ID
Matching by attributes
Core XML / Chapter 3 / Slide 38 of 34
Handling Expressions XSL supports five types of Expressions.
These are: Node Sets Booleans Strings Numbers Result Tree Fragments
Core XML / Chapter 3 / Slide 39 of 34
Switching Styles
Data Islands 1
XML document
XML document with XSL style sheet 1
XML document with XSL style sheet 2
XML document with XSL style sheet 3
Data Islands 2
Data Islands 3
Core XML / Chapter 3 / Slide 40 of 34
xsl:import and xsl:include Style sheets created by other developers can be
imported using the xsl:import The syntax for importing style sheets is: <xsl:import href= ‘another stylesheet.xsl’/> <xsl:import href= ‘another stylesheet1.xsl’/> All the different style sheets imported are arranged
in an import tree. A new node is created in the import tree when a
style sheet is imported
Core XML / Chapter 3 / Slide 41 of 34
Difference Between XSL and CSS
CSS work by assigning a set of display properties to an HTML element
XSL provides means of transforming of XML documents
CSS determines the visual appearance of a page
XSLT lets us to map a certain pattern in the source document
It does not change the structure of the document
It transforms XML into structures such as lists or tables
Core XML / Chapter 2 / Slide 42 of 25
Summary-1
XML is portable. An XML document can be sent from one system to another, and even from application to application, without modifying the content.
A style sheet is a set of instructions to display documents.
Style sheets can be written in several languages. Two of these are:
Core XML / Chapter 2 / Slide 43 of 25
Cascading Style Sheets (CSS), an extension of HTML
eXtensible Stylesheet Language (XSL), an XML specific styling language
The selector identifies the tag to which the style applies, and the declaration provides the style rules applied, to the selector.
Core XML / Chapter 2 / Slide 44 of 25
Summary-2
The list of selectors includes Simple selectors, Contextual selectors and Multiple selectors.
Contextual Selectors help to differentiate between the different occurrences of a tag.
The Multiple Selector is used to assign the same style rule to different elements. One declaration can be applied to several selectors.
A block of text can be contained in a box, and this box can then be placed on the browser. The three properties that apply to the boxes are: margins, borders and padding
Core XML / Chapter 2 / Slide 45 of 25
The CSS layout properties can control the layout of the box on the screen. Boxes can be overlapped using the z-index property. This specifies the height and width for a box.
XSL is a style sheet language created specifically for XML. It is used to convert XML documents into HTML. Cascading style sheets are applied to the resulting HTML documents for display on the web.
Core XML / Chapter 2 / Slide 46 of 25
Summary-3 The instructions that control how an element and its content should be
converted in an XSL style sheet, are called templates. XSL provides support for the following patterns:
Sorting Operators Filtering
A typical template element looks like this:<xsl:template match = "myElement">
Types of Matching Matching by attribute Matching by ID Matching by wildcard Matching by root Matching by name