For the purpose of this tip, I'll take an XML file of potential user choices for an opt-in list and convert it into a form. This form has checkboxes, some of which are checked by default, and uses JavaScript to confirm that the submission deadline hasn't passed before the form is submitted:
Listing 1. The source file
<?xml version="1.0"?>
<choices>
<option default="no">
<value>1</value><genre>Drama</genre>
</option>
<option default="yes">
<value>2</value><genre>Comedy</genre>
</option>
<option default="yes">;
<value>3</value><genre>Science Fiction</genre>
</option>
<option default="no">
<value>4</value><genre>Romance</genre>
</option>
<option default="yes">
<value>5</value><genre>Adventure</genre>
</option>
</choices>
|
The target file is a simple form that executes a script to determine whether to submit the form:
Listing 2. The target file
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Select Choices</title>
<script version="1.3" type="text/javascript">
function checkDate() {
var today = new Date();
var deadlineDate = new Date('3/3/2002');
if (today > deadlineDate) {
alert('The deadline has passed.');
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return checkDate()" method="post" action="processform.jsp">
<p>We will send you information on the subjects in which you're
interested. Please check all that apply.</p>
<input type="checkbox" value="1">Drama<br>
<input type="checkbox" value="2" checked>Comedy<br>
<input type="checkbox" value="3" checked>Science Fiction<br>
<input type="checkbox" value="4">Romance<br>
<input type="checkbox" value="5" checked>Adventure<br>
<input value="Submit Choices" type="submit">
</form>
</body>
</html>
|
You may notice that the target file is not a well-formed XML document. Specifically, HTML allows
you to leave out certain end-tags (such as input and br) and to
minimize certain attribute values that are evaluated based on their presence, such as checked.
Notice also the greater-than sign (>) in the checkDate() function.
The style sheet must take all of this into account, and make adjustments accordingly:
Listing 3. The style sheet
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/choices">
<html><head><title>Select Choices</title>
<script type="text/javascript" version="1.3">
function checkDate() {
var today = new Date();
var deadlineDate = new Date('3/3/2002');
if (today > deadlineDate) {
alert('The deadline has passed.');
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form action="processform.jsp" method="post" onsubmit="return checkDate()">
<p>We will send you information on the subjects in which you're
interested. Please check all that apply.</p>
<xsl:apply-templates/>
<input type="submit" value="Submit Choices"/>
</form>
</body>
</html>
</xsl:template>
<xsl:template match="option">
<xsl:element name="input">
<xsl:attribute name="type">checkbox</xsl:attribute>
<xsl:attribute name="value"><xsl:value-of select="value"/>
</xsl:attribute>
<xsl:if test="@default='yes'">
<xsl:attribute name="checked">checked</xsl:attribute>
</xsl:if>
</xsl:element>
<xsl:value-of select="genre"/>
<br />
</xsl:template>
</xsl:stylesheet>
|
The style sheet itself is fairly straightforward. The root element template displays the main structure of the page,
with a separate template for each choice that creates an input
element. This element carries the value as an attribute (and, potentially, the
checked attribute), and displays the choice itself and a <br /> tag.
Unfortunately, if this style sheet were processed as XML, these accommodations would carry through to the final document:
Listing 4. The results as XML
<?xml version="1.0" encoding="UTF-8"?>
<html><head><title>Select Choices</title>
<script version="1.3" type="text/javascript">
function checkDate() {
var today = new Date();
var deadlineDate = new Date('3/3/2002');
if (today > deadlineDate) {
alert('The deadline has passed.');
return false;
} else {
return true;
}
}
</script></head><body>
<form onsubmit="return checkDate()" method="post" action="processform.jsp">
<p>We will send you information on the subjects in which you're
interested. Please check all that apply.</p>
<input type="checkbox" value="1"/>Drama<br/>
<input type="checkbox" value="2" checked="checked"/>Comedy<br/>
<input type="checkbox" value="3" checked="checked"/>Science Fiction<br/>
<input type="checkbox" value="4"/>Romance<br/>
<input type="checkbox" value="5" checked="checked"/>Adventure<br/>
<input value="Submit Choices" type="submit"/></form></body></html>
|
Before going on, let me acknowledge that the output above is valid XHTML, in that all of the tags are existing XHTML tags, it's well-formed, and so on (XHTML is simply HTML 4.01 reformulated as XML). Aside from the fact that white space can make this difficult to read, many older browsers do not interpret this page correctly because of the closing slashes in the empty tags. (Normally, developers simply add a space before the closing slash to prevent problems, but the processor doesn't know that.)
What's more, the
script does not execute correctly because the greater-than sign is still represented as an entity (>).
Fortunately, the designers of XSLT anticipated this problem and added the output element.
For example, to specify that you want the output document to be HTML, add the output method to the style sheet:
Listing 5. Add the output method
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:output method="html" indent="yes" version="4.0"/>
<xsl:template match="/choices">
...
|
The method attribute can take one of three values: xml,
html, or text.
By using html as the output method, you tell the
processor to do several things, including the following:
- For script and style elements, replace any escaped characters (such as
&and>) with their actual values (&and>, respectively). - For attributes, replace any occurrences of
>with>. - Write empty elements such as
<br>,<img>, and<input>without closing tags or slashes. - Write attributes that convey information by their presence as opposed to their value, such as
checkedandselected, in minimized form.
The end result is an HTML document that any browser should be able to handle.
- Check out the W3C working draft of the XSLT 2.0 specification.
- Download JAXP or
Xalan-Java.
-
IBM trial software: Build your next development project with trial software available for download directly from developerWorks.
- Find out how you can become an IBM Certified Developer in XML and related technologies.
- Want us to send you useful XML tips like this every week? Sign up for the developerWorks
XML Tips newsletter.
- Find more XML resources on the developerWorks XML zone. For a complete list of XML tips to date, check out the tips summary page.
Nicholas Chase has been involved in Web site development for companies such as Lucent Technologies, Sun Microsystems, Oracle, and the Tampa Bay Buccaneers. Nick has been a high school physics teacher, a low-level radioactive waste facility manager, an online science fiction magazine editor, a multimedia engineer, and an Oracle instructor. More recently, he was the Chief Technology Officer of Site Dynamics Interactive Communications in Clearwater, Fla., and is the author of three books on Web development, including Java and XML From Scratch (Que) and the upcoming Primer Plus XML Programming (Sams). He loves to hear from readers and can be reached at nicholas@nicholaschase.com.
Table of contents
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags