Fundamentals of Web-Centric Development

1. Fundamentals of Web-Centric Development Presentation 11: XML technologies part 2: XSL, XSLT, XSL-FO, XPath & XML Programming

2. Outline • XML recap • Formatting – CSS or XSL? • XPath • XSL/XSLT • XSL-FO • XML Programming

3. XML markup recap • XML based on SGML (subset of) • Like SGML for structure not layout (as HTML) • XML targets the Internet – but is also being used for application exchange formats (Open Office, XMI) – CSVs • XML is an W3C Recommendation • http://www.w3.org/TR/REC-xml • XML Namespaces for multiply namespaces • DTD’s or XML Schemas for structure

4. Local definitions vs public in XML Schema • Instead of using the ”type” system • Use local definitions • Another public variant is using ”ref” How may this be done using the ”type” approach instead?

5. Formatting XSL & CSS • XML is only content – no formatting • Possible to transform the data to XHTML (or other) using JavaScript og server-side • The W3C ideal is using CSS or XSL – eXtensible Style Sheets • CSS is most common today– but XSL has more features

6. XSL vs CSS • W3C made both XSL and CSS: • The Extensible StyleSheet Language • XML based language for the formatting of document • … which by some is regarded as more advantageous compared with the more cryptic CSS • XSL consists of XSL-FO (Formatting Objects), the XSL Transformations language (XSLT) and XPath for defining and accessing part of the XML document • Exactly the same job may however be solved by using server-side programming • … but of course XSLT may be used client-side to relief the server (it can also be applied server-side)

7. XSL vs CSS II – Why both? • Why Both (XSL & CSS)? • Well – of course there are practical reasons • If you have already learned CSS & JSP, it takes some efforts to master XSL to the same degree • In fact XSL-FO is not fully implemented everywhere • … but what does the W3C have to say?

8. XSL vs CSS III - differences

9. When to use XSL & CSS (IIII) • Why does W3C recommend two different style languages? Which one should you use? Basically, the rule can be summarized very succinctly: • Use CSS when you can, use XSL when you must. • http://www.w3.org/Style/CSS-vs-XSL • You may choose to use CSS alongside XSLT when you are dealing with XHTML • In fact this is the most common solution today

10. The 3 Main Technologies of XSL • XSLT, a language for transforming information • XSL or XSL-FO, a language for formatting information • XPath, a language for defining parts of an XML document and accessing them • Each of these elements could fill an entire class. • You will only need to be acquainted with the overall functionality of these

11. XPath • Flexible notation for navigating around trees • Resembles notation used in Unix filesystems • A basic technology that is widely used • uniqueness and scope in XML Schema • pattern matching an selection in XSLT • relations in XLink and XPointer • computations on values in XSLT and XQuery • XPath is not written in XML • XPath is a W3C Standard

12. Location Paths in XPath • location pathevaluates to a sequence of nodes • sequence is sorted in document order • sequence will never contain duplicates • The location path is a sequence of different steps • A location stepconsists of • an axis(a direction of selection– successors, descendants) • a nodetest(identifies a node within the axis) • Some predicates(a statement/expression yielding a boolean) axis :: nodetest [predicate] child::price[price=9.90] (example)

13. Evaluating Location Paths • Location Paths may consist of several steps • A step maps a context nodeinto a sequence • This also maps sequences to sequences • each node is used as context node • and is replaced with the result of applying the step • The path then applies each step in turn, using the former step as the sequence to work on • It may be absolute or relative (/cd/price or cd/price)

14. Example – finding all C nodes

15. What are we looking for here?

16. XPath Axes • An axis is a sequence of nodes • The axis is evaluated relative to the context node • XPath supports 12 different axes • child, attribute, descendant, following, parent, preceding, ancestor, self, following-sibling, descendant-or-self, preceding-sibling, ancestor-or-self • These all have a direction, either forward, backward or stable (attribute)

17. XPath Node Tests • text() - child::text() all text nodes of current node • comment() - child::comment() • processing-instruction() • node() - child::node() all children of current node • * - attribute::* all attributes of current node • More node tests exists

18. XPath Predicates • General XPath expressions evaluated with the current node as context • Result is coerced (translated) into a boolean • a number yields true if it equals the context position • a string yields true if it is not empty • a sequence yields true if it is not empty • Example: child::price[price=9.90] - selects all price elements that are children of the current node with a price element that equals 9.90 • Example:child::cd[position()<6] Selects the first five cd children of the current node

19. XPath Abrivated Syntax • Tedious work entering XPath syntax • Enter: the abrivated syntax Table from http://www.w3schools.com

20. XPath Examples

21. XPath Advanced • This presentation has only shown the basic elements • Feel free to explore further • Expressions • Numerical, Equality, Relational, Boolean, Path, Filter • Variable References • $test • Functions • 106 with namespace fn=http://www.w3.org/2004/07/xpath-functions • Examples: fn:avg((1,2,3,4)), fn:round(23.5)

22. XSLT • XSL Transformations • Language for transforming a format neutral XML document into another XML document – e.g. XHTML or WML for presentation • May also add new elements or remove elements • XSLT relies heavily on XPath for pattern matching • Specifying patterns for template rules • Selecting nodes for processing • Computing boolean conditions • Generating text contents for the output document

23. XSLT Template rules • An XSLT stylesheet contains template rules • The processor finds the most specific rule for the document root • It then executes the template body • Find the template rules that match the contex node • Select the most specific one • Evaluate the body (a sequence constructor)

24. Applying Templates • <xsl:apply-templates> element applies a template rule to the current element or to the current element's child nodes

25. Name, Mode, Priority, Sorting & Grouping • Templates may have other attributes • name: used to call templates like function • mode: used to restrict the candidate templates • priority: used to determine specificity • Other features include: • Conditionals (<xsl:if/>, <xsl:choose/>) • Control statemetnts (<xsl:for-each/>) • Grouping (<xsl:for-each-group/>) • Sorting (<xsl:sort/>) • Numbering (<xsl:number/>) • Functions (<xsl:function/>) • Parameters (<xsl:param/>)

26. XSL/XSLT example • Transforming a XML document using XSLT invovles 2 tree structures • Source tree (original XML document) • Result tree (the transformed document) • AND of course the XSL document! (so totally 3) • In this example • We take an XML document which could have been generated from a RDBMS database • We want to transform this XML document into an XHTML document for browsers • And maybe we COULD transform it into a PDF, and a WML document (for mobile phones) or whatever we might need in the future

27. 1 <?xml version = "1.0"?> 2 <?xml:stylesheet type = "text/xsl" href = "games.xsl"?> 3 4 <!-- Fig. 20.23 : games.xml --> 5 <!-- Sports Database --> 6 7 <sports> 8 9 <game id = "783"> 10 <name>Cricket</name> 11 12 <paragraph> 13 More popular among commonwealth nations. 14 </paragraph> 15 </game> 16 17 <game id = "239"> 18 <name>Baseball</name> 19 20 <paragraph> 21 More popular in America. 22 </paragraph> 23 </game> 24 25 <game id = "418"> 26 <name>Soccer (Football)</name> 27 28 <paragraph> 29 Most popular sport in the world. 30 </paragraph> 31 </game> 32 33 </sports> XML dokument“Source tree”Games.xml Value type specifies that games.xsl is a text/xsl file. A processing instruction that references the XSL stylesheet games.xsl.. Wait – isn’t there something wrong here – why do we have XSL embedded in the XML documet? We will look at this later

28. 1 <?xml version = "1.0"?> 2 3 <!-- Fig. 20.24 : elements.xsl --> 4 <!-- A simple XSLT transformation --> 5 6 <!-- reference XSL stylesheet URI --> 7 <xsl:stylesheet version = "1.0" 8 xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"> 9 10 <xsl:output method = "html" omit-xml-declaration = "no" 11 doctype-system = 12 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 13 doctype-public = "-//W3C//DTD XHTML 1.0 Strict//EN"/> 14 15 <xsl:template match = "/"> 16 17 <html xmlns="http://www.w3.org/1999/xhtml"> 18 19 <head> 20 <title>Sports</title> 21 </head> 22 23 <body> 24 25 <table border = "1" bgcolor = "cyan"> 26 27 <thead> 28 29 <tr> 30 <th>ID</th> 31 <th>Sport</th> 32 <th>Information</th> 33 </tr> 34 35 </thead> XSL dokumentElements.xsl The stylesheet start tag—which begins the XSL stylesheet. Element xsl:output writes an XHTML document type declaration to the result tree. The match attribute to select the document root of the source document (i.e., game.xml).

29. Element xsl:for-each iterates through the source XML document and search for game elements. Element value-of retrieves attribute id’s value and place it in a td element in the result tree. 36 37 <!-- insert each name and paragraph element value --> 38 <!-- into a table row. --> 39 <xsl:for-each select = "sports/game"> 40 41 <tr> 42 <td><xsl:value-of select = "@id"/></td> 43 <td><xsl:value-of select = "name"/></td> 44 <td><xsl:value-of select = "paragraph"/></td> 45 </tr> 46 47 </xsl:for-each> 48 49 </table> 50 51 </body> 52 53 </html> 54 55 </xsl:template> 56 57 </xsl:stylesheet> Elements.xsl These three select values are all XPath expressions. Other types of XPath uses include / for navigating to child nodes, and using * wildcards for selecting unknown elements. Other types of usage includes indexing e.g. [1] and selecting attributes using @

30. XHTML dokument“result” treeResult of XSLT tranformation

31. More examples? • Will only sedate you with boredom and a sad feeling of helplessness • Please go try it out yourself instead • Plenty of examples at: • http://www.w3schools.com/xsl/default.asp • Assignment (5 min.): • Try making an XSL document which will print the following bullet list HTML document • Cricket – Popular among commenwealth nations (ID: 783) • etc • Consider the problems when using the XML document with several XSL documents. How may it be done?

32. Not nice with embedded XSL? • You may use JavaScript to separate gracefully <html> <body> <script type="text/javascript"> // Load XML var xml = new ActiveXObject("Microsoft.XMLDOM") xml.async = false xml.load("cdcatalog.xml") // Load XSL var xsl = new ActiveXObject("Microsoft.XMLDOM") xsl.async = false xsl.load("cdcatalog.xsl") // Transform document.write(xml.transformNode(xsl)) </script> </body> </html> • Detect type of browser and load proper XSL doc

33. … and server-side as well • You may also use server-side programming for this <% 'Load XML set xml = Server.CreateObject("Microsoft.XMLDOM") xml.async = false xml.load(Server.MapPath("cdcatalog.xml")) 'Load XSL set xsl = Server.CreateObject("Microsoft.XMLDOM") xsl.async = false xsl.load(Server.MapPath("cdcatalog.xsl")) 'Transform file Response.Write(xml.transformNode(xsl)) %> • … and of course – you dont really need XSL then – as the same job may be done in Java, C#, VB etc

34. Browser Troubles in Paradise • “XSLT in InternetExplorer 5 (and 5.5) is NOT compatible with the official W3C XSL Recommendation.” • “Internet Explorer 6 fully supports the official W3C XSLT Recommendation. “ • “ Netscape 6 isn't fully supporting the official W3C XSLT Recommendation.” • “ Netscape 7 supports the official W3C XSLT Recommendation.” • http://www.w3schools.com/xsl/xsl_browsers.asp

35. Cross Browser DOM Handling

36. XSL-FO • XSL-FO is a language for formatting XML data • XSL-FO stands for Extensible Stylesheet Language Formatting Objects • XSL-FO is a W3C Recommendation • XSL-FO is now formally named XSL • XSL-FO is not used extensively with WWW technologies yet, as CSS and XSLT may be used together. This may change however! • PDF / Web forms from XSL-FO (Scriptura)

37. XSL-FO Formatting instructions: • Block Margin, Border, Padding, Background • Block Styling Attributes: • font-family • font-weight • font-style • font-size • font-variant • text-align • text-align-last • text-indent • start-indent • end-indent • wrap-option (defines word wrap) • break-before (defines page breaks) • break-after (defines page breaks) • reference-orientation (defines text rotation in 90" increments) • Which in general will handle the same stuff as CSS

38. Other XSL-FO elements • Areas, Output, Flow, Pages, List, Tables • All of which we will not cover here!

39. XSL-FO Example Below is a XSL-FO document And the output would be

40. XML, XML-FO & XSLT Example Below is a XML document We apply some XSLT including XML-FO And we get a result

41. Programmatic XML access? • Many API’s & framework for XML handling • For Java: • JDOM: http://www.jdom.org/ • JAXP: http://java.sun.com/xml/jaxp/ • SAX: http://www.saxproject.org/ • C#: • using System.Xml / System.Xml.Xsl; • Build-in support for XML, XSD, XSLT, XPATH, SOAP • XMLSerializer – Object / XML mapping • http://www.csharphelp.com/archives/archive78.html • Validating XML document against DTD, XSD, XDR • http://support.microsoft.com/kb/307379

42. C# System.Xml and System.Xml.Schema • Validating a Document with DTD in C#

43. Mapping Tools • Mapping Tools • XML to C++/C#/Java • XML Spy 2007

44. A JDOM Example: Double Sugar Access all ingredients Get the elements whose attribute “name” equals sugar Get the amount attribute and double it!

45. Other XML Technologies • XQuery: Query Language of XML • XLink: XML hyperlinks • XPointer: named anchors • All W3C Recommendations • Limited browser support • Study these yourselves