Before you begin: Notes about this tip
This tip is specific to a particular task. For background information on XForms, see the three-part series Introduction to XForms.
The XForms samples described in this tip have been tested and work with Firefox 1.5 (with the XForms extension installed) and Microsoft® Internet Explorer 6 with the Formsplayer control installed. The download contains the XHTML file for Firefox and the HTML file for IE.
XForms provides its own version of Ajax, in that it is designed to enable you to replace the data that defines the page's content without replacing the entire page. Consider, for example, a page of snippets of cowboy wisdom. The instance might look like what's shown in Listing 1.
Listing 1. The instance data
<pearls>
<pearl>
Never ask a barber if he thinks you need a haircut.
</pearl>
<pearl>
Making it in life is kind of like busting broncos. You're
going to get thrown a lot. The simple secret is to keep getting
back on.
</pearl>
<pearl>
Never miss a good chance to shut up.
</pearl>
<pearl>
The quickest way to double your money is to fold it over and
put it back in your pocket.
</pearl>
</pearls>
|
You can then build a form that looks like this (see Listing 2).
Listing 2. The form
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<title>Instance Data-To-XHTML/XForms Example</title>
<xforms:model id="model_pearls">
<xforms:instance id="instance_model_pearls" src="wisdom.xml"/>
<xforms:submission id="submit_model_pearls"
action="http://localhost/newwisdom.xml"
method="post" replace="instance"
instance="instance_model_pearls"/>
</xforms:model>
<link href="gen_default.css" rel="stylesheet"/>
</head>
<body>
<h1>Cowboy Wisdom</h1>
<xforms:output id="thePearl" ref="/pearls/pearl[2]"
model="model_pearls" />
<xforms:submit submission="submit_model_pearls">
<xforms:label>Get new sayings</xforms:label>
</xforms:submit>
</body>
</html>
|
The result is a page much like Figure 1.
Figure 1. The basic page
Notice that the ref attribute for the output element is an XPath statement that includes position. By controlling that XPath statement, you can control what appears on the page.
You can also control the page by controlling the actual data. You may have noticed that in Listing 1, part of the bold text is information on the submission element. Here you have instructed the XForms engine to replace not the page, but a specific instance. By making a request to the URL that will return the same structure but with different data, you can immediately get new data. For example, if you click the Submit button, the browser loads another document, and because the output statement is set to always look at a particular position, that is the position for the data that will now populate the form, as you can see in Figure 2.
Figure 2. Replacing part of the page
When you absolutely have to use a script
In some cases, however, you're going to have to use JavaScript, whether you like it or not. Perhaps you are dealing with data that must be massaged in some way before it's used, or is coming from a site you do not control. One option is to retrieve the data using JavaScript, and then add it to the page.
The key is to understand that you can't directly add data to an element the way you would with a plain HTML page. Instead, you need to put the information into the instance and then manipulate the XPath statement that specifies the contents of an XForms control.
An example of this would be to add a second button to the page to cycle through the sayings (see Listing 3).
Listing 3. Adding a script
...
<body>
<h1>Cowboy Wisdom</h1>
<script type="text/javascript">
var whichPearl = 0;
function choosePearl(){
if (whichPearl == 0) {
whichPearl = 1;
} else if (whichPearl == 1) {
whichPearl = 2;
} else if (whichPearl == 2) {
whichPearl = 3;
} else if (whichPearl == 3) {
whichPearl = 0;
}
refString = "/pearls/pearl["+whichPearl+"]";
theTarget = document.getElementById("thePearl");
theTarget.setAttribute("ref", refString);
}
</script>
<xforms:output id="thePearl" ref="/pearls/pearl[2]"
model="model_pearls" />
<form>
<input type="button" value="Change saying"
onclick="choosePearl();" />
</form>
<xforms:submit submission="submit_model_pearls">
<xforms:label>Get new sayings</xforms:label>
</xforms:submit>
</body>
</html>
|
The function itself is simple, cycling through numeric values. In a real application, this would be the script in which you make your Ajax requests and deal with the data returned. For each index value, you are creating new text that goes in the ref attribute of the thePearl element.
Next you add a from which to call this script. Now if you reload the page, the button appears and you can click it. Each time you click it and the ref attribute changes, the page automatically changes the data to match that XPath statement, as you can see in Figure 3.
Figure 3. The new script
XForms already provides some Ajax-like capabilities, in that you can change the data on the page without having to reload the page itself. If, on the other hand, you must go to a script, you can manipulate the XML data that defines what the XForms form looks like, thereby making any changes you need based on external data.
| Description | Name | Size | Download method |
|---|---|---|---|
| Ajax XForms samples | xforms_ajax_source.zip | 4KB | HTTP |
Information about download methods
- Participate in the discussion forum.
-
For an excellent introduction to Ajax and Ajax requests, see Brett McLaughlin's three-part series Mastering Ajax (developerWorks, December 2005).
-
This series is a good guide for getting started using XForms.
-
Start here to learn about the Visual XForms Designer from alphaWorks.
-
In the
XML area on developerWorks, get the resources
you need to advance your skills in XForms and other XML technologies.
-
Browse the
technology bookstore for books on these and other technical topics.
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, an Oracle instructor, and the Chief Technology Officer of an interactive communications company. He is the author of several books, including XML Primer Plus (Sam's).
Comments (Undergoing maintenance)
Table of contents
Next steps from IBM
Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.
- Try: WebSphere Portal Express
- Article: Get started using Ajax and WebSphere Portal Express
- Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
- Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
- Webcast: Rational software process automation: Real value delivered, real customer stories
- Buy: WebSphere Portal Express
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
