- The XSL Elements
- The xsl:if Element
- The xsl:choose, xsl:when, and xsl:otherwise Elements
- The xsl:eval Element
- Summary
- Q&A
The xsl:eval Element
In previous hours, you used JavaScript to perform the data-reading operations. The sections of JavaScript code were delimited by the opening and closing <SCRIPT> tags where the scripting language was specified by assignment. The XSL equivalent of this is the <xsl:eval> tag.
An xsl:eval Example
To demonstrate how to embed a section of JavaScript code in an XSL file, you'll need to recall a function present in the JavaScript library. This function is the random number generator, which can be used to generate an arbitrary number within any desired range. It's a member of the Math library, so the notation to call it is as follows:
Math.random();
It will return a floating-point number between 0 and 1.
Because your goal is to return an integer between 0 and 50, you would perform the following sequence of operations:
Math.round(Math.random()*50)
For this demonstration of embedded JavaScript, assume that the random number that's generated is the percentage discount that's offered to the current visitor. In other words, if the random number is 37, the user can buy a book for 37% off the regular price.
Reopen listing15-5.xsl and modify the <xsl:for-each . . . > loop to match Listing 15.6. Save the file as listing15-6.xsl.
Listing 15.6 Embedding and Using JavaScript Code in an XSL File
1: <?xml version="1.0"?>
2: <!-- This file is an XSL style sheet file that is used to
3: read the data from the simple book catalog database.
4: In this case, the data will be sorted when read, and
5: we are using embedded JavaScript inside the XSL
6: template.
7: -->
8: <xsl:stylesheet xmlns:xsl="uri:xsl">
9: <xsl:template match="/">
10: <html>
11: <body>
12: <table border="1">
13: <tr style="font-weight:bold;color:blue">
14: <td>Author Name</td>
15: <td>Author Address</td>
16: <td>Author City</td>
17: <td>Author State</td>
18: <td>Author e-mail</td>
19: <td>Publisher Name</td>
20: <td>Publisher Address</td>
21: <td>Publisher Phone</td>
22: <td>Current discount percentage</td>
23: </tr>
24: <xsl:for-each select="Catalog/Book"
order-by="+Author/City">
25: <tr>
26: <xsl:apply-templates/>
27: <td>
28: discount:
29: <xsl:eval language="JavaScript">
30: pvalue=Math.round (50*Math.random());
31: </xsl:eval>
32: </td>
33: </tr>
34: </xsl:for-each>
35: </table>
36: </body>
37: </html>
38: </xsl:template>
39: <xsl:template match="Author">
40: <td><xsl:value-of select="Name"/></td>
41: <td><xsl:value-of select="Address"/></td>
42: <td><xsl:value-of select="City"/></td>
43: <td><xsl:value-of select="State"/></td>
44: <td><xsl:value-of select="Email"/></td>
45: </xsl:template>
46: <xsl:template match="Publisher">
47: <td><xsl:value-of select="Name"/></td>
48: <td><xsl:value-of select="Address"/></td>
49: <td><xsl:value-of select="Phone"/></td>
50: </xsl:template>
51: </xsl: stylesheet>
Reopen listing14-2.html and modify the lines that load the files so that listing15-3.xml is the XML file and listing15-6.xsl is the XSL file. The output when it's viewed in IE is shown in Figure 15.6.
){kind=link}
Figure 15.6 Using JavaScript code to generate content for display.
NOTE
Because the numbers are randomly generated, the values you get in the Current Discount Percentage column will be different than those shown here.
The key to understanding the output is to realize that the following line creates a row of entries for the table from the <Author> and <Publisher> data:
<xsls:apply-templates/>
However, the </tr> is not encountered, so the <td>, </td> tag pair that surrounds the <xsl:eval . . . > pair will create another entry in that row of the table. The assignment of language="JavaScript" inside the xsl:eval element does the same thing that it does inside a <Script> tag. The discount: identifier assigns a name to the entry, and the value for that identifier is generated inside the single line of JavaScript code. This line uses the random number generator to compute an integer from 0 to 50, and that value is then used as the row entry:
<tr>
<xsl:apply-templates/>
<td>
discount:
<xsl:eval language="JavaScript">
pvalue=Math.round(50*Math.random());
</xsl: eval>
</td>
</tr>
An xsl:eval Example That Uses a JavaScript Function
JavaScript functions created by the user can also be written and called from within an <xsl:eval . . . > element, and that's the subject of this exercise.
Reopen listing15-6.xsl and modify it to match Listing 15.7. Save the file as listing15-7.xml.
Listing 15.7 Creating and Calling JavaScript Functions Inside an XSL File
1: <?xml version="1.0"?>
2: <!-- This file is an XSL style sheet file that is used to
3: read the data from the simple book catalog database.
4: In this case, the data will be sorted when read, and
5: we are using embedded JavaScript inside the XSL
6: template.
7: . -->
8: <xsl:stylesheet xmlns:xsl="uri:xsl">
9: <xsl:template match="/">
10: <html>
11: <body>
12: <table border="1">
13: <tr style="font-weight:bold;color:blue">
14: <td>Author Name</td>
15: <td>Author Address</td>
16: <td>Author City</td>
17: <td>Author State</td>
18: <td>Author e-mail</td>
19: <td>Publisher Name</td>
20: <td>Publisher Address</td>
21: <td>Publisher Phone</td>
22: <td>Current discount percentage</td>
23: </tr>
24: <xsl:for-each select="Catalog/Book"
order-by="+Author/City">
25: <tr>
26: <xsl:apply-templates/>
27: <td>
28: discount:
29: <xsl:eval language="JavaScript">
30: DiscountCalc();
31: </xsl:eval>
32: </td>
33: </tr>
34: </xsl:for-each>
35: </table>
36: </body>
37: </html>
38: </xsl:template>
39: <xsl:script language="JavaScript">
40: function DiscountCalc()
41: {
42: discount=Math. round(50*Math.random());
43: return discount;
44: }
45: </xsl:script>
46: <xsl:template match="Author">
47: <td><xsl:value-of select="Name"/></td>
48: <td><xsl:value-of select="Address"/></td>
49: <td><xsl:value-of select="City"/></td>
50: <td><xsl:value-of select="State"/></td>
51: <td><xsl:value-of select="Email"/></td>
52: </xsl:template>
53: <xsl:template match="Publisher">
54: <td><xsl:value-of select="Name"/></td>
55: <td><xsl:value-of select="Address"/></td>
56: <td><xsl:value-of select="Phone"/></td>
57: </xsl:template>
58: </xsl: stylesheet>
NOTE
The <xsl:script . . . > element is used to define global entities, which are functions or data that will be referenced from other places in the file. Therefore, it must be placed outside the templates if it's to be accessible by all templates.
Reopen listing14-2.html and modify the lines that load the files so that listing15-3.xml is the XML file and listing15-7.xsl is the XSL file. With the exception of the values of the randomly generated numbers, the output is the same as in the previous example.
The code does essentially the same thing as the code from the previous exercise. The only difference is that there's a function call to perform the computation; the computation is not done at that position in the code. Because that function was placed within <xsl:script> tags and outside any templates, it's available for reference anywhere within the file.