XSLT: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 2: Line 2:


== Definition ==
== Definition ==
{{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 19:39, 30 May 2007 (MEST))
{{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 19:39, 30 May 2007 (MEST))


== Tutorial ==
== Tutorial ==
Line 9: Line 14:
== Links ==
== Links ==


== 2.1 Manuals  ==


* [http://www.mulberrytech.com/quickref/ Mulberry Tech Quick References for XSLT]. Useful!
* [http://www.xslfo.info/reference.aspx www.xslfo.info Reference manual]


= Basic XSLT Tutorial =
== 2.2 Specifications, standards and official propaganda  ==


=== Official Frameworks ===


* http://www.w3.org/Style/ and http://www.w3.org/Style/XSL/


==== Objectives ====
=== XML Specifications ===


* Understand the purpose of XSLT
* [http://www.w3.org/TR/xslt XSL Transformations (XSLT) Specification] W3C Recommendation 16 November 1999 (Note: you also need Xpath)
* Do simple transformations from XML to HTML
* [http://xmlfr.org/w3c/TR/xslt/ Transformations XSL (XSLT)] Traduction fran�aise
* Understand the most simple XPath expressions (tag names)
* [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-pointers.html XQuery] is an extension of XPath 2.0 and both XSLT 2.0 and XQuery 2.0 share the same data model. (these are working drafts in nov 2004).
* [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 missed a lot, e.g. trigonometric functions that are a must for any kind of visualization. See [http://www.exslt.org/  EXSLT extensions].


==== Prerequisites ====
== 2.3 FAQ's  ==


* Editing XML (being able to use a simple DTD)
* [http://www.dpawson.co.uk/ XSL FAQ] (good information on XSLT, XPATH, FO)
* XML namespaces (some)
* [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]
* HTML and CSS (some)


[http://creativecommons.org/licenses/by-nc/2.0/ [[Image:xslt-basics-1.png]] ]
== 2.4 NewsGroups and Mailing Lists ==


==== Warning ====
* [http://www.mulberrytech.com/xsl/xsl-list/ XSL List at MulBerry Tech] ([http://www.mulberrytech.com/xsl/xsl-list/archive/ archive])


* XSLT is a rather complex transformation language
== 2.5 General Tutorials  ==
* 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 ====
(most are somewhat technical, see also general XML tutorials on [/guides/xml/pointers.html XML Pointers] )


* There may be typos (sorry) and mistakes (sorry again)
* [[Image:stars3s.gif|***]] [http://www.nwalsh.com/docs/tutorials/xsl/xsl/slides.html XSL Concepts and Practical Use ] by Paul Grosso and Norman Walsh
* Please also consult a textbook !
* [/guides/tie/tie.html See our own TIE slides ] (in French: XML, XSLT)
* [[Image:stars3s.gif|***]][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).


</div><div>
== 2.6 XSLT Tutorials  ==


= 1. Introduction Extensible Stylesheet Language Transformations =
IMPORTANT: Some tutorials do not respect the current [http://www.w3.org/TR/WD-xslt XSLT Specification] [don't have time to clean them ou :( ]


* Goals of XSLT
* [http://www.developer.com/xml/article.php/3314291 Discover the Wonders of XSLT] by Benoit Marchal a developper.com (2/2004). Very short intro, but follow ups were promised.
* XSLT is a transformation language for XML
* [http://wdvl.internet.com/Authoring/Languages/XML/PracticalXML/ XSLT Chapter from the Paractical XML for the Web Book] (oct 2002, not tested)
* XSLT is a W3C XML language (the usual XML well-formedness criteria apply)
* [http://www.webreference.com/js/column100/ XML and XSLT Programming], a Webreference.com tutorial
* XSLT can translate XML into almost '' anything'' , e.g.:
* [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)
** wellfomed HTML (closed tags)
* [[Image:stars3s.gif|***]] [http://metalab.unc.edu/xml/books/bible/updates/14.html E.R. Harolds on-line Book Chapter on XSLT] (good, the book too btw)
** any XML, e.g. yours or other XML languages like SVG, X3D
* [[Image:stars2s.gif|**]] [http://www-4.ibm.com/software/developer/library/hands-on-xsl/  Hands-on XSL, XSL for fun and diversion ] ( Don R. Day ). Explains nicely how a rule-based system works.
** non XML, e.g. RTF (a bit more complicated)
* [http://www.heise.de/ix/artikel/E/2001/01/167/01.shtml XSLT Tutorial I: Basics and first example application] at heise.de
* [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])
* [http://www.arbortext.com/xsl/ XSL Tutorial] by Paul Grosso and Norman Walsh. [new version ? an older version was incompatible ... ]
* [http://www.xmlsoftware.com/articles/xsl-by-example.html XSL Templates by Example ] by James Tauber. Works (but has only simple transformations)
* [http://www.xfront.com/ XSL Tutorial] (download, by R.Costello)
* [http://www.cogx.com/xwtl/presAll.asp XSLT template library for WEB applications]
* [http://nwalsh.com/docs/tutorials/xml99/index.html Walsh XSL Tutorial] (updateded slides 18/1/00). Good tutorial, but slide style. Also useful as on-line XSL reference !
* [http://www.cogsci.ed.ac.uk/~dmck/xslt-tutorial.html Producing HTML tables with XSLT]
* [http://www.jenitennison.com/xslt/index.html Jeni's XSLT Pages] Various very useful hints (mostly from postings to the XSL-List)
* [http://www.byte.com/documents/s=7117/byt1017268553816/0401_udell.html The Protean Power of Textual Transformation]
* [http://www.xml.com/pub/a/2005/01/05/tr-xml.html Extending XSLT with EXSLT] by Bob DuCharme, at xml.com (jan 2005)


<div>[[Image:xslt-basics-2.png]]</div><div>
== 2.7 XSLFO Tutorials  ==


== 1.1 History and specifications ==
* [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


<div>
{| width="100%" cellspacing="1" bgcolor="#CCFFCC"
|
[#top  [[Image:xml-icon.gif|logo]] ]
| align="center" |
[#section1 <font size="-1">XSL @ TECFA</font>]
| align="center" |
[#section2 <font size="-1">Documentation</font>]
| align="center" |
[#section3 <font size="-1">XSL for programmers</font>]
| align="center" |
[#section4 <font size="-1">Software</font>]
| align="center" |
[#section5 <font size="-1">Examples</font>]
| align="center" |
[#section6 <font size="-1">Links</font>]
|}


==== Specification ====
= 3. XSL for programmers =


* XSLT 1.0 was formalized as W3C Recommendation on 16/11/99
See the [/guides/xml/pointers.html XML Pointers] for now.
* '' [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>
== 3.1 PHP's XSLT processor  ==


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


* 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.
{| width="100%" cellspacing="1" bgcolor="#CCFFCC"
* 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)
[#top  [[Image:xml-icon.gif|logo]] ]
| align="center" |
[#section1 <font size="-1">XSL @ TECFA</font>]
| align="center" |
[#section2 <font size="-1">Documentation</font>]
| align="center" |
[#section3 <font size="-1">XSL for programmers</font>]
| align="center" |
[#section4 <font size="-1">Software</font>]
| align="center" |
[#section5 <font size="-1">Examples</font>]
| align="center" |
[#section6 <font size="-1">Links</font>]
|}


</div><div>
= 4. Software =


==== Related languages ====
== 4.1 XSLT/FO Processors  ==


* XPath (XML Path language used by XSLT, XQuery, etc.), '' http://www.w3.org/TR/xpath''
* [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.
* XSL also called XSL/FO (the formatting language), '' http://www.w3.org/TR/xsl/''
* [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
* XQuery (Query language for XML), '' http://www.w3.org/TR/xquery/''
* [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].


</div></div></div><div>
== 4.2 XSLT Libraries  ==


= 2. A first glance at XSLT =
* [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 extensions in XSLT, e.g. a math module)


<div>
== 4.3 Editors and Modes  ==


== 2.1 Root of an XSLT file stylesheet ==
* [http://www.stylusstudio.com/xslt_editor.html Stylus XSLT Editor] is part of Stylus XML editor (Windows, payware = $275 academic, 30 Day demo, home edition = $49)
* [http://xslt-process.sourceforge.net/ XSLT-process] is a minor mode for GNU Emacs/XEmacs which transforms it into a powerful editor with XSLT processing and debugging capabilities (For people who know Emacs!)


  &lt;?xml version="1.0"?&gt;
== 4.4 Other tools ==


''&lt;xsl:stylesheet version="1.0"    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;''
* [http://grillade.griotte.com/xml/ XSLTDoc], an XSLT stylesheet documentation generator (tested/works)
* [http://www.xslprofiler.org catchXSL], an XSL profiler from I3 written in Java, needs Xalan or Saxon.


''....''
{| width="100%" cellspacing="1" bgcolor="#CCFFCC"
 
|
''&lt;/xsl:stylesheet&gt;''
[#top [[Image:xml-icon.gif|logo]] ]
 
| align="center" |
<div>
[#section1 <font size="-1">XSL @ TECFA</font>]
 
| align="center" |
==== Mandatory elements ====
[#section2 <font size="-1">Documentation</font>]
 
| align="center" |
* XML declaration on top of the file
[#section3 <font size="-1">XSL for programmers</font>]
* A '' stylesheet'' root tag with the following version and namespace attributes:
| align="center" |
 
[#section4 <font size="-1">Software</font>]
  &lt;xsl:stylesheet ''version="1.0"''
| align="center" |
[#section5 <font size="-1">Examples</font>]
                  ''xmlns:xsl="http://www.w3.org/1999/XSL/Transform"''
| align="center" |
&gt;
[#section6 <font size="-1">Links</font>]
 
|}
* XSLT must be wellformed (and also obey the XSLT specification)
* XSLT files usually have the *.xsl extension and should have the '' text/xsl'' or '' application/xml'' mimetype when served by http.
 
</div></div><div>
 
== 2.2 Association of XML and an XSLT file ==
 
* An XSLT stylesheet is associated with a processing instruction (similar to a CSS stylesheet)
 
&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
 
  &lt;''?xml-stylesheet''
  ''href="project.xsl" type="text/xsl"''
?&gt;
 
&lt;yourxml&gt; .... &lt;/yourxml&gt;
 
</div><div>
 
== 2.3 Basic XSLT ==
 
<div>
 
==== Basic (!) use of XSLT means: ====
 
* 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;
= 5. Examples =


  &lt;/xsl:template&gt;
Showing context-free examples is a tricky issue, since tree transformations and rendering depends on specific DTDs and tasks.


Â
* [[Image:stars1s.gif|*]][http://www.CraneSoftwrights.com/resources/ XSL Tree Display Stylesheet] from Crane Softwrigthts Ltd. Usefull to check the node structure of a document !
* Look at some simple [/guides/xml/cocoon Cocoon examples ] (you need Netscape or know to make IE Internet compatible to look at sources)
* [http://www.sourcepole.com/sources/software/sp.xsl/ Sourcepole XSL package]
* ... more needed here (including Tecfa's own)


&lt;xsl:template match="text()|@*"&gt;
{| width="100%" cellspacing="1" bgcolor="#CCFFCC"
 
|
  Contents: &lt;xsl:value-of select="."/&gt;
[#top [[Image:xml-icon.gif|logo]] ]
 
| align="center" |
&lt;/xsl:template&gt;
[#section1 <font size="-1">XSL @ TECFA</font>]
 
| align="center" |
</div></div></div><div>
[#section2 <font size="-1">Documentation</font>]
 
| align="center" |
= 5. Selective processing =
[#section3 <font size="-1">XSL for programmers</font>]
 
| align="center" |
<div>
[#section4 <font size="-1">Software</font>]
 
| align="center" |
== 5.1 Steering rule execution and information filtering ==
[#section5 <font size="-1">Examples</font>]
 
| align="center" |
* Instead of letting XSL apply rules in "natural order", you can tell which rules to apply when.
[#section6 <font size="-1">Links</font>]
 
<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>
= 6. Links =
 
== 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
* See the links on the [xml-pointers.html XML] page
* Webservers and server-side scripting (CGI)
* [http://www.xslt.com/ xslt.com]
* Scripting languages overview (ASP, PHP)
* [http://finetuning.com/xsl.html Stylesheet Resources] (XSL/CSS/DSSL at finetuning.com
* Outlook: AJAX and web services (demonstration of "webtops/webOSs etc.")

Revision as of 19:39, 30 May 2007

Draft

Definition

“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 19:39, 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 19:39, 30 May 2007 (MEST))

Tutorial

See XSLT Tutorial - Basics

Links

2.1 Manuals

2.2 Specifications, standards and official propaganda

Official Frameworks

XML Specifications

2.3 FAQ's

2.4 NewsGroups and Mailing Lists

2.5 General Tutorials

(most are somewhat technical, see also general XML tutorials on [/guides/xml/pointers.html XML Pointers] )

2.6 XSLT Tutorials

IMPORTANT: Some tutorials do not respect the current XSLT Specification [don't have time to clean them ou :( ]

2.7 XSLFO Tutorials

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

[#top logo ]

[#section1 XSL @ TECFA]

[#section2 Documentation]

[#section3 XSL for programmers]

[#section4 Software]

[#section5 Examples]

[#section6 Links]

3. XSL for programmers

See the [/guides/xml/pointers.html XML Pointers] for now.

3.1 PHP's XSLT processor

[#top logo ]

[#section1 XSL @ TECFA]

[#section2 Documentation]

[#section3 XSL for programmers]

[#section4 Software]

[#section5 Examples]

[#section6 Links]

4. Software

4.1 XSLT/FO Processors

  • 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].

4.2 XSLT Libraries

4.3 Editors and Modes

  • Stylus XSLT Editor is part of Stylus XML editor (Windows, payware = $275 academic, 30 Day demo, home edition = $49)
  • XSLT-process is a minor mode for GNU Emacs/XEmacs which transforms it into a powerful editor with XSLT processing and debugging capabilities (For people who know Emacs!)

4.4 Other tools

  • XSLTDoc, an XSLT stylesheet documentation generator (tested/works)
  • catchXSL, an XSL profiler from I3 written in Java, needs Xalan or Saxon.

[#top logo ]

[#section1 XSL @ TECFA]

[#section2 Documentation]

[#section3 XSL for programmers]

[#section4 Software]

[#section5 Examples]

[#section6 Links]

5. Examples

Showing context-free examples is a tricky issue, since tree transformations and rendering depends on specific DTDs and tasks.

  • *XSL Tree Display Stylesheet from Crane Softwrigthts Ltd. Usefull to check the node structure of a document !
  • Look at some simple [/guides/xml/cocoon Cocoon examples ] (you need Netscape or know to make IE Internet compatible to look at sources)
  • Sourcepole XSL package
  • ... more needed here (including Tecfa's own)

[#top logo ]

[#section1 XSL @ TECFA]

[#section2 Documentation]

[#section3 XSL for programmers]

[#section4 Software]

[#section5 Examples]

[#section6 Links]

6. Links