GroupingCommentsHow to display elements?How to display an XML document using a CSS?XSLDefinitionsXSL uses TemplatesSorting: order-by attributeHow to filter Information?TitleStyle Sheet • How to render the content of an XML document on a page? • Two mechanisms: CSS: Cascading Style Sheets A. Bellaachia Page: 22 XSL (the eXtensible Style sheet Language)CSS Definitions: • CSS: Cascading Style Sheets • Simple syntax • It is a rule-based style sheet language. CSS Rule Syntax: • The CSS syntax is made up of three parts: 9 a selector: the element/tag you wish to define. 9 A declaration: a property: of the element/tag a value: to be assigned to the property. A. Bellaachia Page: 22 • General syntax: selector { property: value ; another_property : anothervalue; … }• Example: p { text-align: center; color: black; font-family: arial } Grouping • In order to decrease repetitious statements within style sheets • Group selectors and declarations. • Example: All of the headings in a document could be given identical declarations for all heading in a document: H1, H2, H3, H4, H5, H6 { color:red; Text-align:left; font-family: sans-serif } A. Bellaachia Page: 22 • An HTML example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE> Introduction to XML </TITLE> <STYLE type="text/css"> body {color: Blue; margin: 6em };H1, H2, H3, H4, H5, H6 { color: Red} </STYLE> </HEAD> <BODY> <H1>Under Construction…</H1> <P> Please bookmark ... </BODY> </HTML> Comments • Similar to comments in C. A. Bellaachia Page: 22 • An example: /* Comments cannot be nested */CSS for XML document Objectives: • XML relies more on style sheets than HTML. • Help XML authors display and present their own elements for XML readers. How to display elements? • Elements can be displayed inline: do not cause line breaks block: cause line breaks. • Set style sheet properties for elements. • Example: course_catalog_embedded_css.xml Style Sheet Properties: A. Bellaachia Page: 22 CSS Background CSS Text CSS Font CSS BorderCSS Margin CSS Padding CSS List CSS Dimension CSS Classification CSS Positioning CSS Pseudo-class CSS Pseudo-element CSS Media TypesA. Bellaachia Page: 22How to display an XML document using a CSS? • Linked: 9 Use PI right after the XML declaration. <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="course_catalog.css"?> … your XML elements … 9 Example: Course_catalog_linked_css.xml • Embedded <?xml version="1.0"?> <?xml-stylesheet type="text/css" ?> <your_start_tag xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional"> <HTML:STYLE> … your CSS rules … </HTML:STYLE> … You XML elements … </your_start_tag > A. Bellaachia Page: 22 9 Example: Course_catalog_embedded_css.xmlXSL Definitions • It is the preferred style sheet language of XML • It is much more sophisticated than the CSS. • XSL is a standard recommended by the World Wide Web Consortium. • Requirement: In order to process an XML document using XSL, you need an XML parser with an XSL Engine. Example: Internet Explorer 5.0. • XSL is constituted of three main components (www.w3.org): A transformation language known as XSLT An expression language for addressing parts of XML documents, known as Xpath A vocabulary of formatting objects with their associated formatting properties, known as XSL-FO. XSL Declaration: A. Bellaachia Page: 22 • W3C XSL Recommendation: <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">• Internet Explorer method: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> XSL uses Templates • XSL uses one or more templates to define how to output XML elements. • A match attribute is used to associate the template with an XML element. • Since the style sheet is an XML document itself, the document begins with an xml declaration: 9 <?xml version='1.0'?> 9 The xsl:stylesheet tag in the second line defines the start of the stylesheet. 9 The xsl:template tag in the third line defines the start of a template: A. Bellaachia Page: 22 The template attribute match="/" associates (matches) the template to the root (/) of the XML source document.9 The rest of the document contains the template itself. In the example below: <HTML>….</HTML> defines the template into which we want to insert the data from our XML file above. 9 The last two lines that defines the end of the template and the end of the style sheet. A. Bellaachia Page: 22 • Example: An XSL file. <?xml version='1.0'?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <html> <body> <table border="2" bgcolor="yellow"> <tr> <th>Title</th> <th>Location</th> </tr> <xsl:for-each select="courses/course"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="location"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>XSL Elements <xsl:value-of> Element • It is used to select XML elements into the output stream of the XSL transformation. • the syntax for the select attribute value is called an XSL Pattern. • It works like navigating a file system where a forward slash (/) selects subdirectories. • The result of the transformation will look like this: Title Location Part I: Introduction to Oracle 8i Vienna Part II: Introduction to Oracle 8i Vienna Introduction to XML Tysons Introduction to Java Tysons <xsl:for-each> Element A. Bellaachia Page: 22 9 The XSL <xsl:for-each> element can be used to select XML elements into the output stream of the XSL transformation.9 The xsl:for-each element locates elements in the XML document and repeats a part of the template for each one. Sorting: order-by attribute • Add this attribute to your for-each element in your XSL file like this: <xsl:for-each select="courses/course" order-by="+ location"> • The order-by attribute parameters: 9 (+) or (-) sign, to define an ascending or descending sort order 9 A sorting element. 9 Sort Numbers: A. Bellaachia Page: 22 o Order-by=number(PRICE)• Example: <?xml version='1.0'?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
View Full Document
Unlocking...