Displaying XML Documents Using CSS and XSL


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • HTML can be displayed without css add to FG
  • Displaying XML Documents Using CSS and XSL

    1. 1. Displaying XML Documents Using CSS and XSL Chapter 3
    2. 2. Review-1 <ul><li>A well-formed document is one that conforms to the basic rules of XML. </li></ul><ul><li>A valid document is well formed and is also validated against a DTD. </li></ul><ul><li>The DTD specifies the grammatical structure of an XML document, thereby allowing XML parsers to understand and interpret the document’s contents. </li></ul><ul><li>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. </li></ul><ul><li>EMPTY element-content type specifies that the element has no child elements or character data. </li></ul>
    3. 3. Review-2 <ul><li>#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. </li></ul><ul><li>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. </li></ul><ul><li>Specifying the value of an attribute as ‘Implied’ means that the particular attribute is not mandatory and can be specified in the XML document. </li></ul><ul><li>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). </li></ul>
    4. 4. Review-3 <ul><li>‘ 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. </li></ul><ul><li>A DTD can be either External or Internal. </li></ul><ul><li>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. </li></ul><ul><li>Namespaces allow us to combine documents from different sources, and be able to identify which elements or attributes come from which source. </li></ul>
    5. 5. Objectives <ul><li>Display an XML document in a browser </li></ul><ul><li>Identify the style rules of CSS </li></ul><ul><li>Discuss different patterns and templates of XSL </li></ul><ul><li>Apply different styles to XML elements using CSS and XSL </li></ul><ul><li>Transform XML documents into HTML documents using XSLT </li></ul><ul><li>Identify the differences between CSS and XSL </li></ul>
    6. 6. 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
    7. 7. Style Sheets - 2 <ul><li>A Style sheet is a set of instructions to display the documents: </li></ul>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
    8. 8. Style Sheets - 3 <ul><li>A few style sheets available in the market include: </li></ul><ul><ul><li>CSS- Cascading Style Sheets </li></ul></ul><ul><ul><li>XSL-eXtensible Style sheet Language </li></ul></ul><ul><ul><li>DSSL-Document Style Semantics and Specification Language </li></ul></ul>
    9. 9. 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.
    10. 10. XML and Style Sheets <ul><li>XML documents are plain text files. </li></ul><ul><li>The style sheets are used to format and view the XML document. </li></ul><ul><li>Two commonly used style sheets with XML are: </li></ul><ul><ul><li>CSS - an extension of HTML </li></ul></ul><ul><ul><li>XSL - an XML specific styling language </li></ul></ul>
    11. 11. Working of XML XML File CSS (XML + CSS) aware Browser Formatted Document
    12. 12. Displaying an XML Document Using CSS -1 <ul><li>XML document </li></ul><ul><li><?xml version='1.0'?> </li></ul><ul><li><?xml-stylesheet type=&quot;text/css&quot; href=&quot;hello.css&quot;?> </li></ul><ul><li><xsampdoc> </li></ul><ul><li><greeting>Hello, <extension>there!</extension> </li></ul><ul><li></greeting> </li></ul><ul><li> <answer> </li></ul><ul><li> <ans>Good <extension>morning!</extension> </li></ul><ul><li></ans> </li></ul><ul><li> <question> How are you? </question> </li></ul><ul><li></answer> </li></ul><ul><li></xsampdoc> </li></ul>
    13. 13. Displaying an XML Document Using CSS -1 <ul><li>Xsampdoc </li></ul><ul><li>{ margin-top:.7in; </li></ul><ul><li>margin-bottom: .7in; </li></ul><ul><li>margin-left:1.5in; </li></ul><ul><li>margin-right:1in; </li></ul><ul><li>color: navy; </li></ul><ul><li>background-color:white; </li></ul><ul><li>display: block </li></ul><ul><li>} </li></ul><ul><li>greeting </li></ul><ul><li>{ display:block; </li></ul><ul><li>font-family: Arial, Helvetica, sans- serif;font-size: 32pt; </li></ul><ul><li>width: 30em; </li></ul><ul><li>color: red } </li></ul>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
    14. 14. Displaying an XML Document Using CSS -2 OUTPUT
    15. 15. CSS Style Rules <ul><li>The Syntax for style rules in a Cascading Style Sheet is: Selector{declaration} </li></ul><ul><li>The selector identifies the tag to which the style applies. </li></ul><ul><li>The declaration provides the style rules applied to the selector. </li></ul><ul><li>This is referred as ‘Simple Selector’. </li></ul>Example: greeting {display:block;font-family: Arial, Helvetica,sans-serif; font-size: 32pt; width: 30em; color: red }
    16. 16. Multiple Selector <ul><li>Used to apply the same style rule for different elements </li></ul><ul><li>Syntax: </li></ul><ul><li>selector,selector…….{declaration} </li></ul>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
    17. 17. Contextual Selectors -1 <ul><li>It helps us to differentiate between the different occurrence of a tag. </li></ul>MADE IN U.S.A tag Occurrence 1 Occurrence 2 Occurrence 1 tag([declaration]} Occurrence 2 tag([declaration]} Conceptual Selector
    18. 18. Contextual Selectors -2 <ul><li>Example: </li></ul><ul><li><xsampdoc> </li></ul><ul><li><greeting>Hello! <extension>there</extension></greeting> </li></ul><ul><li><answer> </li></ul><ul><li><ans>Fine<extension>here</extension></ans> </li></ul><ul><li><ans>Thank you.</ans> </li></ul><ul><li></answer> </li></ul><ul><li></xsampdoc> </li></ul>Contextual Selectors to differentiate between the different occurrences of <extension> greeting extension{[declarations]} answer ans extension{[declaration]}
    19. 19. 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
    20. 20. Linking the CSS to XML <ul><li>The Cascading style sheet has to be referenced in the XML document. </li></ul><ul><li>We use a processing instruction to do so. </li></ul><ul><li>Syntax: </li></ul><ul><li><?xml-stylesheet type=“text/css” href=“url”?> </li></ul>Example <?xml-stylesheettype=&quot;text/css“ href=&quot;hello.css&quot;?>
    21. 21. Properties and Values <ul><li>A value of the CSS styling property may be a string, a number with a unit, an integer, or a color value. </li></ul><ul><li>Values can be absolute or relative, inheritable or non-inheritable. </li></ul>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.
    22. 22. 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)
    23. 23. Formatting the Text - 1 <ul><li>The CSS properties allow to specify the font in which an element will be displayed, its size and color. </li></ul><ul><li><absolute-size> and <relative-size> keywords are used with font properties </li></ul><absolute-size> xx-small x-small small medium <relative-size> large smaller
    24. 24. Formatting the Text - 2 <ul><li>The different font properties that can be set are: </li></ul>font-family font-size font-style font-weight font-variant Font
    25. 25. Boxes -1 <ul><li>Blocks of text can be contained in a box. </li></ul><ul><li>The following three properties apply to the boxes: </li></ul><ul><ul><li>Margins </li></ul></ul><ul><ul><li>Border </li></ul></ul><ul><ul><li>Padding </li></ul></ul><ul><li>Padding is the distance between the contents of the adjacent box. </li></ul><ul><li>Margin is the distance between the border and the outer edge of the adjacent box, or between the border and its containing box. </li></ul>
    26. 26. Boxes -2 Border
    27. 27. Margins, Border and Padding <ul><li>The padding property is used to specify the distance or space between the border and its contents. </li></ul>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
    28. 28. Controlling Layout <ul><li>The CSS layout properties can control the box on the screen. </li></ul><ul><li>The boxes can be overlapped using the z-index property. </li></ul>A paragraph that is two inches by one inch and with a scroll bar is displayed
    29. 29. XSL <ul><li>It is a style sheet application created specifically for XML. </li></ul><ul><li>Features of XSL include: </li></ul><ul><ul><li>It provides a transformation language (XSLT). </li></ul></ul><ul><ul><li>XSL can be used as a formatting language. </li></ul></ul><ul><ul><li>XSL can be used to sort and filter. </li></ul></ul><ul><ul><li>XSL can be used for pattern matching to find records. </li></ul></ul>
    30. 30. XSL - 2 XML Document XSL HTML document displayed in the Web HTML CSS
    31. 31. Example for XSL <ul><li>The XSL style sheet code </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Icons In Cricket</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h2>Icons In Cricket</h2> </li></ul><ul><li><table border=&quot;2&quot; cellpadding=&quot;3&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td>Player</td> <td>No. Of Catches</td> </li></ul><ul><li><td>No. Of 100's</td> </li></ul><ul><li><td>No. Of 50's</td> </li></ul><ul><li></tr> </li></ul><ul><li><xsl:for-each select=&quot;cricket/player&quot; order-by =&quot;-catches&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td><xsl:value-of select=&quot;name&quot;/></td> </li></ul><ul><li><td><xsl:value-of select=&quot;no_50&quot;/></td> </li></ul><ul><li><td><xsl:value-of select=&quot;no_100&quot;/></td> </li></ul><ul><li><td><xsl:value-of select=&quot;catches&quot;/></td> </li></ul><ul><li></tr> </li></ul><ul><li></xsl:for-each> </li></ul><ul><li></table> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    32. 32. Patterns <ul><li>The patterns supported in XSL are: </li></ul><ul><ul><li>Sorting </li></ul></ul><ul><ul><li>Operators </li></ul></ul><ul><ul><li>Filtering </li></ul></ul>Letters after sorting
    33. 33. Sorting <ul><li>The default sorting is ascending order. </li></ul><ul><li>The ‘-’ sign is used to sort in descending order. </li></ul>The chart is organized in the descending order of catches
    34. 34. Operators XSL supports the se operators: / ./ // .// * @ = /*/name */* @* //name
    35. 35. Filtering and Logical Operators <ul><li>Filter operations can contain expression such as Boolean expression, AND, OR, and NOT expressions </li></ul><ul><li>The different logical operators that can be used are: </li></ul>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
    36. 36. Templates <ul><li>Templates are the instructions in an XSL style sheet, which control the conversion of element and its content. </li></ul><ul><li>It is represented by <xsl:template>…</xsl:template> </li></ul><ul><li>It is applied with the <xsl:apply-templates/> element </li></ul><ul><li>The template has two parts: </li></ul><ul><ul><li>The matching part </li></ul></ul><ul><ul><li>The processing part </li></ul></ul>Matching part Processing part
    37. 37. Types of Matching Matching Matching by name Matching by ancestry Matching several names Matching the root Wildcard matches Matching by ID Matching by attributes
    38. 38. Handling Expressions <ul><li>XSL supports five types of Expressions. These are: </li></ul><ul><ul><li>Node Sets </li></ul></ul><ul><ul><li>Booleans </li></ul></ul><ul><ul><li>Strings </li></ul></ul><ul><ul><li>Numbers </li></ul></ul><ul><ul><li>Result Tree Fragments </li></ul></ul>
    39. 39. 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
    40. 40. xsl:import and xsl:include <ul><li>Style sheets created by other developers can be imported using the xsl:import </li></ul><ul><li>The syntax for importing style sheets is: </li></ul><ul><li><xsl:import href= ‘another stylesheet.xsl’/> </li></ul><ul><li><xsl:import href= ‘another stylesheet1.xsl’/> </li></ul><ul><li>All the different style sheets imported are arranged in an import tree. </li></ul><ul><li>A new node is created in the import tree when a style sheet is imported </li></ul>
    41. 41. 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
    42. 42. Summary-1 <ul><li>XML is portable. An XML document can be sent from one system to another, and even from application to application, without modifying the content. </li></ul><ul><li>A style sheet is a set of instructions to display documents. </li></ul><ul><li>Style sheets can be written in several languages. Two of these are: </li></ul>
    43. 43. <ul><li>Cascading Style Sheets (CSS), an extension of HTML </li></ul><ul><li>eXtensible Stylesheet Language (XSL), an XML specific styling language </li></ul><ul><li>The selector identifies the tag to which the style applies, and the declaration provides the style rules applied, to the selector . </li></ul>
    44. 44. Summary-2 <ul><li>The list of selectors includes Simple selectors, Contextual selectors and Multiple selectors. </li></ul><ul><li>Contextual Selectors help to differentiate between the different occurrences of a tag. </li></ul><ul><li>The Multiple Selector is used to assign the same style rule to different elements. One declaration can be applied to several selectors. </li></ul><ul><li>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 </li></ul>
    45. 45. <ul><li>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. </li></ul><ul><li>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. </li></ul>
    46. 46. Summary-3 <ul><li>The instructions that control how an element and its content should be converted in an XSL style sheet, are called templates. </li></ul><ul><li>XSL provides support for the following patterns: </li></ul><ul><ul><li>Sorting </li></ul></ul><ul><ul><li>Operators </li></ul></ul><ul><ul><li>Filtering </li></ul></ul><ul><li>A typical template element looks like this: </li></ul><ul><li><xsl:template match = &quot;myElement&quot;> </li></ul><ul><li>Types of Matching </li></ul><ul><ul><li>Matching by attribute </li></ul></ul><ul><ul><li>Matching by ID </li></ul></ul><ul><ul><li>Matching by wildcard </li></ul></ul><ul><ul><li>Matching by root </li></ul></ul><ul><ul><li>Matching by name </li></ul></ul>