Displaying XML Documents Using CSS and XSL

Displaying XML Documents Using CSS and XSL Chapter 3

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.

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

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.

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

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

Style Sheets - 2 A Style sheet is a set of instructions to display the documents: It separates presentation layer from the content data of the document. A single XML document can have multiple style sheets Style sheets Data Presentation Layer

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

Uses of CSS and XSL Cascading style sheet is 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.

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

Working of XML XML File CSS (XML + CSS) aware Browser Formatted Document

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>

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

Displaying an XML Document Using CSS -2 OUTPUT

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 }

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

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

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

Characters used in CSS Separates multiple selectors in a style rule Comma , Identifies selector context Period . Separates multiple property/value combinations Semicolon ; Separates property and its value Colon : Function Name Character

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

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.

Color Values XML supports the following 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)

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

Formatting the Text - 2 The different font properties that can be set are: font-family font-size font-style font-weight font-variant Font

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.

Margins, Border and Padding The padding property is used to specify the distance or space between the border and its contents. Boxes margin-top margin-bottom margin-left margin-right margin Margins Border border-top border-bottom border-left border-right border padding-bottom padding-top padding-right padding-left padding Padding

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

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.

XSL - 2 XML Document XSL HTML document displayed in the Web HTML CSS

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>

Patterns The patterns supported in XSL are: Sorting Operators Filtering Letters after sorting

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

Operators XSL supports the se operators: / ./ // .// * @ = /*/name */* @* //name

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 Description AND Logical and OR Logical or NOT Negation = Equal != Not equal > Greater than < Less than >= Greater than or equal to <= Less than or equal

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

Types of Matching Matching Matching by name Matching by ancestry Matching several names Matching the root Wildcard matches Matching by ID Matching by attributes

Handling Expressions XSL supports five types of Expressions. These are: Node Sets Booleans Strings Numbers Result Tree Fragments

Switching Styles Data Islands 1 XML document Data Islands 2 Data Islands 3 XML document with XSL style sheet 1 XML document with XSL style sheet 2 XML document with XSL style sheet 3

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

Difference Between XSL and CSS It transforms XML into structures such as lists or tables It does not change the structure of the document XSLT lets us to map a certain pattern in the source document CSS determines the visual appearance of a page XSL provides means of transforming of XML documents CSS work by assigning a set of display properties to an HTML element

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:

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 .

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

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.

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

Displaying XML Documents Using CSS and XSL

In this document