<?xml version = 1.0 encoding= windows-874?> <?xml-stylesheet type= text/css href= #xmldocs?> <style id= xmldocs > element-name{ } </style>

Size: px

Start display at page:

Download "<?xml version = 1.0 encoding= windows-874?> <?xml-stylesheet type= text/css href= #xmldocs?> <style id= xmldocs > element-name{ } </style>"

Evangeline Ford
5 years ago
Views:

1 XML Displaying

2 Displaying XML: CSS A modern web browser and a cascading style sheet (CSS) may be used to view XML as if it were HTML A style must be defined for every XML tag, or the browser displays it in a default mode All display characteristics of each element must be explicitly defined Elements are displayed in the order they are encountered in the XML

3 CSS vs. XML Internal style sheets (แทรกไว ก อน element ล ก) <?xml version = 1.0 encoding= windows-874?> <?xml-stylesheet type= text/css href= #xmldocs?> <style id= xmldocs > element-name{ } </style> External style sheets (ใช PI อ างถ งเอกสาร css) <?xml version="1.0 encoding= windows-874?> <!DOCTYPE IdCards SYSTEM idcard.dtd"> <?xml-stylesheet type="text/css" href="style.css"?> processing instruction (PI)

4 Displaying XML with CSS Must put a processing instruction at the top of your XML file (but below the XML declaration): <?xml-stylesheet type="text/css" href="style.css"?> Must specify all display characteristics of all tags, or it will be displayed in default mode (whatever the browser wants)

5 CSS Demonstration XML Doc Cascading Stylesheet (CSS) Web Server

6 XML

7 CSS

8 XML display

9 XSL consists of four parts: XSLT - a language for transforming XML documents XPath - a language for navigating in XML documents XSL-FO - a language for formatting XML documents (discontinued in 2013) XQuery - a language for querying XML documents With the CSS3 Paged Media Module, W3C has delivered a new standard for document formatting. So, since 2013, CSS3 is proposed as an XSL-FO replacement.

10 XSL (extensible stylesheet language) Correct Style Sheet Declaration <xsl:stylesheet version="1.0" xmlns:xsl=" or <xsl:transform version="1.0" xmlns:xsl="

11 Transforming XML: XSLT XML Stylesheet Language Transformations (XSLT) A markup language and programming syntax for processing XML Is most often used to: Transform XML to HTML for delivery to standard web clients Transform XML from one set of XML tags to another Transform XML into another syntax/system

12 XLST Primer XSLT is based on the process of matching templates to nodes of the XML tree Working down from the top, XSLT tries to match segments of code to: The root element Any child node And on down through the document You can specify different processing for each element if you wish

13 XSLT Processing Model XML Doc Source Tree XSLT XML Parser Result Tree Transformation Formatting Formatted Output Stylesheet

14 ต วอย าง XML <?xml version="1.0" encoding="iso "?> <?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?> <catalog> <cd> <title>empire Burlesque</title> <artist>bob Dylan</artist> <country>usa</country> <company>columbia</company> <price>10.90</price> <year>1985</year> </cd>... </catalog>

15 ต วอย าง xsl <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <body> <h2>my CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th align="left">title</th> <th align="left">artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

16 ต วอย าง การแสดงผล

17 The <xsl:value-of> Element <td><xsl:value-of select="catalog/cd/title"/></td> <td><xsl:value-of select="catalog/cd/artist"/></td> The <xsl:for-each> Element <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each>

18 Filtering the Output <xsl:for-each select="catalog/cd[artist='bob Dylan']"> Legal filter operators are: = (equal)!= (not equal) < less than > greater than

19 <xsl:for-each select="catalog/cd[artist='bob Dylan']"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each>

20 XSLT <xsl:if> Element <xsl:for-each select="catalog/cd"> <xsl:if test="price > 10"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:if> </xsl:for-each>

21 XSLT <xsl:sort> Element <xsl:for-each select="catalog/cd"> <xsl:sort select="artist"/> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each>

22 XSLT <xsl:choose> Element <xsl:choose> <xsl:when test="price > 10"> <td bgcolor="#ff00ff"> <xsl:value-of select="artist"/> </td> </xsl:when> <xsl:otherwise> <td><xsl:value-of select="artist"/></td> </xsl:otherwise> </xsl:choose>

23 ต วอย างการแสดงผลโดยใช XSLT <xsl:choose> Element

24 <xsl:choose> <xsl:when test="price > 10"> <td bgcolor="#ff00ff"> <xsl:value-of select="artist"/></td> </xsl:when> <xsl:when test="price > 9"> <td bgcolor="#cccccc"> <xsl:value-of select="artist"/></td> </xsl:when> <xsl:otherwise> <td><xsl:value-of select="artist"/></td> </xsl:otherwise> </xsl:choose>

25 ต วอย างการแสดงผลโดยใช XSLT <xsl:choose> Element

26 XSLT <xsl:applytemplates> Element

27 เคร องหมายท ใช ในการกาหนดร ปแบบ (select and match) / บ งบอกสถานะ element เช น persons/person // พ จารณา element ท อย ต ากว า ท ก element เช น booklist//title. แทน element ป จจ บ น เช ระบ attribute ของ element เช น person/@id * แทนท งหมด(attribute or element) เช น person/@*

28 XSLT on the client <!DOCTYPE html> <html> <head> <script> function loadxmldoc(filename) { if (window.activexobject) { xhttp = new ActiveXObject("Msxml2.XMLHTTP"); } else { xhttp = new XMLHttpRequest(); } xhttp.open("get", filename, false); try {xhttp.responsetype = "msxml-document"} catch(err) {} // Helping IE11 xhttp.send(""); return xhttp.responsexml; } function displayresult() { xml = loadxmldoc("cdcatalog.xml"); xsl = loadxmldoc("cdcatalog.xsl"); // code for IE if (window.activexobject xhttp.responsetype == "msxml-document") { ex = xml.transformnode(xsl); document.getelementbyid("example").innerhtml = ex; } // code for Chrome, Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) } { xsltprocessor = new XSLTProcessor(); xsltprocessor.importstylesheet(xsl); resultdocument = xsltprocessor.transformtofragment(xml, document); document.getelementbyid("example").appendchild(resultdocument); } </script>

29 </head> <body onload="displayresult()"> <div id="example" /> </body> </html>

30 XSLT on the server <?php // Load XML file $xml = new DOMDocument; $xml->load('cdcatalog.xml'); // Load XSL file $xsl = new DOMDocument; $xsl->load('cdcatalog.xsl'); // Configure the transformer $proc = new XSLTProcessor; // Attach the xsl rules PHP $proc->importstylesheet($xsl); echo $proc->transformtoxml($xml);?> ASP <% 'Load XML file set xml = Server.CreateObject("Microsoft.XMLDOM") xml.async = false xml.load(server.mappath("cdcatalog.xml")) 'Load XSL file set xsl = Server.CreateObject("Microsoft.XMLDOM") xsl.async = false xsl.load(server.mappath("cdcatalog.xsl")) 'Transform file Response.Write(xml.transformNode(xsl)) %>

XSL Languages. Adding styles to HTML elements are simple. Telling a browser to display an element in a special font or color, is easy with CSS.

XSL Languages. Adding styles to HTML elements are simple. Telling a browser to display an element in a special font or color, is easy with CSS. XSL Languages It started with XSL and ended up with XSLT, XPath, and XSL-FO. It Started with XSL XSL stands for EXtensible Stylesheet Language. The World Wide Web Consortium (W3C) started to develop XSL