1 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Stylesheets CSS:Cascading Style Sheets XSL(T):eXtended Stylesheet Language (Transformations)

2 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 CSS CSS is known from HTML Specifies how the viewer shall format the individual tags

3 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 A html file Disney Corp. Employees Donald Duck Mickey Mouse Projects Second project: Paradisvej 111 First project: Consert house Sum of time spend is 561

4 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Looks like this in MSIE 7.0

5 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 A CSS stylesheet <!-- h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: oblique; color: #FFFF00; background-color: #CC0000; border: medium dashed #000000; } body { font-family: "Courier New", Courier, mono; font-size: 14px; font-style: normal; color: #0000FF; background-color: #00FF33; } --> Disney Corp. In the html- document In the browser

6 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 XML documents can be formatted with CSS Donald Duck Mickey Mouse

7 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 The stylesheet Employee { display: block; font-family: "Courier New", Courier, mono; font-size: 14px; font-style: normal; color: #0000FF; background-color: #00FF33; } Project { display: block; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: oblique; color: #FFFF00; background-color: #CC0000; border: medium dashed #000000; } Project:before { content: attr(ProjectName);} Doesn't work with MSIE 7, but does in Firefox

8 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 The result MSIE 7.0Firefox 2.0

9 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Advances/drawbacks in using css for formatting xml Some advances –Oriented against formatting –Known from html –Internet Explorer 5+ and Mozilla/Firefox can show css Some drawbacks: –Can not collect a node in one place and use it in another –Can not handle siblings –Do not have control structures (if, foreach....) –Can not make calculation and store variables –Is browser dependent e.g. how do you show attributes in MSIE? XSL and CSS may be combined –Then formatting is done by css and transforming with xsl.

10 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 XSL: Extensible Stylesheet Language Transformations (XSLT) Is used for transforming XML-documents –Transform an XML document in one language to another XML-document in another language –Use XPath to locate nodes in the tree –Construct a transformation for the node –Use an xsl-processor to do the work XSLT-documents contains template rules –A template rule has a pattern specifying the nodes it matches and template to be instantiated and output when a match is found.

11 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 XSLT processors An XSLT-processor transforms one XML-tree into another MS Internet Explorer 5.5+ Server side and in applications: –Apache Xalan as jar or dll. Source code in Java and C++. Might be used together with java based webservers (as Apache ;-). But also with other applications. –MSXML dll Can be used with MS Information Server Integrated in.Net But also in other applications And probably many more Make your own

12 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 A XML document Use this stylesheet as default. Transforms XML to HTML

13 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 A XSL document Donald Duck Mickey Mouse

14 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Stylesheet A XSLT document is a XML-document itself xsl:stylesheet is the root element in the document.

15 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Template The template element matches specific nodes Uses XPATH statement in the match criteria In XSLT, there are two trees: a source tree and a result tree –The source tree is the original tree –The result tree is the result of the transformation e.g. a html document or a reduced data set It is only possible to transform to documents that can be described as trees e.g. html and rtf but not pdf The templates describes how to transform the nodes in the source tree

16 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 For each root element: Insert og The result of the transformations of nodes below the root are insert by An example - Transformation of root Continue...

17 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Foreach Employee element: Insert the value of the name attribute and the xhtml-tag into the result In XPath attributes are referred and elements without. An example - Transformation of

18 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Donald Duck Mickey Mouse Is a tree structure The result

19 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 In a Picture company.xml company.xsl XSLT Processor Input structure to the XSLT-processor Control program to the XSLT-processor company2.xml Output from the XSLT-processor Browser Might be xhtml company3.html company.css Input to other programs

20 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Iteration XSLT makes it possible to: –Itererate through the nodes Element for-each –Sort nodes Element sort –Attribut ascending (i.e., A-Z) –Attribut descending (i.e., Z-A)

21 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Employees Projects It is possible to iterate through the elements – may replace recursion. Iteration Insert title in the document Foreach employee element Sort by name

22 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Disney Corp. Employees Donald Duck Mickey Mouse Projects Paradisvej 111 Concert house The result

23 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Conditions Use conditions –As the statement –Use element Similar to the switch statement in Java or C# Has the child elements and – element: The content is used with the condition is true – element: used when no conditions i the elements is true

24 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 First project: Second project: Another project is simlar to a switch-statement in Java or C# Example - Conditions Condition

25 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Copy nodes Copy nodes directly from source tree to result tree –makes a copy of the node. –places it on the given place in the result tree. –Child nodes and attributes are not copied –Makes a copy of the sub tree –Does also copy childs, attributes etc.

26 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Variables It is possible to declare variables with The variable can later be referred with $varnavn Sum is declared and assigned to the value of Sum of time spend is

27 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 XsltProc Can be download from xmlsoft.com But easier: Unpack the XsltProc.zip to the folder of the xml and xsl files Result XSL-fileXML-file

28 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Result Disney Corp. Employees Donald Duck Mickey Mouse Projects First project: Concert house Second project: Paradisvej 111 Sum of time spend is 561 In the browser

29 XMLXSL(T) and CSS NOEA/PQC (rev. fen) 2007 Supplementary reading etc. Peters XML-editor – freewww.iol.ie/~pxe skew.org/xml/stylesheets/treeview/html/ Example of advanced stylesheet, that can show a xml treeskew.org/xml/stylesheets/treeview/html/ GNU based xml-tools. Developed to Linux, but there are versions for Windows and Solaris.