XSLT: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
 
(16 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{Stub}}
{{Stub}}


= Basic XSLT Tutorial =
== Definition ==


{{quotation|XSLT is designed to transform XML documents into other XML documents. The original document is not changed; rather, a new document is created based on the content of an existing one}} ([http://en.wikipedia.org/wiki/Xslt Wikipedia], retrieved 21:32, 30 May 2007 (MEST)).


{{quotation|A transformation expressed in XSLT is called a stylesheet. A stylesheet contains a set of template rules. A template rule has two parts: a pattern which is matched against nodes in the source tree and a template which can be instantiated to form part of the result tree. This allows a stylesheet to be applicable to a wide class of documents that have similar source tree structures.}}
([http://www.w3.org/TR/xslt XSL Transformations (XSLT)], retrieved 21:32, 30 May 2007 (MEST))


==== Objectives ====
{{quotation | A transformation expressed in XSLT describes rules for transforming a source tree into a result tree. The transformation is achieved by associating patterns with templates. A pattern is matched against elements in the source tree. A template is instantiated to create part of the result tree. The result tree is separate from the source tree. The structure of the result tree can be completely different from the structure of the source tree. In constructing the result tree, elements from the source tree can be filtered and reordered, and arbitrary structure can be added.}}([http://www.w3.org/TR/xslt XSL Transformations (XSLT)], retrieved 21:32, 30 May 2007 (MEST))


* Understand the purpose of XSLT
This page just provides a few links ....
* Do simple transformations from XML to HTML
* Understand the most simple XPath expressions (tag names)


==== Prerequisites ====
== EduTechWiki Tutorials ==


* Editing XML (being able to use a simple DTD)
* [[XSLT Tutorial - Basics]]
* XML namespaces (some)
* [[XPath tutorial - basics‎‎]]
* HTML and CSS (some)
* [[XSLT to generate SVG tutorial‎‎]]


[http://creativecommons.org/licenses/by-nc/2.0/  [[Image:xslt-basics-1.png]] ]
== In education ==


==== Warning ====
Since some authoring environments favor some sort of XML-based datastructure, XSLT stylesheets can be used to "export" that data to some some delivery format (HTML, PDF, [[IMS Content Packaging]], etc.
An example would be the [[eLML]] framework.


* XSLT is a rather complex transformation language
== Links ==
* I believe that one could distinguish four levels of difficulty:
** '' These slides'' are introductory (level 1)
** Level 2 XSLT is more sophisticated template ordering, conditional expressions, loops, etc.
** Level 3 is advanced XPath expressions
** Level 4 is functional programming with templates


==== Disclaimer ====
=== Manuals  ===


* There may be typos (sorry) and mistakes (sorry again)
* [http://www.mulberrytech.com/quickref/ Mulberry Tech Quick References for XSLT]. Useful!
* Please also consult a textbook !
* [http://www.xslfo.info/reference.aspx www.xslfo.info Reference manual]


</div><div>
=== Specifications, standards and official propaganda  ===


= 1. Introduction Extensible Stylesheet Language Transformations =
;Official Frameworks


* Goals of XSLT
* http://www.w3.org/Style/ and http://www.w3.org/Style/XSL/
* XSLT is a transformation language for XML
* XSLT is a W3C XML language (the usual XML well-formedness criteria apply)
* XSLT can translate XML into almost '' anything'' , e.g.:
** wellfomed HTML (closed tags)
** any XML, e.g. yours or other XML languages like SVG, X3D
** non XML, e.g. RTF (a bit more complicated)


<div>[[Image:xslt-basics-2.png]]</div><div>
* [http://www.w3.org/TR/xslt XSL Transformations (XSLT) Specification] W3C Recommendation 16 November 1999 (Note: you also need Xpath)
* [http://xmlfr.org/w3c/TR/xslt/ Transformations XSL (XSLT)] Traduction fran�aise
* [http://www.w3.org/TR/xsl/ Extensible Stylesheet Language (XSL)] W3C Recommendation October 2001 (this is XSL-FO basically!)
* [http://www.yoyodesign.org/doc/w3c/xsl1/Overview.html Recommandation XSL-1 du W3C en version fran�aise] (XSL-FO)
* See also: [http://www.w3.org/TR/xml-stylesheet Associating stylesheets with XML documents] (W3C proposed recommendation)
* See also: [http://www.w3.org/TR/xpath XML Path Language (XPath)] W3C Recommendation (9/99, used to identify nodes in a XML tree, e.g. within XSLT or Xptr)
* [http://xmlfr.org/w3c/TR/xpath Langage XML Path (XPath)] (traduction française)
* [http://www.w3.org/TR/xpath20/ Xpath 2.0] is used both by XSLT 2.0 and XQuery.
* [[XQuery]] is an XML Query language (built on top of  XPath 2.0. Both XSLT 2.0 and XQuery 2.0 share the same data model).
* [http://www.w3.org/TR/xquery-operators/ XQuery 1.0 and XPath 2.0 Functions and Operators]. This is the specification for functions used both by XQuery 1 and XPath 2.0 (XSLT 2). This still misses a lot, e.g. trigonometric functions that are a must for any kind of visualization. See [http://www.exslt.org/ EXSLT extensions].


== 1.1 History and specifications ==
=== FAQ's ===


<div>
* [http://www.dpawson.co.uk/ XSL FAQ] (good information on XSLT, XPATH, FO)
* [http://www.owal.co.uk:8090/asf/servlet/asf/screen/MainMenu/action/SetAll/screen/DisplayTopics/faq_id/276/project_id/18;jsessionid=b3z05ecq61 FOP FAQ]


==== Specification ====
=== NewsGroups and Mailing Lists  ===


* XSLT 1.0 was formalized as W3C Recommendation on 16/11/99
* [http://www.mulberrytech.com/xsl/xsl-list/ XSL List at MulBerry Tech] ([http://www.mulberrytech.com/xsl/xsl-list/archive/ archive])
* '' [http://www.w3.org/TR/xslt http://www.w3.org/TR/xslt ]''
* XSLT 2.0 is a W3C recommendation since 23 January 2007
* '' http://www.w3.org/TR/xslt20/''
** not implemented in current browsers, but in most good XSLT processors (e.g. Saxon and Xalan)


</div><div>
== Tutorials  ==


==== History ====
=== Introductory Tutorials ===


* Initially, XLS (XSL: eXtensible Stylesheet Language) was a project to replace CSS for both display and print media and to provide support for complex formatting and layout features (pagination, indexing, cross-referencing, recursive numbering, indexing, etc.
* [http://www.nwalsh.com/docs/tutorials/xsl/xsl/slides.html XSL Concepts and Practical Use ] by Paul Grosso and Norman Walsh
* XSLT ('' Extensible Stylesheet Language Transformations'' ) was originally intended as a small part of the larger specification for XSL
* However, when the XSL specification draft became very large and complex it was decided to split the project into XSLT for transformations (that were urgently needed) and XSL for the rest (W3C recommendation of 2001)


</div><div>
* [http://metalab.unc.edu/xml/books/bible/ Chapters from the XML bible] by E.R. Harold: XSLT, Xlinks and Xpointers. Direct acess: [http://www.ibiblio.org/xml/books/bible/updates/ Iblio]. See also his collection of [http://metalab.unc.edu/xml/slides/sd99east/ Slides] (full-day tutorial).


==== Related languages ====
* [http://www.webreference.com/js/column100/ XML and XSLT Programming], a Webreference.com tutorial


* XPath (XML Path language used by XSLT, XQuery, etc.), '' http://www.w3.org/TR/xpath''
* [http://www.objectsbydesign.com/projects/xslt/xslt_by_example.html XSLT by example] at Objects by Design (They also have good XML-&gt;HTML tutorials)
* XSL also called XSL/FO (the formatting language), '' http://www.w3.org/TR/xsl/''
* XQuery (Query language for XML), '' http://www.w3.org/TR/xquery/''


</div></div></div><div>
* [http://metalab.unc.edu/xml/books/bible/updates/14.html E.R. Harolds on-line Book Chapter on XSLT] (good, the book too btw)


= 2. A first glance at XSLT =
* [http://www.ibm.com/developerworks/xml/library/x-hands-on-xsl/ Hands-on XSL, XSL for fun and diversion] ( Don R. Day ). Explains nicely how a rule-based system works. Note: IBM developWorks has dozens of other XSLT-related articles.


<div>
* [http://www.heise.de/ix/artikel/E/2001/01/167/01.shtml XSLT Tutorial I: Basics and first example application] at heise.de


== 2.1 Root of an XSLT file stylesheet ==
* [http://zvon.vscht.cz/HTMLonly/XSLTutorial/Books/Book1/index.html Introduction to XSL] On-line reference tool by Miloslav Nic (part of his [http://zvon.vscht.cz/ZvonHTML/Zvon/zvonTutorials_en.html zvon tutorials])


&lt;?xml version="1.0"?&gt;
* [http://www.xfront.com/ XSL Tutorial] (tutorial to download, by R.Costello)


''&lt;xsl:stylesheet version="1.0"    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;''
* [http://nwalsh.com/docs/tutorials/xsl Walsh XSL Tutorial] Good tutorial, but slide style. Also useful as on-line XSL reference !


''....''
* [http://www.xml.com/pub/a/2005/01/05/tr-xml.html Extending XSLT with EXSLT] by Bob DuCharme, at xml.com (jan 2005)


''&lt;/xsl:stylesheet&gt;''
* [http://www.xml.com/pub/a/2000/07/26/xslt/xsltstyle.html Style-free XSLT Style Sheets], by Eric van der Vlist, July 26, 2000


<div>
=== XSL Templates and tricks ===


==== Mandatory elements ====
* [http://www.jenitennison.com/xslt/index.html Jeni's XSLT Pages] Various very useful hints (mostly from postings to the XSL-List)
* [http://en.wikipedia.org/wiki/XSLT_elements XSLT elements] List of XSLT elements at Wikipedia. This is a good page once you know your [[XSLT Tutorial - Basics|XSLT Basics]]


* XML declaration on top of the file
=== XSLFO Tutorials ===
* A '' stylesheet'' root tag with the following version and namespace attributes:
(should be moved)


  &lt;xsl:stylesheet ''version="1.0"''
* [http://www.dpawson.co.uk/xsl/sect3/bk/index.html XSL-FO] (very good on-line BOOK)
* [http://www.sun.com/software/xml/developers/fop/ FOP Slide Kit]. Technical article from Paul Sandoz (SUN) about slides with FOP
                  ''xmlns:xsl="http://www.w3.org/1999/XSL/Transform"''
&gt;


* XSLT must be wellformed (and also obey the XSLT specification)
=== 3.1 PHP's XSLT processor  ===
* XSLT files usually have the *.xsl extension and should have the '' text/xsl'' or '' application/xml'' mimetype when served by http.


</div></div><div>
* [http://www.tonymarston.net/php-mysql/xsl.html Using PHP 5's XSL extension to perform XSL Transformations], tutorial by Tony Marston (8/2004)


== 2.2 Association of XML and an XSLT file ==
== Software ==


* An XSLT stylesheet is associated with a processing instruction (similar to a CSS stylesheet)
=== XSLT/FO Processors  ===


&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
==== Online ====
* [http://www.online-xslt-processor.tk/ Automatic As You Type Online XSLT Processor]
* [http://www.freeformatter.com/xsl-transformer.html XSLT Transformer] (Freeformater.com)
* [http://www.online-toolz.com/tools/xslt-transformation.php XSLT transformation] (Onlinze-toolz)


&lt;''?xml-stylesheet''
==== Tools for programmers and web servers ====
  ''href="project.xsl" type="text/xsl"''
* [http://saxon.sourceforge.net/ SAXON] The SAXON package is a collection of tools for processing XML documents, e.g. an XSL (XSLT and XPath).<br /> INSTALLED at Tecfa: [http://tecfa2.unige.ch/guides/xml/local/saxon/doc [password protected ] local documentation]. Saxon has extension features that others (Xalan) have not.
* [http://www.xmlsoft.org/XSLT.html Gnome LibXML2 and it's associated XSLT C library]. Used in PHP 5.0. There also command line tools for batch use, including xsltproc that also does XInclude. Installed @ Tecfa
?&gt;
* [http://tclxml.sourceforge.net/tkxsltproc.html tkxsltproc] is a GUI frontend for the Gnome libxslt packages (see above). MacOSX, Win, Linux [9/2004]
* [http://www.gingerall.com/charlie/ga/xml/p_sab.xml Sablotron] Sablotron is a fast, compact and portable XML toolkit implementing XSLT 1.0, DOM Level2 and XPath 1.0. Has some extensions, e.g. multiple output files. This is also the library used in PHP 4.x
* Apache / [http://xml.apache.org/xalan-j/ Xalan-J] is a Java-based XSLT 1.0 processor. Works with Xerces-Java (XML parser). Both are also distributed with other Apache products, like FOP. (installed @ Tecfa)
* Apache / [http://xml.apache.org/fop/index.html FOP] is the world's first print formatter driven by XSL formatting objects. It is a Java application that reads a formatting object tree and then turns it into a PDF document. Installed @ Tecfa.
* [http://xmlroff.sourceforge.net/ xmlroff]. Sun sponsored xsl formatter for productin PDF and PS (2/2003). Early Beta, [not tested yet].


  &lt;yourxml&gt; .... &lt;/yourxml&gt;
=== XSLT Libraries ===


</div><div>
* [http://wwbota.free.fr/XSLT_models/README.html XSLT transforms library] (last update, 2004)
* [http://www.exslt.org/ EXSLT]. This is vital stuff for visualizations ! Some of these are implemented in XSLT processor, eg. libxslt (the popular processor also used in PHP)
* [http://xsltsl.sourceforge.net/ XSLT Standard Library]. The [http://prdownloads.sourceforge.net/xsltsl/ downloads] are also in a different place (4/01)
* [http://nwalsh.com/docbook/xsl/index.html XSL DocBook Stylesheets] by Norman Walsh
* [http://incrementaldevelopment.com/xsltrick/ Gallery of Stupid XSL and XSLT Tricks]
* [http://wwbota.free.fr/XSLT_models/README.html XSLT transforms library] J.M. Vanel 2000-2003 - under GNU Public Licence
* [http://fxsl.sourceforge.net/  FXSL -- the Functional Programming Library for XSLT] (powerful library of functions, written entirely in XSLT, implements higher order functions (HOF), functional composition and currying (partial applications) in XSLT. All standard XPath 2.0 Functions and Operators are implemented as HOF. Other functions implemented are the equivalent of Haskell's Prelude, math functions, text processing, general LR Parsing Framework, ..., etc.)


== 2.3 Basic XSLT ==
=== Editors and Plugins ===


<div>
* See [[XML editor]]s


==== Basic (!) use of XSLT means: ====
[[Category: XML]]
 
[[Category:web standards]]
* writing '' translation rules'' (aka templates) for each XML tag we want to translate
* translating XML to HTML
 
</div><div>
 
==== A simple translation rule (called "template" in XSLT): ====
 
<div>[[Image:xslt-basics-3.png]]</div>
 
</div><div>
 
==== Example 2-1: Translation of a title tag into HTML centered H1 ====
 
XML Source we want to translate:
 
&lt;title&gt;Hello friend&lt;/title&gt;
 
The XSLT rule that does it:
 
<div>[[Image:xslt-basics-4.png]]</div></div></div><div>
 
== 2.4 A complete XSLT example ==
 
<div>
 
==== Example 2-2: Hello XSLT ====
 
</div><div>
 
==== XML file (source) ====
 
* hello.xml
 
&lt;?xml version="1.0"?&gt;
 
''&lt;?xml-stylesheet href="hello.xsl" type="text/xsl"?&gt;''
 
&lt;page&gt;
 
  &lt;title&gt;Hello&lt;/title&gt;
 
  &lt;content&gt;Here is some content&lt;/content&gt;
 
  &lt;comment&gt;Written by DKS.&lt;/comment&gt;
 
&lt;/page&gt;
 
</div><div>
 
==== Wanted result document ====
 
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"&gt;
 
&lt;html&gt;
 
  &lt;head&gt;
 
    &lt;title&gt;Hello&lt;/title&gt;
 
  &lt;/head&gt;
 
  &lt;body bgcolor="#ffffff"&gt;
 
    &lt;h1 align="center"&gt;Hello&lt;/h1&gt;
 
    &lt;p align="center"&gt; Here is some content&lt;/p&gt;
 
    &lt;hr&gt;&lt;i&gt;Written by DKS&lt;/i&gt;
 
  &lt;/body&gt;
 
&lt;/html&gt;
 
</div><div>
 
==== The XSLT Stylesheet ====
 
* hello.xslt
* See next slides for explanations ...
 
&lt;?xml version="1.0"?&gt;
 
&lt;xsl:stylesheet version="1.0"
 
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
 
''&lt;xsl:template match="page"&gt;''
 
    &lt;html&gt; &lt;head&gt; &lt;title&gt; ''&lt;xsl:value-of select="title"/&gt;''
  &lt;/title&gt; &lt;/head&gt;
 
    &lt;body bgcolor="#ffffff"&gt;
 
    '' &lt;xsl:apply-templates/&gt;''
 
    &lt;/body&gt;
 
    &lt;/html&gt;
 
  '' &lt;/xsl:template&gt;''
 
Â
 
  '' &lt;xsl:template match="title"&gt;''
 
    &lt;h1 align="center"&gt; ''&lt;xsl:apply-templates/&gt; ''
&lt;/h1&gt;
 
  '' &lt;/xsl:template&gt;''
 
Â
 
  ''&lt;xsl:template match="content"&gt;''
 
    &lt;p align="center"&gt; ''&lt;xsl:apply-templates/&gt;''
  &lt;/p&gt;
 
  '' &lt;/xsl:template&gt;''
 
Â
 
  '' &lt;xsl:template match="comment"&gt;''
 
    &lt;hr/&gt; &lt;i&gt;''&lt;xsl:apply-templates/&gt;''
&lt;/i&gt;
 
  &lt;/xsl:template&gt;
 
''&lt;/xsl:stylesheet&gt;''
 
</div><div>
 
==== Anatomy of a simple stylesheet ====
 
<div>[[Image:xslt-basics-5.png]]</div></div></div><div>
 
== 2.5 Rule execution order ==
 
# The XSLT engine first looks at the XML file and tries to find a XLT rule that will match the root element
#* E.g. in the above example it will find "page" and then the template for page
# The XSLT processor will then "move" inside the rule element and do further processing
#* HTML elements (or any other tags) will be copied to the output document
#* If an XSLT instruction is found, it will be executed
# '' &lt;xsl:apply-templates/&gt; '' means: "go and look for other rules"
 
E.g. in the above example
 
** the processor dealing with root element "page" will first find a rule for "title" and execute it according to the same principle.
** once it is done with "title" and its children, it then will find the rule for "content" and execute it
** and so forth ....
 
<div>
 
==== More information ====
 
* '' &lt;xsl:value-of select="title"/&gt;'' will retrieve contents of the "title" child element.
** In our example, it would only work in the template for "page", since only "page" has a "title" child
* You have to understand that XSLT works down "depth-first" the XML tree, i.e.
** it first deals with the rule for the root element,
** then with the first instruction within this rule.
** If the first instruction says "find other rules" it will then apply the first rule found for the first child element and so forth...
** The rule of the root element is also the last one be finished (since it must deal step-by-step with everything that is found inside) !!!
 
</div></div><div>
 
== 2.6 The procedure recapitulated ==
 
# 1. Create a XSLT stylesheet file: xxx.xsl
# 2. Copy/paste the XSLT header and root element below (decide encoding as you like)
 
''&lt;?xml version="1.0" encoding="ISO-8859-1" ?&gt; ''
 
''&lt;xsl:stylesheet version="1.0"    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;''
 
''''
Â
 
''&lt;/xsl:stylesheet&gt;''
 
# Write a rule that deals with your XML root element
#* This rule must produce the root, head and body of the HTML (copy/paste this too, but replace "'' page'' ")
 
''&lt;xsl:template match="''
''page''
''"&gt;''
 
  &lt;html&gt;
 
  &lt;head&gt; &lt;title&gt; ''&lt;xsl:value-of select="title"/&gt; ''
&lt;/title&gt; &lt;/head&gt;
 
  &lt;body bgcolor="#ffffff"&gt;
 
    '' &lt;xsl:apply-templates/&gt;''
 
  &lt;/body&gt;
 
  &lt;/html&gt;
 
''&lt;/xsl:template&gt;''
 
# 4. Write rules for '' each'' (!!) of your XML elements,
#* for each insert some HTML, sometimes some text, or sometimes nothing
#* make sure to place a &lt;xsl:apply-templates&gt; inside each rule (usually between some HTML) ... unless you wish to censor contents.
# 5. Associate this stylesheet with your XML file using:
 
''&lt;?xml-stylesheet href="xxx.xsl" type="text/xsl"?&gt;''
 
</div></div><div>
 
= 3. Tuning output with xsl:output and CSS =
 
<div>
 
== 3.1 Output declarations ==
 
* So far, HTML output produced would display in a naviagor, but is not fully HTML compliant.
 
<div>
 
=== xsl:output ===
 
is an instruction that allows you to fine-tune XSLT translation output
 
&lt;xsl:output<br /> method = "xml" | "html" | "text"<br /> version = nmtoken<br /> encoding = string<br /> omit-xml-declaration = "yes" | "no"<br /> standalone = "yes" | "no"<br /> doctype-public = string<br /> doctype-system = string<br /> indent = "yes" | "no"<br /> media-type = string /&gt;
 
* To put in the beginning of the file (after xsl:stylesheet)
 
<div>
 
==== Example 3-1: Output in HTML ISO-latin encoded: ====
 
&lt;xsl:output method="''html''
"
    encoding="ISO-8859-1"
    doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/&gt;
 
</div><div>
 
==== Example 3-2: Output in XHTML transitional with a namespace ====
 
** This is quite more complicated than producing simple HTML
 
&lt;xsl:stylesheet version="1.0"
 
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 
                ''xmlns="http://www.w3.org/1999/xhtml"''
&gt;
 
&lt;xsl:output
 
    method="''xml''
"
 
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
 
    doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
 
    indent="yes"
 
    encoding="iso-8859-1" /&gt;
 
&lt;xsl:template match="recipe"&gt;
 
    &lt;html ''xmlns="http://www.w3.org/1999/xhtml"''
&gt;
 
    &lt;head&gt; ... &lt;/head&gt; ... &lt;body&gt; ... &lt;/body&gt;
 
&lt;/xsl:template&gt;
 
</div><div>
 
==== Exemple 3-3: Your XML ====
 
&lt;xsl:output
 
  method="xml" indent="yes"
 
  doctype-system="mydtd.dtd" /&gt;
 
</div><div>
 
==== Exemple 3-4: Output in SVG ====
 
&lt;xsl:output
 
  method="xml"
 
  indent="yes"
 
  standalone="no"
 
  doctype-public="-//W3C//DTD SVG 1.0//EN"
 
  doctype-system="http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd"
 
  media-type="image/svg" /&gt;
 
</div></div></div><div>
 
== 3.2 CSS styling of HTHML ==
 
* Associating a CSS stylesheet with HTML output is trivial:
** add a link tag in the "head" produced by the template for the root element
** .... in the hello.css file you then have to define styles of HTML elements you generate
 
  &lt;xsl:template match="hello"&gt;
 
  &lt;html&gt;
 
    &lt;head&gt;
 
    ''&lt;link href="hello.css" type="text/css" rel="stylesheet"/&gt;''
 
    &lt;/head&gt;
 
    ......
 
&lt;/xsl:template match="hello"&gt;
 
<div>
 
==== Example 3-5: cooking ====
 
* cooking.xsl, cooking.xml and cooking-html.css
 
  &lt;xsl:template match="recipe"&gt;
 
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 
    &lt;head&gt;
 
      &lt;title&gt; &lt;xsl:value-of select="title"/&gt; &lt;/title&gt;
 
      &lt;link href="cooking-html.css" type="text/css" rel="stylesheet"/&gt;
 
    &lt;/head&gt;
 
      &lt;body bgcolor="#ffffff"&gt;
 
      &lt;xsl:apply-templates/&gt;
 
    &lt;/body&gt;
 
    &lt;/html&gt;
 
  &lt;/xsl:template&gt;
 
</div></div></div><div>
 
= 4. If things go wrong =
 
<div>
 
== 4.1 Frequent problems and remediation ==
 
<div>
 
==== Style-sheet error ! ====
 
* Validate the style-sheet in your XML editor
* If it provides XSLT support, it will help you find the error spots
 
</div><div>
 
==== XHTML doesn't display in Firefox ! ====
 
* Firefox wants a namespace declaration in the XHMTL produced, do it (see above).
 
</div><div>
 
==== HTML doesn't seem to be right ! ====
 
* Transform the XML document within your XML editor and look at the HTML
 
In "Exchanger Lite", use '' Transform'' in the menu bar with the following parameters:
 
** Transform-&gt;Execute Advanced XSLT
** Input = current document
** XSLT = Use Processing instructions
* You also may validate the output HTML !
 
</div><div>
 
==== There is various unformatted text in the output ! ====
 
* See next slide
 
</div><div>
 
==== HTML still doesn't seem to be right !! ====
 
* Use a XSLT debugger/tracer to understand how your XSLT executes
 
</div></div><div>
 
== 4.2 The XSLT default rule ==
 
* When you test your first style sheet, it is likely that some of your contents will appear non-formatted.
* This is due to the fact that XSLT will apply a default rule to all XML elements for which it didn't find a rule.
** If you forget to write a rule for a tag (or misspell tag names) this will happen .....
* The XSLT default rule simply copies all contents to the output.
 
<div>
 
==== A modified default rule that will help you find missing pieces ====
 
** simply cut/paste this to your XSLT (but remove it later on)
 
  &lt;xsl:template match="*"&gt;
 
  &lt;dl&gt;&lt;dt&gt;Untranslated node:
 
      &lt;strong&gt;&lt;xsl:value-of select="name()"/&gt;&lt;/strong&gt;&lt;/dt&gt;
 
  &lt;dd&gt;
 
    &lt;xsl:copy&gt;
 
      &lt;xsl:apply-templates select="@*"/&gt;
 
      &lt;xsl:apply-templates select="node()"/&gt;
 
    &lt;/xsl:copy&gt;
 
  &lt;/dd&gt;
 
  &lt;/dl&gt;
 
  &lt;/xsl:template&gt;
 
Â
 
&lt;xsl:template match="text()|@*"&gt;
 
  Contents: &lt;xsl:value-of select="."/&gt;
 
&lt;/xsl:template&gt;
 
</div></div></div><div>
 
= 5. Selective processing =
 
<div>
 
== 5.1 Steering rule execution and information filtering ==
 
* Instead of letting XSL apply rules in "natural order", you can tell which rules to apply when.
 
<div>
 
==== Example 5-1: Hello without content ====
 
* hello2.xml and hello2.xsl
* The rule for the root element will only "call" the rules for the "title" and the "comment" element
* Information within a content tag will not be displayed (since we don't let the processor find rules by itself, but only let it execute a rule for "title" and another for "comment").
 
''&lt;xsl:template match="page"&gt;''
 
    &lt;html&gt; &lt;head&gt; &lt;/head&gt;
 
    &lt;body bgcolor="#ffffff"&gt;
 
      &lt;xsl:apply-templates ''select="title"''
/&gt;
 
      &lt;xsl:apply-templates ''select="comment''
"/&gt;
 
    &lt;/body&gt; &lt;/html&gt;
 
  '' &lt;/xsl:template&gt;''
 
Â
 
  '' &lt;xsl:template match="''
''title''
''"&gt;''
 
    &lt;h1 align="center"&gt; ''&lt;xsl:apply-templates/&gt; ''
&lt;/h1&gt;
 
  '' &lt;/xsl:template&gt;''
 
  '' &lt;xsl:template match="''
''comment''
''"&gt;''
 
    &lt;hr/&gt; &lt;i&gt;''&lt;xsl:apply-templates/&gt;''
&lt;/i&gt;
 
  &lt;/xsl:template&gt;
 
</div></div><div>
 
== 5.2 A short glance at Xpath ('' optional'' ) ==
 
* XPath is a very powerful language to extract information from XML
* XPath was published at the same time as XSLT 1.0 (1999)
* Values of XSLT match and select attributes are XPath expressions
 
<div>[[Image:xslt-basics-6.png]]</div>
 
* XSLT beginners don't need to know a lot about XPath (so don't worry right now !).
** Simply stick to the idea of writing a template for each XML tag, as explained before
* XPath expressions can be more complicated:
 
&lt;xsl:apply-templates select="''course/module[position()=1]/section[position()=2]''
"/&gt;
 
means: "find rule for 2nd section of the first module of course"
 
* XPath also includes arithmetics and tests
 
"//Participant[string-length(Nom)&gt;=8]"
 
means: "return all participant nodes with content of name longer than 7 characters"
 
<div>
 
==== For your information only: examples of a few simple XPath expressions (optional !) ====
 
* These should remind you of CSS selectors
 
{| border="1"
! rowspan="1" colspan="1" |
Syntax <br /> elemen
! rowspan="1" colspan="1" |
(Type of path)
! rowspan="1" colspan="1" |
Example path
! rowspan="1" colspan="1" |
Example matches
|-
| rowspan="1" colspan="1" |
tag
| rowspan="1" colspan="1" |
element name
| rowspan="1" colspan="1" |
project
| rowspan="1" colspan="1" |
'' &lt;project&gt; ...... &lt;/project&gt;''
|-
| rowspan="1" colspan="1" |
/
| rowspan="1" colspan="1" |
separates children
| rowspan="1" colspan="1" |
project/title
| rowspan="1" colspan="1" |
&lt;project&gt;'' &lt;title&gt; ... &lt;/title&gt;''
|-
| rowspan="1" colspan="2" |
 
| rowspan="1" colspan="1" |
/
| rowspan="1" colspan="1" |
(root element)
|-
| rowspan="1" colspan="1" |
//
| rowspan="1" colspan="1" |
descendant
| rowspan="1" colspan="1" |
project//title
| rowspan="1" colspan="1" |
&lt;project&gt;&lt;problem&gt;'' &lt;title&gt;....&lt;/title&gt;''
|-
| rowspan="1" colspan="2" |
 
| rowspan="1" colspan="1" |
//title
| rowspan="1" colspan="1" |
&lt;racine&gt;...'' &lt;title&gt;..&lt;/title&gt;'' (any place)
|-
| rowspan="1" colspan="1" |
<nowiki>*</nowiki>
| rowspan="1" colspan="1" |
"wildcard"
| rowspan="1" colspan="1" |
<nowiki>*/title</nowiki>
| rowspan="1" colspan="1" |
&lt;bla&gt;'' &lt;title&gt;..&lt;/title&gt;'' '' and '' &lt;bli&gt;'' &lt;title&gt;...&lt;/title&gt;''
|-
| rowspan="1" colspan="1" |
<nowiki>|</nowiki>
| rowspan="1" colspan="1" |
"or operator
| rowspan="1" colspan="1" |
title|head
| rowspan="1" colspan="1" |
&lt;title&gt;...&lt;/title&gt; '' or'' &lt;head&gt; ...&lt;/head&gt;
|-
| rowspan="1" colspan="2" |
 
| rowspan="1" colspan="1" |
<nowiki>*|/|@*</nowiki>
| rowspan="1" colspan="1" |
All elements: root, children and attributes
|-
| rowspan="1" colspan="1" |
.
| rowspan="1" colspan="1" |
current element
| rowspan="1" colspan="1" |
.
| rowspan="1" colspan="1" |
 
|-
| rowspan="1" colspan="1" |
../
| rowspan="1" colspan="1" |
parent element
| rowspan="1" colspan="1" |
../problem
| rowspan="1" colspan="1" |
&lt;project&gt;
|-
| rowspan="1" colspan="1" |
@
| rowspan="1" colspan="1" |
attribute name
| rowspan="1" colspan="1" |
@id
| rowspan="1" colspan="1" |
&lt;xyz id="test"&gt;...&lt;/xyz&gt;
|-
| rowspan="1" colspan="1" |
element/@attr
| rowspan="1" colspan="1" |
attribute of child
| rowspan="1" colspan="1" |
project/@id
| rowspan="1" colspan="1" |
'' &lt;project id="test" ...&gt; ... &lt;/project&gt;''
|-
| rowspan="1" colspan="1" |
@attr='type'
| rowspan="1" colspan="1" |
type of attribute
| rowspan="1" colspan="1" |
list[@type='ol']
| rowspan="1" colspan="1" |
'' &lt;list type="ol"&gt; ...... &lt;/list&gt;''
|}
 
</div></div><div>
 
== 5.3 Basic value extraction ==
 
<div>
 
==== xsl:value-of ====
 
* inserts the value of an XPath expression and copies it to the output
* e.g. you can take contents of an element or attribute values and insert them in HTML table cells.
 
</div><div>
 
==== Example 5-2: Value-of ====
 
* Let's assume that we have an author element and that we would like to put this information on top of the page and that we should like to display the value of the revision attribute.
 
</div><div>
 
==== XML fragment ====
 
&lt;page&gt;
 
  &lt;title&gt;Hello&lt;/title&gt;
 
  &lt;content revision="''10''
"&gt;Here is some content&lt;/content&gt;
 
  &lt;comment&gt;Written by &lt;author&gt;''DKS''
&lt;/author&gt;&lt;/comment&gt;
 
&lt;/page&gt;
 
</div><div>
 
==== XSLT rules ====
 
&lt;xsl:template match="page"&gt;
 
    &lt;P&gt;&lt;''xsl:value-of select="comment/author"''
/&gt;&lt;/P&gt;
 
&lt;/xsl:template&gt;
 
Â
 
&lt;xsl:template match="content"&gt;
 
    &lt;P&gt;Revision number: &lt;''xsl:value-of select="@revision"''
/&gt;&lt;/P&gt;
 
&lt;/xsl:template&gt;
 
</div></div><div>
 
== 5.4 Inserting a value inside a string ==
 
* If you want to insert information inside an HTML attribute value, things get a little bit tricky.
 
<div>
 
==== There is a special syntax: ====
 
'' {....}'' '' ''
 
This is the equivalent of &lt;'' xsl:value-of select="..."/&gt; '' which can not be used here !!
 
</div><div>
 
==== Example 5-3: Building a href tag with an email ====
 
* We will use both the {...} and the value-or select constructs.
 
</div><div>
 
==== The XML information ====
 
&lt;contact-info ''email''<nowiki>
="</nowiki>''test@test''
"&gt;
 
</div><div>
 
==== The XSLT rule ====
 
&lt;xsl:template match="contact-info"&gt;
 
....
 
  &lt;a href="mailto:''{''
''@email''
''}''
"&gt;&lt;xsl:value-of select="''@email''
"/&gt;&lt;/a&gt;
 
...
 
</div><div>
 
==== The result ====
 
&lt;a href="''mailto:test@test''
"&gt;''test@test''
&lt;/a&gt;
 
</div></div><div>
 
== 5.5 Dealing with pictures ==
 
* There is no special "magic" for dealing with images, links, stylesheets etc. Simply:
** look at your XML and figure out how to translate into equivalent HTML (or whatever else)
** the following example demonstrates the use of value extraction
** several other solutions than the one demonstrated exist ...
 
<div>
 
==== Example 5-4: Dealing with pictures ====
 
</div><div>
 
==== XML file with picture file names ====
 
* images.xml
 
&lt;?xml version="1.0"?&gt;
 
&lt;?xml-stylesheet href="images.xsl" type="text/xsl"?&gt;
 
&lt;page&gt;
 
  &lt;title&gt;Hello Here are my images&lt;/title&gt;
 
  &lt;list&gt;
 
    &lt;!-- pictures are either contents or attribute values of elements --&gt;
 
 
    ''&lt;image&gt;''
dolores_001.jpg''&lt;/image&gt;''
 
    &lt;image&gt;dolores_002.jpg&lt;/image&gt;
 
Â
 
    ''&lt;image3''
  source="dolores_002.jpg"&gt;Recipe image''&lt;/image3&gt;''
 
  &lt;/list&gt;
 
  &lt;comment&gt;Written by DKS.&lt;/comment&gt;
 
&lt;/page&gt;
 
Â
 
</div><div>
 
==== Excerpts from the XSLT stylesheet ====
 
* images.xsl
 
&lt;xsl:template match="page"&gt;
 
    &lt;html&gt; .... &lt;xsl:apply-templates/&gt; .... &lt;/html&gt;
 
  &lt;/xsl:template&gt;
 
Â
 
&lt;!-- pictures are either contents or attribute values of elements --&gt;
 
&lt;xsl:template match="list"&gt;
 
    Images are element contents, apply a template to all image elements:
 
    &lt;xsl:apply-templates select="''image''
"/&gt;
 
Â
 
    Images are attribute values of an element, we do it differently:
 
    &lt;xsl:apply-templates select="''image3''
"/&gt;
 
&lt;/xsl:template&gt;
 
* This rule will insert the content of the image element into the value of src="".
 
  &lt;xsl:template match="image"&gt;
 
    &lt;p&gt; &lt;img src="''{.}''
"/&gt; &lt;/p&gt;
 
  &lt;/xsl:template&gt;
 
* This rule will insert the value of the source attribute into the value of src and also insert the contents of the the image3 element.
 
  &lt;xsl:template match="''image3''
"&gt;
 
    &lt;p&gt; &lt;img src="''{@source}''
"/&gt;&lt;br/&gt;
 
    &lt;!-- will insert text element contents --&gt;
 
''    &lt;xsl:value-of select="."/&gt;''
  &lt;/p&gt;
 
  &lt;/xsl:template&gt;
 
</div></div></div><div>
 
= 6. Next steps =
 
<div>
 
== 6.1 Reading ==
 
Deitel Textbook chapter 20, section 20.9 Extensible Stylesheet Language (XSL) 665-673.
 
Recall that XSLT is a complex language (we only presented some basics !), so may turn to an XML or XSLT textbook for more ....
 
</div><div>
 
== 6.2 Homework ==
 
Take an XML file of your choice from module 6 example files and write an XSLT stylesheet
 
</div><div>
 
== 6.3 Next modules ==
 
<div>
 
==== Module 8 ====
 
* Review of major Web Standards
* Webservers and server-side scripting (CGI)
* Scripting languages overview (ASP, PHP)
* Outlook: AJAX and web services (demonstration of "webtops/webOSs etc.")

Latest revision as of 18:09, 22 March 2013

Draft

Definition

“XSLT is designed to transform XML documents into other XML documents. The original document is not changed; rather, a new document is created based on the content of an existing one” (Wikipedia, retrieved 21:32, 30 May 2007 (MEST)).

“A transformation expressed in XSLT is called a stylesheet. A stylesheet contains a set of template rules. A template rule has two parts: a pattern which is matched against nodes in the source tree and a template which can be instantiated to form part of the result tree. This allows a stylesheet to be applicable to a wide class of documents that have similar source tree structures.” (XSL Transformations (XSLT), retrieved 21:32, 30 May 2007 (MEST))

“A transformation expressed in XSLT describes rules for transforming a source tree into a result tree. The transformation is achieved by associating patterns with templates. A pattern is matched against elements in the source tree. A template is instantiated to create part of the result tree. The result tree is separate from the source tree. The structure of the result tree can be completely different from the structure of the source tree. In constructing the result tree, elements from the source tree can be filtered and reordered, and arbitrary structure can be added.”(XSL Transformations (XSLT), retrieved 21:32, 30 May 2007 (MEST))

This page just provides a few links ....

EduTechWiki Tutorials

In education

Since some authoring environments favor some sort of XML-based datastructure, XSLT stylesheets can be used to "export" that data to some some delivery format (HTML, PDF, IMS Content Packaging, etc. An example would be the eLML framework.

Links

Manuals

Specifications, standards and official propaganda

Official Frameworks

FAQ's

NewsGroups and Mailing Lists

Tutorials

Introductory Tutorials

  • XSLT by example at Objects by Design (They also have good XML->HTML tutorials)
  • Walsh XSL Tutorial Good tutorial, but slide style. Also useful as on-line XSL reference !

XSL Templates and tricks

XSLFO Tutorials

(should be moved)

  • XSL-FO (very good on-line BOOK)
  • FOP Slide Kit. Technical article from Paul Sandoz (SUN) about slides with FOP

3.1 PHP's XSLT processor

Software

XSLT/FO Processors

Online

Tools for programmers and web servers

  • SAXON The SAXON package is a collection of tools for processing XML documents, e.g. an XSL (XSLT and XPath).
    INSTALLED at Tecfa: [password protected local documentation]. Saxon has extension features that others (Xalan) have not.
  • Gnome LibXML2 and it's associated XSLT C library. Used in PHP 5.0. There also command line tools for batch use, including xsltproc that also does XInclude. Installed @ Tecfa
  • tkxsltproc is a GUI frontend for the Gnome libxslt packages (see above). MacOSX, Win, Linux [9/2004]
  • Sablotron Sablotron is a fast, compact and portable XML toolkit implementing XSLT 1.0, DOM Level2 and XPath 1.0. Has some extensions, e.g. multiple output files. This is also the library used in PHP 4.x
  • Apache / Xalan-J is a Java-based XSLT 1.0 processor. Works with Xerces-Java (XML parser). Both are also distributed with other Apache products, like FOP. (installed @ Tecfa)
  • Apache / FOP is the world's first print formatter driven by XSL formatting objects. It is a Java application that reads a formatting object tree and then turns it into a PDF document. Installed @ Tecfa.
  • xmlroff. Sun sponsored xsl formatter for productin PDF and PS (2/2003). Early Beta, [not tested yet].

XSLT Libraries

Editors and Plugins

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=XSLT&oldid=42813"