XML and XSLT transformation in beginner examples

Preliminary preparation
Introduction
The first steps
Displaying Query Results
Simple table
Sorting
XSL element: IF filter
XSL element: IF - improving the appearance of tables
Dynamic formation of attributes using the example of link parameters in the <a> tag
JavaScript and XML
Concluding remarks
Contact details

Preliminary preparation

In order to work with this document, you need to have at least Internet Explorer browser version 5.0 and higher. This will work some of the examples given in the text.

In order for all the examples to work for you, you need to install an XML parser of version 3. If the example only works under the control of the XML parser of version 3, then in each case this is a special matter. Note that versions of IE up to 5.5 use earlier versions of the parser, so you still need to install it. Learn about older versions of IE yourself.
The distribution of the XML parser version 3 can be found at http://msdn.microsoft.com/ XML / XMLDownloads / default.aspx.
After installing the parser you will need to register it in the registry. To do this, in the command line, you need to run a com *** y: regsvr32 msxml3.dll . Then you need to tell IE that you intend to use this parser. To do this, run the xmlinst utility. The xmlinst utility can be found at http://msdn.microsoft.com/ library / default.asp? Url = / downloads / list / xmlgeneral.asp. You can also try to find answers to questions about installing an XML parser at http://www.netcrucible.com/xslt/msxml-faq.htm.

We now turn to the main part of our document.

Introduction

Consider a simple example of an XML file (ex01.xml).

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
< tutorial >
< title > "XSL Notes" </ title >
< author > Igor V. Leonov </ author >
</ tutorial >

If we open this file in Internet Explorer, we will see the same text as above, along with all the tags and service information. But we do not need tags and service information! We want to see only the relevant information, and with the help of tags - to control the appearance of this information. This task is easy and simple: you need to add a transformation template to the XML file - an XSL file.

Rewrite our XML file as follows (ex01-1.xml).

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
<? xml-stylesheet type = 'text / xsl' href = 'ex01-1.xsl'?>
< tutorial >
< title > "XSL Notes" </ title >
< author > Igor V. Leonov </ author >
</ tutorial >

And create an XSL file ex01-1.xsl. The text of the file is shown below.

< xsl: stylesheet version = " 1.0 " xmlns: xsl = " http://www.w3.org/TR/WD-xsl ">
< xsl: template match = " / ">
< p > < strong > < xsl: value-of select = " // title " /> </ strong > </ p >
< p > < xsl: value-of select = " // author " /> </ p >
</ xsl: template >
</ xsl: stylesheet >

If we now open the file ex01-1.xsl in the Internet Explorer browser, we will see that our task is solved - only the necessary information remains on the screen, all the tags have disappeared. The result you get on the browser screen is shown below.

"XSL Notes"

Leonov Igor Vasilyevich

It is also easy to see that the order in which we output strings is determined only by the content of the transformation template — the XSL file. If necessary, the template can be easily changed without changing our main XML file at all.

Rewrite the XML file. The information part will not be changed, and the template will indicate another ex01-2.xml.

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
<? xml-stylesheet type = 'text / xsl' href = 'ex01-2.xsl'?>
< tutorial >
< title > "XSL Notes" </ title >
< author > Igor V. Leonov </ author >
</ tutorial >

Create an XSL file ex01-2.xsl. The text of the file is shown below.

< xsl: stylesheet version = " 1.0 " xmlns: xsl = " http://www.w3.org/TR/WD-xsl ">
< xsl: template match = " / ">
< p > < strong > < xsl: value-of select = " // author " /> </ strong > </ p >
< p > < xsl: value-of select = " // title " /> </ p >
</ xsl: template >
</ xsl: stylesheet >

If we now open the ex01-2.xsl file in Internet Explorer, the result will be different.

Leonov Igor Vasilyevich

"XSL Notes"

We now note a point that is key to database developers. Information in an XML page usually appears as a result of a database query. Querying a database in a multiuser environment is a very expensive operation. Suppose now that we do not have XML and we form standard static HTML pages. In this case, to solve the problem of simply transforming the external representation of information, for example, to change the sorting, we have two ways to solve the problem: execute the query and save the results in a temporary buffer on the server, or each time the external view changes, perform a new query and create an HTML page again.

The first method requires time-consuming programming, the second method significantly increases the load on the database server, whose performance is often a bottleneck in the system - the user always wants to get results faster.

XML and XSL are a comprehensive solution to the problem described above. In fact, the XML page is the temporary buffer for query results. Only instead of non-standard and labor-intensive programming, we now use the standard XSL mechanism.

There is another consideration that can be significant for database developers. Most modern DBMSs can format the results of a database query as an XML file. That is, when building a user interface within the framework of XML and XSL technology, we achieve a certain independence from the database vendor. In terms of the organization of the withdrawal - almost complete independence. And this part is very large in the majority of application systems oriented to work with databases. Of course, in addition to output, there is also input and server processing of business logic, but here you will have to look for some other solutions.

The first steps

We now analyze in more detail the first example. Recall its text.

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
< tutorial >
< title > "XSL Notes" </ title >
< author > Igor V. Leonov </ author >
</ tutorial >

The first line informs the browser that the file is in XML format. The version attribute is required. The encoding attribute is not mandatory, but if you have Russian letters in the text, you need to insert this attribute, otherwise the XML file simply will not be processed - you will receive an error message.

The following lines are the body of the XML file. It consists of elements that together form a tree structure. Items are identified by tags and can be nested into each other.

Elements can have attributes whose values ​​can also be processed according to the template.

At the top level of the XML file is always one element. That is, the file type

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
< tutorial >
< title > "XSL Notes" </ title >
< author > Igor V. Leonov </ author >
</ tutorial >
< tutorial >
< title > "Introduction to CSP" </ title >
< author > Igor V. Leonov </ author >
</ tutorial >

will not be processed by the browser. To convert to a valid XML file, you need to add top-level element tags, for example

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
< knowledgeDatabase >
< tutorial >
< title > "XSL Notes" </ title >
< author > Igor V. Leonov </ author >
</ tutorial >
< tutorial >
< title > "Introduction to CSP" </ title >
< author > Igor V. Leonov </ author >
</ tutorial >
< / knowledgeDatabase >

Note that tag names are case sensitive. More information about this can be found in any book on XML elements and attributes in these books a lot of attention is paid.

We now turn to the transformation template - to the XSL file. The task of an XSL file is to transform an XML file into another tree, which, for example, will correspond to the HTML format and can be displayed on the browser screen with regard to formatting, font selection, etc.

In order for the browser to perform the necessary conversion, you need to specify a reference to the XSL file in the XML file

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
<? xml-stylesheet type = 'text / xsl' href = 'ex01-1.xsl'?>

Consider now the text of the XSL file

< xsl: stylesheet version = " 1.0 " xmlns: xsl = " http://www.w3.org/TR/WD-xsl ">
< xsl: template match = " / ">
< p > < strong > < xsl: value-of select = " // title" "/> </ strong > </ p >
< p > < xsl: value-of select = " // author " /> </ p >
</ xsl: template >
</ xsl: stylesheet >

The first line of the file contains the xsl: stylesheet element tag. Element Attributes - Version Number and Namespace Reference. These xsl: stylesheet element attributes are required. In our case, the namespace is all the names of the elements and their attributes that can be used in the XSL file. For XSL files, the reference to the namespace is standard.

Note that the XSL file is one of the varieties of XML files. It does not contain user data, but its format is the same. The file contains the top level element xsl: stylesheet , and then comes the transformation rule tree.

In this document, we will not explain in detail what each element of the XSL file means. We will give different examples and show the result in each example. The reader will be able to independently compare various elements of the XSL file and the transformations of the source XML file initiated by these elements with user information.

In the future, the texts of XML and XSL files will be given in black and white. You can always open a real file and see everything in color. Comment out the link to the XSL file if necessary. Comment syntax is the following - <! - Comment text -> . The comment text can not be inserted characters - .

In the first example, we looked at how using the xsl: value-of element to display the content of the element (the text enclosed between tags) in HTML format. Now we will see how using the same element we can display the value of an element attribute.

Consider the following XML file ex02-1.xml

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
<? xml-stylesheet type = 'text / xsl' href = 'ex02-1.xsl'?>
<tutorial>
<dog caption = "Dog:" name = "Ball">
<dogInfo weight = "18 kg" color = "red with black burners" />
</ dog>
</ tutorial>

The information in this file is not stored in the content of the elements, but in the form of attribute values. The file ex02-1.xsl is

<xsl: stylesheet version = "1.0" xmlns: xsl = "http://www.w3.org/TR/WD-xsl">
<xsl: template match = "/">
<P> <B> <xsl: value-of select = "// dog / @ caption" /> </ B>
<xsl: value-of select = "// dog / @ name" />.
<xsl: value-of select = "// dogInfo / @ weight" />, <xsl: value-of select = "// dogInfo / @ color" />.</ P>
</ xsl: template>
</ xsl: stylesheet>

Pay attention to the syntax of the element attribute reference - // dog / @ name . The element name and attribute name are separated by a pair of characters " / @ ". The rest of the syntax is the same as referring to the content of the element.

The result is as follows:

Dog: Ball. 18 kg, red with black burners.

Let's pay attention now to the next moment. In the XSL file, we never used the tutorial element. In fact, it was possible to use the full path. Rewrite our XML file by increasing the tree depth (ex02-2.xml)

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
<? xml-stylesheet type = 'text / xsl' href = 'ex02-2.xsl'?>
<tutorial>
<enimals>
<dog caption = "Dog:" name = "Ball">
<dogInfo weight = "18 kg" color = "red with black burners" />
</ dog>
</ enimals>
</ tutorial>

The file ex02-2.xsl is

<xsl: stylesheet version = "1.0" xmlns: xsl = "http://www.w3.org/TR/WD-xsl">
<xsl: template match = "/">
<P> <B> <xsl: value-of select = "// enimals / dog / @ caption" /> </ B>
<xsl: value-of select = "// enimals / dog / @ name" />.
<xsl: value-of select = "// enimals / dog / dogInfo / @ weight" />, <xsl: value-of select = "// dogInfo / @ color" />.</ P>
</ xsl: template>
</ xsl: stylesheet>

The result will be the same.

Dog: Ball. 18 kg, red with black burners.

In this example, we used the full link for attribute values. When displaying single values, both full and abbreviated references work in the same way.

This concludes the analysis of examples with the output of single values ​​and proceed to the output of tabular information - to the output of the query results.

Displaying Query Results

As long as we work with several requisites of the same object, there is practically no difference between XML and HTML. However, as soon as we move on to information that contains several lines, the benefits of XML become apparent. But before moving on to the benefits, let's learn how to display a simple table.

Consider the following XML file - ex03.xml. Its text is given below.

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
<tutorial>
<enimals>
<dogs>
<dog>
<dogName> Ball </ dogName>
<dogWeight caption = "kg"> 18 </ dogWeight>
<dogColor> red with black burn </ dogColor>
</ dog>
<dog>
<dogName> Tuzik </ dogName>
<dogWeight caption = "kg"> 10 </ dogWeight>
<dogColor> white with black spots </ dogColor>
</ dog>
<dog>
<dogName> Bobby </ dogName>
<dogWeight caption = "kg"> 2 </ dogWeight>
<dogColor> white and gray </ dogColor>
</ dog>
<dog>
<dogName> Trezor </ dogName>
<dogWeight caption = "kg"> 25 </ dogWeight>
<dogColor> black </ dogColor>
</ dog>
</ dogs>
</ enimals>
</ tutorial>

Suppose that this is the result of a query to the database and display the corresponding table.

Simple table

The first step is, as always, to add a transformation template. Modify our file by adding a link to the template. As a result, we get the file ex03-1.xml.

A conversion template ex03-1.xsl has been added to this file.

Consider this template in more detail. Here is the text.

<? xml version = "1.0" encoding = "WINDOWS-1251"?>
<xsl: stylesheet version = "1.0" xmlns: xsl = "http://www.w3.org/TR/WD-xsl">
<xsl: template match = "/">
<table border = "1">
<tr bgcolor = "# CCCCCC">
<td align = "center"> <strong> Nickname </ strong> </ td>
<td align = "center"> <strong> Weight </ strong> </ td>
<td align = "center"> <strong> Color </ strong> </ td>
</ tr>
<xsl: for-each select = "tutorial / enimals / dogs / dog">
<tr bgcolor = "# F5F5F5">
<td> <xsl: value-of select = "dogName" /> </ td>
<td align = "right"> <xsl: value-of select = "dogWeight" /> <xsl: value-of select = "dogWeight / @ caption" /> </ td>
<td> <xsl: value-of select = "dogColor" /> </ td>
</ tr>
</ xsl: for-each>
</ table>
</ xsl: template>
</ xsl: stylesheet>

The first line is new to you in the XSL file (but not in the XML files!). She says that in the XSL file you need to perceive Russian letters normally. Without this line, the browser will not be able to correctly process the Russian text in the XSL file. The next two lines of the pattern are already familiar. The next six rows are the row containing the column headings of the table. The design for extracting the text of the table headings is already familiar to you. But the tenth line is also new:

<xsl: for-each select = "tutorial / enimals / dogs / dog">

This element of the template allows you to select and view all groups of information, the full path to which is given by the list of tags "tutorial / enimals / dogs / dog" . Please note - the path is set completely, none of the tags can be omitted. Further in the table cells placed information about our dogs. In contrast to the first examples, the path to the corresponding information is also fully specified. Let us try, for example, to place information about a nickname a little differently ex03-2.xml:

<dogName>
<dogNick> Ball </ dogNick>
</ dogName>

If we put the link <xsl: value-of select = "dogNick" /> in the corresponding XSL file, we will not see any nickname in the corresponding column. The link must be complete - <xsl: value-of select = "dogName / dogNick" /> . You can experiment yourself with the ex03-2.xsl file. The correct result is shown below.

Sorting

In the previous examples, the order of the rows in the table fully corresponded to the groups of tags in the XML file. This order can be changed. Add to tag

<xsl: for-each select = "tutorial / enimals / dogs / dog">

order-by attribute

<xsl: for-each select = "tutorial / enimals / dogs / dog" order-by = "dogName">

Our table will take the form (ex03-3.xml, ex03-3.xsl).

We will get more interesting results if we try to sort the table by the "Weight" column. At first we will try to do it by analogy with the previous example - the attribute order-by = "dogName" is replaced by order-by = "dogWeight" . The result is shown below (ex03-4.xml, ex03-4.xsl).

The table is indeed sorted by the weight column, but this is not a numeric sort, but a string sort! In order for the browser to take values ​​as numbers, it needs to say about it - instead of order-by = "dogWeight", you must write order-by = "number (dogWeight)" . Now we got the correct result (ex03-5.xml, ex03-5.xsl).

We now give an example of sorting by several columns. The various elements in the order-by attribute must be separated by the symbol " ; " - order-by = "number (dogWeight); dogName" (ex03-6.xml, ex03-6.xsl). The table below.

The following example works only under the control of the XML parser of version 3. In it the rows are sorted by one column - by the dog name. This example has already been cited above, but now we use the new syntax (ex03-7.xml, ex03-7.xsl).

Note the difference.

When using the new syntax, a reference to another namespace is used.

<xsl: stylesheet version = "1.0" xmlns: xsl = " http://www.w3.org/1999/XSL/Transform ">

This is a very important point, and it can never be overlooked.

In addition, we removed the order-by attribute in the xsl: for-each element and added another element

<xsl: sort order = "ascending" select = "dogName" />

If the xsl: sort element is present in the xsl: for-each element, then it must always appear immediately after the xsl: for-each element. The syntax of the xsl: sort element is fairly obvious. It uses two attributes: the order attribute is a sorting method (ascending or descending) and the select attribute is the name of the field by which sorting is performed. If we need to sort by the first element, as in this example, then instead of " dogName " it was possible to put a period - " . ", For other elements you need to specify its name, for example " dogColor ", if we need to sort the records by the color of the dog. In fact, there may be five attributes - select , lang , data-type , order and case-order , but we will not consider all these attributes here, because here we are not intended to give a complete description of all elements used in XSL, and attributes.

The results table is shown below.

Using the new syntax, it is easy to change the sorting by ascending to sorting by descending (ex03-8.xml, ex03-8.xsl). This example works only under the control of the XML parser version 3.

The difference is in one line.

<xsl: sort order = "descending" select = "dogName" />

We changed the value of the order attribute — the ascending value has been replaced by descending .

The results table is shown below.

We now show the sorting by several fields (ex03-9.xml, ex03-9.xsl). This example works only under the control of the XML parser version 3.

In this example, we have two lines with an xsl: sort element.

<xsl: sort order = "ascending" select = "number (dogWeight)" data-type = "number" />
<xsl: sort order = "ascending" select = "dogName" />

Lines are sorted first by dog's weight, and then by their nicknames in alphabetical order. Note that in order for the sorting to be performed in a numerical sequence, we added the data-type attribute to the xsl: sort element . The results table is shown below.

Replacing the value of the attribute order by to descending , we can easily group the records of dogs with the same weight so that the nicknames will be in reverse alphabetical order. You can easily build the corresponding example yourself.

XSL element: IF filter

Consider now how to filter the rows of the table. The first example uses the old syntax. In it, the filter condition is specified directly in the select attribute (ex04-1.xml, ex04-1.xsl).

Below is the line to which we have made the necessary changes.

xsl: for-each select = "tutorial / enimals / dogs / dog [dogWeight $ gt $ 10] " order-by = "number (dogWeight); dogName;">

And a table of results.

You can see that only those dogs whose weight exceeds 10 kg remained in the table, and the first is Sharik, whose weight is less.

All further examples in this section work only under the control of the XML parser version 3.

More flexibility gives us a new syntax (ex04-2.xml, ex04-2.xsl). Please note that in the new syntax, the order-by attribute in the xsl: for-each element is not supported; instead, we inserted two xsl: sort elements .

<xsl: sort order = "ascending" select = "number (dogWeight)" />
<xsl: sort order = "ascending" select = "dogName" />

In addition, the filter condition we have rendered a separate element xsl: if .

<xsl: if test = "dogWeight & gt; 10">

Remember to include the end tag of the xsl: if element .

<xsl: if test = "dogWeight & gt; 10">
<tr bgcolor = "# F5F5F5">
<td> <xsl: value-of select = "dogName" /> </ td>
<td align = "right"> < xsl: value-of-select = "dogWeight" /> <xsl: value-of-select = "dogWeight / @ caption" /> </ td>
<td> <xsl: value-of select = "dogColor" /> </ td>
</ tr>
</ xsl: if>

In this example, the table of results is completely similar to the previous one.

The full benefits of the new syntax are manifested when using functions.

Consider the following example (ex04-3.xml, ex04-3.xsl). In this example, the position () function is used , which determines the sequence number of the fragment in the source XML file.

The corresponding xsl: if element .

<xsl: if test = "position () <3">

Result.

We now demonstrate the use of more interesting functions - start-with (string, startSubstring) and contains (string, anySubstring) . Function start-with (string, startSubstring) checks whether the string starts string with a substring startSubstring . An example is ex04-4.xml, ex04-4.xsl).

The syntax of the xsl: if element .

<xsl: if test = "starts-with ($ varDogName, $ varStartWith)">

In this element we used variables. Variable values ​​were initialized earlier.

<xsl: variable name = "varStartWith"> T </ xsl: variable>
<xsl: for-each select = "tutorial / enimals / dogs / dog">
<xsl: variable name = "varDogName"> <xsl: value- of select = "dogName" /> </ xsl: variable>

The varStartWith variable is a substring from which the required nicknames should begin. It does not change, therefore it is initialized before the loop. The varDogName variable contains the dog's nickname, it changes at each step of the cycle and, accordingly, is initialized in the body of the cycle.

Result.

The function contains (string, anySubstring) checks whether the string string substring anySubstring . An example is ex04-5.xml, ex04-5.xsl.

The syntax of the xsl: if element .

<xsl: if test = "contains ($ varDogName, $ varStartWith)">

This example is completely analogous to the previous one.

Result.

Comments To leave a comment If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion. To reply Comment To confirm that you are not a bot, answer: Name Email(not published) Vote Super Okay Average Bad Horror   Save XML, HTML, DHTML, HTML 5 Terms: XML, HTML, DHTML, HTML 5