XSL Languages
It started with XSL and ended up with XSLT, XPath, and XSL-FO.
It Started with XSL
XSL stands for e X tensible S tylesheet L anguage.
The World Wide Web Consortium (W3C) started to develop XSL because there was a need for an XML based Stylesheet Language.
CSS - HTML Style Sheets
HTML uses predefined tags and the meanings of tags are well understood .
The ** < ** table ** > ** element defines a table and a browser knows how to display it .
Adding styles to HTML elements is also simple. Telling a browser to display an element in a special font or color, is easily done with CSS.
XSL - XML Style Sheets
XML does not use predefined tags (we can use any tags we like) and the meanings of these tags are not well understood .
The
1<table> could mean an HTML table or a piece of furniture, and a browser **does not know how to display it** .
2
3There must be something in addition to the XML document that describes how the document should be displayed; and that is XSL!
4
5* * *
6
7## XSL - More Than a Style Sheet Language
8
9XSL consists of three parts:
10
11 * XSLT is a language for transforming XML documents
12 * XPath is a language for defining parts of an XML document
13 * XSL-FO is a language for formatting XML documents
14
15
16
17Think of XSL as a set of languages that can **transform** XML into XHTML, **filter and sort** XML data, **define parts** of an XML document, **format** XML data based on the data value, like displaying negative numbers in red, and **output** XML data to different media, like screens, paper, or voice.
18
19* * *
20
21## This Tutorial is About XSLT
22
23The rest of this tutorial is about XSLT - the language for transforming XML documents.
24
25But you can also study our XPath Tutorial , XSL-FO Tutorial , W3C XSL activities .
26
27* * *
28
29# Introduction to XSLT
30
31 
32
33* * *
34
35XSLT is a language for transforming XML documents into other XML documents.
36
37XPath is a language for defining parts of an XML document.
38
39* * *
40
41## What You Should Already Know
42
43Before you study XSLT you should have a basic understanding of XML and XML Namespaces.
44
45If you want to study these subjects first, please read our XML Tutorial .
46
47* * *
48
49## XSLT - XSL Transformations
50
51XSLT is the most important part of the XSL Standards. It is the part of XSL that is used to transform an XML document into another XML document, or another type of document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by transforming each XML element into an (X)HTML element.
52
53XSLT can also add new elements into the output file, or remove elements. It can rearrange and sort elements, and test and make decisions about which elements to display, and a lot more.
54
55A common way to describe the transformation process is to say that XSLT transforms an XML **source tree** into an XML **result tree.**
56
57* * *
58
59## XSLT Uses XPath
60
61XSLT uses XPath to define the matching patterns for transformations.
62
63If you want to study XPath first, please read our XPath Tutorial .
64
65* * *
66
67## How does it Work?
68
69In the transformation process, XSLT uses XPath to define parts of the source document that **match** one or more predefined **templates** . When a match is found, XSLT will **transform** the matching part of the **source** document into the **result** document. The parts of the source document that do not match a template will end up unmodified in the result document.
70
71* * *
72
73## XSLT is a Web Standard
74
75XSLT became a W3C Recommendation 16. November 1999.
76
77To read more about the XSLT activities at W3C please read our W3C Tutorial .
78
79* * *
80
81# XSLT Browsers
82
83 
84
85* * *
86
87Not all Internet browsers have full support for XSLT.
88
89* * *
90
91## Internet Explorer 5 is Bad
92
93XSLT in Internet Explorer 5 is NOT compatible with the official W3C XSL Recommendation.
94
95When Internet Explorer 5.0 was released in March 1999, the XSLT standard was still a W3C Working Draft.
96
97Since the final W3C XSL Recommendation is different from the Working Draft, the support for XSL in IE 5 is not 100% compatible with the official XSLT Recommendation.
98
99This restriction applies to both IE 5.0 and IE 5.5.
100
101* * *
102
103## Internet Explorer 6 is Better
104
105Internet Explorer 6 fully supports the official W3C XSLT Recommendation.
106
107The XML Parser 3.0 - shipped with Internet Explorer 6.0 and Windows XP - is based on both the W3C XSLT 1.0 and the W3C XPath 1.0 Recommendations.
108
109If you are serious about learning XSLT you should upgrade to Internet Explorer 6.0.
110
111* * *
112
113## Netscape 6
114
115Netscape 6 isn't fully supporting the official W3C XSLT Recommendation. However, most of the examples in this tutorial will also work in Netscape 6.
116
117* * *
118
119## Netscape 7
120
121Netscape 7 supports the official W3C XSLT Recommendation.
122
123* * *
124
125## Internet Explorer MSXML Parser
126
127MSXML Parser 2.0 is the XML parser that is shipped with IE 5.0.
128
129MSXML Parser 2.5 is the XML parser that is shipped with Windows 2000 and IE 5.5.
130
131MSXML Parser 3.0 is the XML parser that is shipped with IE 6.0 and Windows XP.
132
133According to Microsoft, the MSXML Parser 3.0 is 100% compatible with the official W3C XSLT Recommendation: "MSXML 3.0 offers a significant advancement over MSXML 2.5: server-safe HTTP access, complete implementation of XSLT and XPath, changes to SAX (Simple API for XML), higher conformance with W3C standards, and a number of bug fixes."
134
135For more info: http://msdn.microsoft.com/xml/general/xmlparser.asp
136
137You can read more about the latest releases of IE in our Browser Section .
138
139* * *
140
141# XSLT - Transformation
142
143 
144
145* * *
146
147Example study: How to transform XML into XHTML using XSLT.
148
149The details of this example will be explained in the next chapter.
150
151* * *
152
153## Correct Style Sheet Declaration
154
155The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>.
156
157**Note:** <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used!
158
159The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is:
160
161
162 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
163
164---
165
166or:
167
168
169 <xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
170
171---
172
173**Note:** The xmlns:xsl="http://www.w3.org/1999/XSL/Transform" identifies the official W3C XSL recommendation namespace. If you use this namespace, you must also include the attribute version="1.0".
174
175**Note:** If you are using IE 6.0 or Netscape 6 you should use one of the codes above.
176
177* * *
178
179## Incorrect Style Sheet Declaration
180
181This was the correct way to declare an XSL style sheet according to the W3C XSL Working Draft:
182
183
184 <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
185
186---
187
188**Note:** The declaration above is OUTDATED, but if you are using IE 5 you should use the (incorrect) code above.
189
190* * *
191
192## Start with your XML Document
193
194We want to **transform** the following XML document ("cdcatalog.xml") into XHTML:
195
196
197 <?xml version="1.0" encoding="ISO-8859-1"?>
198<catalog>
199<cd>
200<title>Empire Burlesque</title>
201<artist>Bob Dylan</artist>
202<country>USA</country>
203<company>Columbia</company>
204<price>10.90</price>
205<year>1985</year>
206</cd>
207 .
208 .
209 .
210 </catalog>
211
212---
213
214To view an XML / XSL document in IE 5.0 (and higher) and Netscape 7 you can click on a link, type the URL in the address bar, or double-click on the name of an XML file in a files folder.
215
216To view an XML / XSL document in Netscape 6 you'll have to open the XML file and then right-click in XML file and select "View Page Source".
217
218View XML file
219
220* * *
221
222## Create an XSL Style Sheet
223
224Then you create an XSL Style Sheet ("cdcatalog.xsl") with a transformation **template:**
225
226
227 <?xml version="1.0" encoding="ISO-8859-1"?>
228<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
229<xsl:template match="/">
230<html>
231<body>
232<h2>My CD Collection</h2>
233<table border="1">
234<tr bgcolor="#9acd32">
235<th align="left">Title</th>
236<th align="left">Artist</th>
237</tr>
238<xsl:for-each select="catalog/cd">
239<tr>
240<td><xsl:value-of select="title"></xsl:value-of></td>
241<td><xsl:value-of select="artist"></xsl:value-of></td>
242</tr>
243</xsl:for-each>
244</table>
245</body>
246</html>
247</xsl:template>
248</xsl:stylesheet>
249
250---
251
252View XSL file
253
254* * *
255
256## Link the XSL Style Sheet to the XML Document
257
258Finally, add an XSL Style Sheet reference to your XML document ("cdcatalog.xml"):
259
260
261 <?xml version="1.0" encoding="ISO-8859-1"?>
262<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
263<catalog>
264<cd>
265<title>Empire Burlesque</title>
266<artist>Bob Dylan</artist>
267<country>USA</country>
268<company>Columbia</company>
269<price>10.90</price>
270<year>1985</year>
271</cd>
272 .
273 .
274 .
275 </catalog>
276
277---
278
279If you have an XSLT compliant browser it will nicely **transform** your XML into XHTML!
280
281View the result in IE 6 or Netscape 6 and 7
282
283View the result in IE 5
284
285* * *
286
287## Example Explained
288
289The details of the example above will be explained in the next chapters!
290
291* * *
292
293# The <xsl:template> Element
294
295 
296
297* * *
298
299An XSL style sheet consists of a set of rules called templates.
300
301Each <xsl:template> element contains rules to apply when a specified node is matched.
302
303* * *
304
305## XSLT uses Templates
306
307The <xsl:template> element contains rules to apply when a specified node is matched.
308
309The **match** attribute is used to **associate** the template with an **XML element** . The match attribute can also be used to define a template for a whole branch of the XML document (i.e. match="/" defines the whole document).
310
311The following XSL Style Sheet contains a template to output the XML CD Catalog from the previous chapter:
312
313
314 <?xml version="1.0" encoding="ISO-8859-1"?>
315<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
316<xsl:template match="/">
317<html>
318<body>
319<h2>My CD Collection</h2>
320<table border="1">
321<tr bgcolor="#9acd32">
322<th>Title</th>
323<th>Artist</th>
324</tr>
325<tr>
326<td>.</td>
327<td>.</td>
328</tr>
329</table>
330</body>
331</html>
332</xsl:template>
333</xsl:stylesheet>
334
335---
336
337Since the style sheet is an XML document itself, the document begins with an xml declaration: ** <?xml version="1.0" encoding="ISO-8859-1"?> ** .
338
339The ** <xsl:stylesheet> ** tag defines the start of the style sheet.
340
341The ** <xsl:template> ** tag defines the start of a template. The **match="/"** attribute associates (matches) the template to the root (/) of the XML source document.
342
343The rest of the document contains the template itself, except for the last two lines that defines the end of the template and the end of the style sheet.
344
345The result of the transformation will look (a little disappointing) like this:
346
347## My CD Collection
348
349Title | Artist
350---|---
351. | .
352
353If you have Netscape 6 or IE 5 or higher you can view: the XML file , the XSL file , and the result
354
355The result from this example was a little disappointing, because no data was copied from the XML document to the output.
356
357In the next chapter you will learn how to use the ** <xsl:value-of> ** element to select the value of an XML element.
358
359* * *
360
361# The <xsl:value-of> Element
362
363 
364
365* * *
366
367The <xsl:value-of> element extracts the value of a selected node.
368
369* * *
370
371## The <xsl:value-of> Element
372
373The <xsl:value-of> element can be used to select the value of an XML element and add it to the output stream of the transformation:
374
375
376 <?xml version="1.0" encoding="ISO-8859-1"?>
377<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
378<xsl:template match="/">
379<html>
380<body>
381<h2>My CD Collection</h2>
382<table border="1">
383<tr bgcolor="#9acd32">
384<th>Title</th>
385<th>Artist</th>
386</tr>
387<tr>
388<td><xsl:value-of select="catalog/cd/title"></xsl:value-of></td>
389<td><xsl:value-of select="catalog/cd/artist"></xsl:value-of></td>
390</tr>
391</table>
392</body>
393</html>
394</xsl:template>
395</xsl:stylesheet>
396
397---
398
399**Note:** The value of the required **select** attribute contains an **XPath expression.** It works like navigating a file system where a forward slash (/) selects subdirectories.
400
401* * *
402
403## The Result
404
405The result of the transformation will look like this:
406
407## My CD Collection
408
409Title | Artist
410---|---
411Empire Burlesque | Bob Dylan
412
413If you have Netscape 6 or IE 5 or higher you can view the XML file and the XSL file
414
415View the result in IE 6 or Netscape 6 and 7
416
417View the result in IE 5
418
419The result from this example was also a little disappointing, because only one line of data was copied from the XML document to the output.
420
421In the next chapter you will learn how to use the ** <xsl:for-each> ** element to select the values of several XML elements, and add them to the output.
422
423* * *
424
425# The <xsl:for-each> Element
426
427 
428
429* * *
430
431The <xsl:for-each> element allows you to do looping in XSLT.
432
433* * *
434
435## The <xsl:for-each> Element
436
437The XSL ** <xsl:for-each> ** element can be used to select every XML element of a specified node set:
438
439
440 <?xml version="1.0" encoding="ISO-8859-1"?>
441<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
442<xsl:template match="/">
443<html>
444<body>
445<h2>My CD Collection</h2>
446<table border="1">
447<tr bgcolor="#9acd32">
448<th>Title</th>
449<th>Artist</th>
450</tr>
451<xsl:for-each select="catalog/cd">
452<tr>
453<td><xsl:value-of select="title"></xsl:value-of></td>
454<td><xsl:value-of select="artist"></xsl:value-of></td>
455</tr>
456</xsl:for-each>
457</table>
458</body>
459</html>
460</xsl:template>
461</xsl:stylesheet>
462
463---
464
465**Note:** The value of the required **select** attribute contains an **XPath expression.** It works like navigating a file system where a forward slash (/) selects subdirectories.
466
467* * *
468
469## The Result
470
471The result of the transformation will look like this:
472
473## My CD Collection
474
475Title | Artist
476---|---
477Empire Burlesque | Bob Dylan
478Hide your heart | Bonnie Tyler
479Greatest Hits | Dolly Parton
480Still got the blues | Gary More
481Eros | Eros Ramazzotti
482One night only | Bee Gees
483Sylvias Mother | Dr.Hook
484Maggie May | Rod Stewart
485Romanza | Andrea Bocelli
486When a man loves a woman | Percy Sledge
487Black angel | Savage Rose
4881999 Grammy Nominees | Many
489For the good times | Kenny Rogers
490Big Willie style | Will Smith
491Tupelo Honey | Van Morrison
492Soulsville | Jorn Hoel
493The very best of | Cat Stevens
494Stop | Sam Brown
495Bridge of Spies | T`Pau
496Private Dancer | Tina Turner
497Midt om natten | Kim Larsen
498Pavarotti Gala Concert | Luciano Pavarotti
499The dock of the bay | Otis Redding
500Picture book | Simply Red
501Red | The Communards
502Unchain my heart | Joe Cocker
503
504If you have Netscape 6 or IE 5 or higher you can view: the XML file and the XSL file
505
506View the result with Netscape 6 or IE 6
507
508View the result with IE 5
509
510* * *
511
512## Filtering the Output
513
514We can filter the output from an XML file by adding a criterion to the **select** attribute in the <xsl:for-each> element.
515
516** <xsl:for-each select="catalog/cd[artist='Bob Dylan']"> **
517
518Legal filter operators are:
519
520 * = (equal)
521 * != (not equal)
522 * < less than
523 * > greater than
524
525
526
527Take a look at the adjusted XSL style sheet:
528
529
530 <?xml version="1.0" encoding="ISO-8859-1"?>
531<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
532<xsl:template match="/">
533<html>
534<body>
535<h2>My CD Collection</h2>
536<table border="1">
537<tr bgcolor="#9acd32">
538<th>Title</th>
539<th>Artist</th>
540</tr>
541<xsl:for-each select="catalog/cd[artist='Bob Dylan']">
542<tr>
543<td><xsl:value-of select="title"></xsl:value-of></td>
544<td><xsl:value-of select="artist"></xsl:value-of></td>
545</tr>
546</xsl:for-each>
547</table>
548</body>
549</html>
550</xsl:template>
551</xsl:stylesheet>
552
553---
554
555
556
557* * *
558
559## The Result
560
561The result of the transformation will look like this:
562
563## My CD Collection
564
565Title | Artist
566---|---
567Empire Burlesque | Bob Dylan
568
569If you have Netscape 6 or IE 5 or higher you can view: the XML file and the XSL file .
570
571View the result with Netscape 6 or IE 6
572
573View the result with IE 5
574
575* * *
576
577# The <xsl:sort> Element
578
579 
580
581* * *
582
583The <xsl:sort> element is used to sort the output.
584
585* * *
586
587## Where to put the Sort Information
588
589To output the XML file as an XHTML file, and sort it at the same time, simply add a sort element inside the for-each element in your XSL file:
590
591
592 <?xml version="1.0" encoding="ISO-8859-1"?>
593<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
594<xsl:template match="/">
595<html>
596<body>
597<h2>My CD Collection</h2>
598<table border="1">
599<tr bgcolor="#9acd32">
600<th>Title</th>
601<th>Artist</th>
602</tr>
603<xsl:for-each select="catalog/cd">
604<xsl:sort select="artist"></xsl:sort>
605<tr>
606<td><xsl:value-of select="title"></xsl:value-of></td>
607<td><xsl:value-of select="artist"></xsl:value-of></td>
608</tr>
609</xsl:for-each>
610</table>
611</body>
612</html>
613</xsl:template>
614</xsl:stylesheet>
615
616---
617
618The **select** attribute indicates what XML element to sort on.
619
620* * *
621
622## The Result
623
624The result of the transformation will look like this:
625
626## My CD Collection
627
628Title | Artist
629---|---
630Romanza | Andrea Bocelli
631One night only | Bee Gees
632Empire Burlesque | Bob Dylan
633Hide your heart | Bonnie Tyler
634The very best of | Cat Stevens
635Greatest Hits | Dolly Parton
636Sylvias Mother | Dr.Hook
637Eros | Eros Ramazzotti
638Still got the blues | Gary Moore
639Unchain my heart | Joe Cocker
640Soulsville | Jorn Hoel
641For the good times | Kenny Rogers
642Midt om natten | Kim Larsen
643Pavarotti Gala Concert | Luciano Pavarotti
6441999 Grammy Nominees | Many
645The dock of the bay | Otis Redding
646When a man loves a woman | Percy Sledge
647Maggie May | Rod Stewart
648Stop | Sam Brown
649Black angel | Savage Rose
650Picture book | Simply Red
651Bridge of Spies | T`Pau
652Red | The Communards
653Private Dancer | Tina Turner
654Tupelo Honey | Van Morrison
655Big Willie style | Will Smith
656
657If you have Netscape 6 or IE 5 or higher you can view: the XML file and the XSL file .
658
659View the result with Netscape 6 or IE 6
660
661**Note:** Unable to view the result in IE 5, because the "http://www.w3.org/TR/WD-xsl" namespace does not understand the <xsl:sort> element.
662
663* * *
664
665# The <xsl:if> Element
666
667 
668
669* * *
670
671The <xsl:if> element contains a template that will be applied only if a specified condition is true.
672
673* * *
674
675## Where to put the IF condition
676
677To put a conditional if test against the content of the file, simply add an <xsl:if> element to your XSL document like this:
678
679** <xsl:if test="price > 10">
680some output ...
681</xsl:if> **
682
683The value of the required **test** attribute contains the expression to be evaluated.
684
685Take a look at the adjusted XSL style sheet:
686
687
688 <?xml version="1.0" encoding="ISO-8859-1"?>
689<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
690<xsl:template match="/">
691<html>
692<body>
693<h2>My CD Collection</h2>
694<table border="1">
695<tr bgcolor="#9acd32">
696<th>Title</th>
697<th>Artist</th>
698</tr>
699<xsl:for-each select="catalog/cd">
700<xsl:if test="price > 10">
701<tr>
702<td><xsl:value-of select="title"></xsl:value-of></td>
703<td><xsl:value-of select="artist"></xsl:value-of></td>
704</tr>
705</xsl:if>
706</xsl:for-each>
707</table>
708</body>
709</html>
710</xsl:template>
711</xsl:stylesheet>
712
713---
714
715The code above only selects the title and artist IF the price of the cd is higher than 10.
716
717
718* * *
719
720## The Result
721
722The result of the transformation will look like this:
723
724## My CD Collection
725
726Title | Artist
727---|---
728Empire Burlesque | Bob Dylan
729Still got the blues | Gary Moore
730One night only | Bee Gees
731Romanza | Andrea Bocelli
732Black Angel | Savage Rose
7331999 Grammy Nominees | Many
734
735If you have Netscape 6 or IE 5 or higher you can view: the XML file and the XSL file .
736
737View the result with Netscape 6 or IE 6
738
739**Note:** Unable to view the result in IE 5, because the "http://www.w3.org/TR/WD-xsl" namespace does not understand the <xsl:if> element.
740
741* * *
742
743# The <xsl:choose> Element
744
745 
746
747* * *
748
749The <xsl:choose> element is used in conjunction with <xsl:when> and <xsl:otherwise> to express multiple conditional tests.
750
751* * *
752
753## Where to put the Choose Condition
754
755To insert a conditional choose test against the content of the XML file, simply add the <xsl:choose>, <xsl:when>, and <xsl:otherwise> elements to your XSL document like this:
756
757** <xsl:choose>
758<xsl:when test="price > 10">
759... some code ...
760</xsl:when>
761<xsl:otherwise>
762... some code ....
763</xsl:otherwise>
764</xsl:choose> **
765
766Look at the adjusted XSL style sheet:
767
768
769 <?xml version="1.0" encoding="ISO-8859-1"?>
770<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
771<xsl:template match="/">
772<html>
773<body>
774<h2>My CD Collection</h2>
775<table border="1">
776<tr bgcolor="#9acd32">
777<th>Title</th>
778<th>Artist</th>
779</tr>
780<xsl:for-each select="catalog/cd">
781<tr>
782<td><xsl:value-of select="title"></xsl:value-of></td>
783<xsl:choose>
784<xsl:when test="price > 10">
785<td bgcolor="#ff00ff">
786<xsl:value-of select="artist"></xsl:value-of></td>
787</xsl:when>
788<xsl:otherwise>
789<td><xsl:value-of select="artist"></xsl:value-of></td>
790</xsl:otherwise>
791</xsl:choose>
792</tr>
793</xsl:for-each>
794</table>
795</body>
796</html>
797</xsl:template>
798</xsl:stylesheet>
799
800---
801
802The code above will add a pink background-color to the artist column WHEN the price of the cd is higher than 10.
803
804* * *
805
806## The Result
807
808The result of the transformation will look like this:
809
810## My CD Collection
811
812Title | Artist
813---|---
814Empire Burlesque | Bob Dylan
815Hide your heart | Bonnie Tyler
816Greatest Hits | Dolly Parton
817Still got the blues | Gary Moore
818Eros | Eros Ramazzotti
819One night only | Bee Gees
820Sylvias Mother | Dr.Hook
821Maggie May | Rod Stewart
822Romanza | Andrea Bocelli
823When a man loves a woman | Percy Sledge
824Black angel | Savage Rose
8251999 Grammy Nominees | Many
826For the good times | Kenny Rogers
827Big Willie style | Will Smith
828Tupelo Honey | Van Morrison
829Soulsville | Jorn Hoel
830The very best of | Cat Stevens
831Stop | Sam Brown
832Bridge of Spies | T`Pau
833Private Dancer | Tina Turner
834Midt om natten | Kim Larsen
835Pavarotti Gala Concert | Luciano Pavarotti
836The dock of the bay | Otis Redding
837Picture book | Simply Red
838Red | The Communards
839Unchain my heart | Joe Cocker
840
841If you have Netscape 6 or IE 5 or higher you can view: the XML file and the XSL file .
842
843View the result with Netscape 6 or IE 6
844
845**Note:** Unable to view the result in IE 5, because the "http://www.w3.org/TR/WD-xsl" namespace does not understand the <xsl:choose> element.
846
847* * *
848
849## Another Example
850
851Here is another example that contains several <xsl:when> elements:
852
853
854 <?xml version="1.0" encoding="ISO-8859-1"?>
855<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
856<xsl:template match="/">
857<html>
858<body>
859<h2>My CD Collection</h2>
860<table border="1">
861<tr bgcolor="#9acd32">
862<th>Title</th>
863<th>Artist</th>
864</tr>
865<xsl:for-each select="catalog/cd">
866<tr>
867<td><xsl:value-of select="title"></xsl:value-of></td>
868<xsl:choose>
869<xsl:when test="price > 10">
870<td bgcolor="#ff00ff">
871<xsl:value-of select="artist"></xsl:value-of></td>
872</xsl:when>
873<xsl:when test="price > 9 and price <= 10">
874<td bgcolor="#cccccc">
875<xsl:value-of select="artist"></xsl:value-of></td>
876</xsl:when>
877<xsl:otherwise>
878<td><xsl:value-of select="artist"></xsl:value-of></td>
879</xsl:otherwise>
880</xsl:choose>
881</tr>
882</xsl:for-each>
883</table>
884</body>
885</html>
886</xsl:template>
887</xsl:stylesheet>
888
889---
890
891The code above will add a pink background color to the artist column WHEN the price of the cd is higher than 10, and a grey background-color WHEN the price of the cd is higher than 9 and lower or equal to 10.
892
893* * *
894
895## The Result
896
897The result of the transformation will look like this:
898
899## My CD Collection
900
901Title | Artist
902---|---
903Empire Burlesque | Bob Dylan
904Hide your heart | Bonnie Tyler
905Greatest Hits | Dolly Parton
906Still got the blues | Gary Moore
907Eros | Eros Ramazzotti
908One night only | Bee Gees
909Sylvias Mother | Dr.Hook
910Maggie May | Rod Stewart
911Romanza | Andrea Bocelli
912When a man loves a woman | Percy Sledge
913Black angel | Savage Rose
9141999 Grammy Nominees | Many
915For the good times | Kenny Rogers
916Big Willie style | Will Smith
917Tupelo Honey | Van Morrison
918Soulsville | Jorn Hoel
919The very best of | Cat Stevens
920Stop | Sam Brown
921Bridge of Spies | T`Pau
922Private Dancer | Tina Turner
923Midt om natten | Kim Larsen
924Pavarotti Gala Concert | Luciano Pavarotti
925The dock of the bay | Otis Redding
926Picture book | Simply Red
927Red | The Communards
928Unchain my heart | Joe Cocker
929
930If you have Netscape 6 or IE 5 or higher you can view: the XML file and the XSL file .
931
932View the result with Netscape 6 or IE 6
933
934**Note:** Unable to view the result in IE 5, because the "http://www.w3.org/TR/WD-xsl" namespace does not understand the <xsl:choose> element.
935
936
937* * *
938
939# The <xsl:apply-templates> Element
940
941 
942
943* * *
944
945The <xsl:apply-templates> element applies a template rule to the current element or to the current element's child nodes.
946
947* * *
948
949## The <xsl:apply-templates> Element
950
951The <xsl:apply-templates> element applies a template rule to the current element or to the current element's child nodes.
952
953If we add a select attribute to the <xsl:apply-templates> element it will process only the child element that matches the value of the attribute. We can use the select attribute to specify the order in which the child nodes are processed.
954
955Look at the following XSL style sheet:
956
957
958 <?xml version="1.0" encoding="ISO-8859-1"?>
959<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
960<xsl:template match="/">
961<html>
962<body>
963<h2>My CD Collection</h2>
964<xsl:apply-templates></xsl:apply-templates>
965</body>
966</html>
967</xsl:template>
968<xsl:template match="cd">
969<p>
970<xsl:apply-templates select="title"></xsl:apply-templates>
971<xsl:apply-templates select="artist"></xsl:apply-templates>
972</p>
973</xsl:template>
974<xsl:template match="title">
975 Title: <span style="color:#ff0000">
976<xsl:value-of select="."></xsl:value-of></span>
977<br/>
978</xsl:template>
979<xsl:template match="artist">
980 Artist: <span style="color:#00ff00">
981<xsl:value-of select="."></xsl:value-of></span>
982<br/>
983</xsl:template>
984</xsl:stylesheet>
985
986---
987
988
989
990* * *
991
992## The Result
993
994The result of the transformation will look like this:
995
996## My CD Collection
997
998Title: Empire Burlesque
999Artist: Bob Dylan
1000
1001Title: Hide your heart
1002Artist: Bonnie Tyler
1003
1004Title: Greatest Hits
1005Artist: Dolly Parton
1006
1007Title: Still got the blues
1008Artist: Gary Moore
1009
1010Title: Eros
1011Artist: Eros Ramazzotti
1012
1013Title: One night only
1014Artist: Bee Gees
1015
1016Title: Sylvias Mother
1017Artist: Dr.Hook
1018
1019Title: Maggie May
1020Artist: Rod Stewart
1021
1022Title: Romanza
1023Artist: Andrea Bocelli
1024
1025Title: When a man loves a woman
1026Artist: Percy Sledge
1027
1028Title: Black angel
1029Artist: Savage Rose
1030
1031Title: 1999 Grammy Nominees
1032Artist: Many
1033
1034Title: For the good times
1035Artist: Kenny Rogers
1036
1037Title: Big Willie style
1038Artist: Will Smith
1039
1040Title: Tupelo Honey
1041Artist: Van Morrison
1042
1043Title: Soulsville
1044Artist: Jorn Hoel
1045
1046Title: The very best of
1047Artist: Cat Stevens
1048
1049Title: Stop
1050Artist: Sam Brown
1051
1052Title: Bridge of Spies
1053Artist: T`Pau
1054
1055Title: Private Dancer
1056Artist: Tina Turner
1057
1058Title: Midt om natten
1059Artist: Kim Larsen
1060
1061Title: Pavarotti Gala Concert
1062Artist: Luciano Pavarotti
1063
1064Title: The dock of the bay
1065Artist: Otis Redding
1066
1067Title: Picture book
1068Artist: Simply Red
1069
1070Title: Red
1071Artist: The Communards
1072
1073Title: Unchain my heart
1074Artist: Joe Cocker
1075
1076If you have Netscape 6 or IE 5 or higher you can view: the XML file and the XSL file .
1077
1078View the result with Netscape 6 or IE 6
1079
1080**Note:** Unable to view the result in IE 5, because the "http://www.w3.org/TR/WD-xsl" namespace does not understand the <xsl:apply-template> element.
1081
1082* * *
1083
1084# XSLT - On the Client
1085
1086 
1087
1088* * *
1089
1090If your browser supports it, XSLT can be used to transform the document to XHTML in your browser.
1091
1092* * *
1093
1094## A JavaScript Solution
1095
1096In the previous chapter we explained how XSLT can be used to transform a document from XML to XHTML. We added an XSL style sheet to the XML file and let the browser do the transformation.
1097
1098Even if this works fine, it is not always desirable to include a style sheet reference in an XML file (i.e. it will not work in a non XSLT aware browser.)
1099
1100A more versatile solution would be to use a JavaScript to do the XML to XHTML transformation.
1101
1102By using JavaScript, we can:
1103
1104 * do browser-specific testing
1105 * use different style sheets according to browser and user needs
1106
1107
1108
1109That's the beauty of XSLT. One of the design goals for XSLT was to make it possible to transform data from one format to another, supporting different browsers and different user needs.
1110
1111XSLT transformation on the client side is bound to be a major part of the browsers work tasks in the future, as we will see a growth in the specialized browser market (Braille, aural browsers, Web printers, handheld devices, etc.)
1112
1113* * *
1114
1115## The XML file and the XSL file
1116
1117Take a new look at the XML document that you saw in the previous chapters:
1118
1119
1120 <?xml version="1.0" encoding="ISO-8859-1"?>
1121<catalog>
1122<cd>
1123<title>Empire Burlesque</title>
1124<artist>Bob Dylan</artist>
1125<country>USA</country>
1126<company>Columbia</company>
1127<price>10.90</price>
1128<year>1985</year>
1129</cd>
1130 .
1131 .
1132 .
1133 </catalog>
1134
1135---
1136
1137If you have Netscape 6 or IE 5 or higher you can view the XML file .
1138
1139And the accompanying XSL style sheet:
1140
1141
1142 <?xml version="1.0" encoding="ISO-8859-1"?>
1143<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
1144<xsl:template match="/">
1145<html>
1146<body>
1147<h2>My CD Collection</h2>
1148<table border="1">
1149<tr bgcolor="#9acd32">
1150<th align="left">Title</th>
1151<th align="left">Artist</th>
1152</tr>
1153<xsl:for-each select="catalog/cd">
1154<tr>
1155<td><xsl:value-of select="title"></xsl:value-of></td>
1156<td><xsl:value-of select="artist"></xsl:value-of></td>
1157</tr>
1158</xsl:for-each>
1159</table>
1160</body>
1161</html>
1162</xsl:template>
1163</xsl:stylesheet>
1164
1165---
1166
1167If you have Netscape 6 or IE 5 or higher you can view the XSL file .
1168
1169**Note:** Be sure to notice that the XML file does not have a reference to the XSL file.
1170
1171**IMPORTANT:** The above sentence indicates that an XML file could be transformed using many different XSL files.
1172
1173* * *
1174
1175## Transforming XML to XHTML in Your Browser
1176
1177Here is the source code needed to transform the XML file to XHTML on the client:
1178
1179
1180 <html>
1181<body>
1182<script type="text/javascript">
1183
1184
1185 // Load XML
1186 var xml = new ActiveXObject("Microsoft.XMLDOM")
1187 xml.async = false
1188 xml.load("cdcatalog.xml")
1189
1190 // Load XSL
1191 var xsl = new ActiveXObject("Microsoft.XMLDOM")
1192 xsl.async = false
1193 xsl.load("cdcatalog.xsl")
1194
1195 // Transform
1196 document.write(xml.transformNode(xsl))
1197
1198
1199 </script>
1200</body>
1201</html>
1202
1203---
1204
1205**Tip:** If you don't know how to write JavaScript, you can study our JavaScript tutorial .
1206
1207The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the XML document into memory. The second block of code creates another instance of the parser and loads the XSL document into memory. The last line of code transforms the XML document using the XSL document, and writes the result to the XHTML document. Nice!
1208
1209If you have IE 6.0: See how it works .
1210
1211If you have IE 5.0: See how it works .
1212
1213* * *
1214
1215# XSLT - On the Server
1216
1217 
1218
1219* * *
1220
1221Since not all browsers support XSLT, one solution is to transform the XML to XHTML on the server.
1222
1223* * *
1224
1225## A Cross Browser Solution
1226
1227In the previous chapter we explained how XSLT can be used to transform a document from XML to XHTML in the browser. We let a JavaScript use an XML parser to do the transformation. This solution will not work with a browser that doesn't support an XML parser.
1228
1229To make XML data available to all kinds of browsers, we have to transform the XML document on the SERVER and send it as pure XHTML to the BROWSER.
1230
1231That's another beauty of XSLT. One of the design goals for XSLT was to make it possible to transform data from one format to another on a server, returning readable data to all kinds of future browsers.
1232
1233XSLT transformation on the server is bound to be a major part of the Internet Information Server work tasks in the future, as we will see a growth in the specialized browser market (Braille, aural browsers, Web printers, handheld devices, etc.)
1234
1235* * *
1236
1237## The XML file and the XSLT file
1238
1239Take a new look at the XML document that you saw in the previous chapters:
1240
1241
1242 <?xml version="1.0" encoding="ISO-8859-1"?>
1243<catalog>
1244<cd>
1245<title>Empire Burlesque</title>
1246<artist>Bob Dylan</artist>
1247<country>USA</country>
1248<company>Columbia</company>
1249<price>10.90</price>
1250<year>1985</year>
1251</cd>
1252 .
1253 .
1254 .
1255 </catalog>
1256
1257---
1258
1259If you have Netscape 6 or IE 5 or higher you can view the XML file .
1260
1261And the accompanying XSL style sheet:
1262
1263
1264 <?xml version="1.0" encoding="ISO-8859-1"?>
1265<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
1266<xsl:template match="/">
1267<html>
1268<body>
1269<h2>My CD Collection</h2>
1270<table border="1">
1271<tr bgcolor="#9acd32">
1272<th align="left">Title</th>
1273<th align="left">Artist</th>
1274</tr>
1275<xsl:for-each select="catalog/cd">
1276<tr>
1277<td><xsl:value-of select="title"></xsl:value-of></td>
1278<td><xsl:value-of select="artist"></xsl:value-of></td>
1279</tr>
1280</xsl:for-each>
1281</table>
1282</body>
1283</html>
1284</xsl:template>
1285</xsl:stylesheet>
1286
1287---
1288
1289If you have Netscape 6 or IE 5 or higher you can view the XSL file .
1290
1291**Note:** Be sure that the XML file does not have a reference to the XSL file.
1292
1293**IMPORTANT:** The above sentence indicates that an XML file on the server could be transformed using many different XSL files.
1294
1295* * *
1296
1297## Transforming XML to XHTML on the Server
1298
1299Here is the source code needed to transform the XML file to XHTML on the server:
1300
1301
1302 ```
1303
1304 'Load XML
1305 set xml = Server.CreateObject("Microsoft.XMLDOM")
1306 xml.async = false
1307 xml.load(Server.MapPath("cdcatalog.xml"))
1308
1309 'Load XSL
1310 set xsl = Server.CreateObject("Microsoft.XMLDOM")
1311 xsl.async = false
1312 xsl.load(Server.MapPath("cdcatalog.xsl"))
1313
1314 'Transform file
1315 Response.Write(xml.transformNode(xsl))
1316
Tip: If you don't know how to write ASP, you can study our ASP tutorial .
The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the XML file into memory. The second block of code creates another instance of the parser and loads the XSL document into memory. The last line of code transforms the XML document using the XSL document, and returns the result to the browser. Nice!
See how it works .
XML Editors
If you are serious about XML, you will benefit from using a professional XML Editor.
XML is Text Based
XML is a text based markup language.
One great thing about XML is that XML files can be created and edited using a simple text editor like Notepad.
However, when you start working with XML, you will soon find that it is better to edit XML documents using a professional XML editor.
Why Not Notepad?
Many "hardcore" web developers use Notepad to edit both HTML and XML documents because Notepad is free and simple to use, and personally I often use Notepad for quick editing of simple HTML, CSS, and XML files.
But, if you use Notepad for XML editing, you will soon run into problems.
Notepad does not know that you are writing XML, so it will not be able to assist you. You will create many errors, and as your XML documents grow larger you will lose control.
Why an XML Editor?
Today XML is an important technology, and everyday we can see XML playing a more and more critical role in new web development.
New development projects use XML based technologies like:
- XML Schema to define XML structures and data types
- XSLT to transform XML data
- SOAP to exchange XML data between applications
- WSDL to describe web services
- RDF to describe web resources
- XPath and XQuery to access XML data
- SMIL to define graphics... and much more
To be able to write XML documents for all your new development projects, you will need an intelligent editor to help you write error free XML documents.
- *</xsl:apply-template></xsl:apply-templates></xsl:apply-templates></xsl:apply-templates></xsl:apply-templates></xsl:apply-templates></xsl:choose></xsl:when></xsl:choose></xsl:otherwise></xsl:when></xsl:choose></xsl:otherwise></xsl:when></xsl:choose></xsl:choose></xsl:if></xsl:if></xsl:if></xsl:if></xsl:sort></xsl:sort></xsl:sort></xsl:for-each></xsl:for-each></xsl:for-each></xsl:for-each></xsl:for-each></xsl:for-each></xsl:for-each></xsl:value-of></xsl:value-of></xsl:value-of></xsl:value-of></xsl:value-of></xsl:template></xsl:stylesheet></xsl:template></xsl:template></xsl:template></xsl:stylesheet></xsl:transform></xsl:stylesheet></xsl:transform></xsl:stylesheet></xsl:transform></xsl:stylesheet>