XSL Translations
| only for RuBoard |
This section lists each of the .xsl translation files that the poll's system uses. Most of these files are identical in operation except for the differences in client rendering. These differences are summarized in the following section.
XSL Files Used for Rendering to a Client Device
The three .xsl files used by the XHTML Basic version of the poll's system are the following:
-
pollsXHTML.xsl ” Displays a list of polls to the user
-
voteXHTML.xsl ” Displays a poll and allows the user to vote
-
resultXHTML.xsl ” Displays the results of a poll just voted on
The three .xsl files used by the WML version of the poll's system are the following:
-
pollsWML.xsl ” Displays a list of polls to the user
-
voteWML.xsl ” Displays a poll and allows the user to vote
-
resultWML.xsl ” Displays the results of a poll just voted on
Note that the rendering in the XSL files has been kept simplistic. For XHTML Basic, I am not using WCSS or any other rendering features other than the following elements:
-
<br /> ” Breaks a row to start a new line on the browser display
-
<a /> ” Displays a hyperlink to a new page, used for all navigation and data entry in poll's system
-
text ” Frees text for all text labels in the system
For WML, stylesheets are not being used; only the following elements are used:
-
<p /> ” Used to separate text and set wrapping on or off for a line of text
-
<a /> ” To display a hyperlink to a new page, used for all navigation and data entry in polls system
-
text ” Free text for all text labels in the system
The reason for making the interface so simple is twofold: The first reason is so that it is simple for you to convert the .xsl for the XHTML version of the application into a WML version. The second reason is to demonstrate that, with mobile devices, you can create effective UIs without all the bells and whistles of a full-blown hypertext language.
The other main difference in the code is that the XML stylesheet declaration generated by the XHTML .xsl files is different to that of the WML version; also, the XHTML version has <html><title> and <body> tags whereas the WML version uses <wml> and <card> tags in their place.
So now that you know the key rendering differences, it's time to look at the code for all the translations and walk-through the WML translation of each one.
The pollsWML.xsl File
As previously stated, the polls WML Basic file displays a list of questions in the polls.xml file. The .xsl file is shown in Listing 13.8, and a walk-through is provided thereafter.
Listing 13.8 pollsWML.xsl
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="xml" omit-xml-declaration="no" doctype- system="http://www.phone.com/dtd/wml11.dtd" standalone="yes" indent="yes" doctype-public="-//PHONE.COM//DTD WML 1.1//EN" /> <xsl:template match="polls"> <xsl:variable name="polls" select="//poll" /> <wml> <card> <p> Please Select Poll</p> <p mode="nowrap"> <!-- show all polls --> <xsl:for-each select="$polls"> <a><xsl:attribute name="href">default.aspx?displayPage=VoteWML.xsl&voteOn=<xsl:value-of select="current()/@text"/></xsl:attribute><xsl:value-of select="current()/@text"/></a><br /> </xsl:for-each> </p> </card> </wml> </xsl:template> </xsl:stylesheet>
Starting from the top of the file, you have the normal XML and XSL declarations, plus one new addition for the XML file. This is an xsl:output directive, which creates the WML stylesheet declaration that's needed for the generated XHTML file.
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="xml" omit-xml-declaration="no" doctype- system="http://www.phone.com/dtd/wml11.dtd" standalone="yes" indent="yes" doctype-public="-//PHONE.COM//DTD WML 1.1//EN" />
Next , you define a global template for the transformation that sets its root to the <polls> tag, which as you might remember, is the outermost tag in the XML file polls.xml .
<xsl:template match="polls">
Next, an xsl:variable ( $polls ) is declared to hold all the poll elements. Then the top area of the WML card is rendered.
<xsl:variable name="polls" select="//poll" /> <wml> <card> <p> Please Select Poll</p> <p mode="nowrap">
An xsl:for-each directive is used to loop through each poll element in the $polls variable that was declared earlier.
In each iteration of the loop, I transform and output simple <a></a> hyperlinks for each item in the loop. Take note of the usage of the current()/@text tag, which creates the text label used by the link and as part of the URL to which the link will redirect.
<!-- show all polls --> <xsl:for-each select="$polls"> <a><xsl:attribute name="href">default.aspx?displayPage=VoteWML.xsl&voteOn=<xsl:value-of select="current()/@text"/></xsl:attribute><xsl:value-of select="current()/@text"/></a><br /> </xsl:for-each>
After the loop is complete, render the last section of the WML card:
</p> </card> </wml> </xsl:template> </xsl:stylesheet>
The XHTML version does the same XSL processing except that it renders XHTML content. The full code for this is shown in Listing 13.9.
Listing 13.9 An XHTML Translation File for the Vote Page
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" omit-xml-declaration="no" doctype-system="http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd" standalone="yes" indent="yes" doctype-public="-//W3C//DTD
This transformation page produces what's shown in Figure 13.2 (XHTML version in Internet Explorer).
Figure 13.2. The list of polls available.
The voteWML.xsl File
The VoteWML file displays a specific question that has been selected through the output of the previous transformation that produced a list of questions from the polls.xml file. The question is displayed on the screen as text and then a list of hyperlinks are displayed for each of the possible options on which a user can vote (again, links are used for UI consistency). The XSL file is shown in Listing 13.10 and a walk-through is provided thereafter.
Listing 13.10 voteWML.xsl
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" omit-xml-declaration="no" doctype- system="http://www.phone.com/dtd/wml11.dtd" standalone="yes" indent="yes" doctype-public="-//PHONE.COM//DTD WML 1.1//EN" /> <xsl:param name="voteon" /> <xsl:template match="polls"> <wml> <card> <p mode="nowrap">Please vote<br /> <xsl:for-each select="//poll[@text=$voteon]"> <xsl:value-of select="current()/@text" /><br /> <xsl:for-each select="current()/item"> <a><xsl:attribute name="href">default.aspx?displayPage=UpdateWML&voteOn=<xsl:value-of select="$voteon"/>&voteitem=<xsl:value-of select="current()/@text"/></xsl:attribute><xsl:value-of select="current()/@text"/></a> </xsl:for-each> </xsl:for-each> </p> </card> </wml> </xsl:template> </xsl:stylesheet>
At the top of the file is the normal XML and XSL declarations:
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" omit-xml-declaration="no" doctype- system="http://www.phone.com/dtd/wml11.dtd" standalone="yes" indent="yes" doctype-public="-//PHONE.COM//DTD WML 1.1//EN" />
Next, an xsl:parameter is declared. (The exact usage of this was covered earlier in this chapter.) This parameter performs an XPath select for the poll question that you want to render to the display. This parameter is the voteon parameter.
<xsl:param name="voteon" />
Set the root of the document that you want to transform to the <polls> outermost element:
<xsl:template match="polls"> <wml> <card> <p mode="nowrap">Please vote<br />
Create a for-each loop as you did earlier, except that the actual select XPath statement now looks for a specific vote poll based on the text attribute of the <poll> tag. Then display the poll question text.
Followed by another xsl:for-each loop, this time for all the <item> elements in the <poll> tag. After that's done, create a hyperlink for each vote item, as you did earlier. Again, note the use of current()/@text and its use for the URL and rendering text:
<xsl:for-each select="//poll[@text=$voteon]"> <xsl:value-of select="current()/@text" /><br /> <xsl:for-each select="current()/item"> <a><xsl:attribute name="href">default.aspx?displayPage=UpdateWML&voteOn=<xsl:value-of select="$voteon"/>&voteitem=<xsl:value-of select="current()/@text"/></xsl:attribute><xsl:value-of select="current()/@text"/></a> </xsl:for-each> </xsl:for-each>
After both loops are complete, generate the footer information for the output WML file:
</p> </card> </wml> </xsl:template> </xsl:stylesheet>
The XHTML version does the same XSL processing except it renders for the XHTML browser. The full code is shown in Listing 13.11.
Listing 13.11 voteXHTML.xsl
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:param name="voteon" /> <xsl:output method="xml" omit-xml-declaration="no" doctype- system="http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd" standalone="yes" indent="yes" doctype-public="-//W3C//DTD XHTML Basic 1.0//EN" /> <xsl:template match="polls"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mobile Polls</title> </head> <body> Please select link below to place vote <xsl:for-each select="//poll[@text=$voteon]"> <xsl:value-of select="current()/@text" /> <br /> <xsl:for-each select="current()/item"> <a><xsl:attribute name="href"> default.aspx?displayPage=UpdateXHTML&voteOn=<xsl:value-of select="$voteon"/>&voteitem=<xsl:value-of select="current()/@text" /> </xsl:attribute><xsl:value-of select="current()/@text"/></a> <br /> </xsl:for-each> <br /> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
When the file is combined with the polls.xml file, you get the output that's shown in Figure 13.3 (XHTML version rendered to Internet Explorer).
Figure 13.3. Placing a vote.
The resultWML.xsl File
The resultWML.xsl file displays the statistics for a specific question that has been selected by the output from the previous XSL transformation that allowed people to vote on a question. The question is displayed onscreen as text, but a total vote count displayed is displayed, and a list of the possible options that a user could have voted on with a percentage value next to it showing what percentage of votes that item received. The XSL file is shown in Listing 13.12, and a walk-through is provided thereafter.
Listing 13.12 Vote Results XHTML Translation File
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" omit-xml-declaration="no" doctype- system="http://www.phone.com/dtd/wml11.dtd" standalone="yes" indent="yes" doctype-public="-//PHONE.COM//DTD WML 1.1//EN" /> <xsl:param name="voteon" /> <xsl:template match="polls"> <wml> <card> <xsl:for-each select="//poll[@text=$voteon]"> <p> <xsl:value-of select="current()/@text" /> <xsl:variable name="totalvotes" select="sum(//poll[@text=current()/@text]/item/
As always, at the top of the file you have the normal XML and XSL declarations:
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" omit-xml-declaration="no" doctype- system="http://www.phone.com/dtd/wml11.dtd" standalone="yes" indent="yes" doctype-public="-//PHONE.COM//DTD WML 1.1//EN" />
Next, declare an xsl:parameter . To put it briefly , however, the parameter performs an XPath select for the poll question that you want to render to the display. This parameter is the voteon parameter.
<xsl:param name="voteon" />
By now, you should be familiar with this first step of isolating all the polls and then selecting the poll for which you want to see results:
<xsl:template match="polls"> <wml> <card> <xsl:for-each select="//poll[@text=$voteon]">
Next, display the poll name that's statistics you will display.
After this is done, you can get to an interesting bit of transformation magic. First, have create a new xsl:variable ( $totalvotes ). This variable holds the total votes for each <item> in the selected <poll> element. The select calculates the sum of the <item/@votes> in the selected text item:
<p> <xsl:value-of select="current()/@text" /> <xsl:variable name="totalvotes" select="sum(//poll[@text=current()/@text]/item/@votes)" /> Total Votes: <xsl:value-of select="$totalvotes" /> </p>
Now that you have the totalvotes value for the question, loop through each of the <items> and display their text, followed by the total percentage of the overall votes that the current item has.
For each <item> element in the loop, check whether their <votes> attribute is 0 or not. Doing this avoids annoying issues such as "divide by 0" errors. I have done this check by using the xsl:choose statement and testing if the cur rent() element's <votes> attribute is > 0; if it is, I render the text and calculate the percentage and render that as well. Otherwise, I simply render the text of the <item> and some text as [0%] .
<p mode="nowrap"> <xsl:for-each select="current()/item"> <xsl:choose > <xsl:when test="current()/@votes > 0" > <xsl:variable name="votepercentage" select="round(current()/@votes div $totalvotes * 100)" /> <xsl:value-of select="current()/@text" /> [<xsl:value-of select="$votepercentage" />%] </xsl:when> <xsl:otherwise> <xsl:value-of select="current()/@text" /> [0%] </xsl:otherwise> </xsl:choose> </xsl:for-each> </p> </xsl:for-each>
Finally, after the loops are finished, simply render the rest of the WML card:
</card> </wml> </xsl:template> </xsl:stylesheet>
The XHTML version does the same XSL processing except that it renders for the XHTML browser. The full code for this is shown in Listing 13.13.
Listing 13.13 XHTML Translation File for the Vote Results Page
<?xml version="1.0" encoding="utf-8"?> <c:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:param name="voteon" /> <xsl:output method="xml" omit-xml-declaration="no" doctype- system="http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd" standalone="yes" indent="yes" doctype-public="-//W3C//DTD XHTML Basic 1.0//EN" /> <xsl:template match="polls"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mobile Polls</title> </head> <body> <xsl:for-each select="//poll[@text=$voteon]"> <xsl:value-of select="current()/@text" /> <br /> <xsl:variable name="totalvotes" select="sum(//poll[@text=current()/@text]/item/@votes)" /> Total Votes: <xsl:value-of select="$totalvotes" /><br /> <xsl:for-each select="current()/item"> <xsl:choose > <xsl:when test="current()/@votes > 0" > <xsl:variable name="votepercentage" select="round(current()/@votes div $totalvotes * 100)" /> <xsl:value-of select="current()/@text" /> [<xsl:value-of select="$votepercentage" />%] </xsl:when> <xsl:otherwise> <xsl:value-of select="current()/@text" /> [0%] </xsl:otherwise> </xsl:choose> <br /> </xsl:for-each> <br /> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
When this XSL transformation is rendered, you get the output that is shown in Figure 13.4. (The XHTML output was rendered by Internet Explorer.)
Figure 13.4. The Vote Results screen shot.
| only for RuBoard |
EAN: N/A
Pages: 184