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.
The form itself is pretty straightforward. It displays the page used to track auction items (see Listing 1).
Listing 1. The basic page
<?xml version="1.0" encoding="ASCII"?>
<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="auctionItems">
<xforms:instance src="auctions.xml"/>
<xforms:submission id="submit_model_auctionItems"
action="http://xformstest.org/cgi-bin/showinstance.sh"
method="post"/>
</xforms:model>
<link href="gen_default.css" rel="stylesheet"/>
</head>
<body>
<h1 align="center">Auction Item Inventory</h1>
<xforms:repeat nodeset="auctionItem" id="repeatAuctionItems">
<h2 align="center">Auction Item</h2>
<xforms:input ref="@itemID">
<xforms:label>Item ID</xforms:label>
</xforms:input>
<xforms:input ref="purchaseDate">
<xforms:label>Purchase Date</xforms:label>
</xforms:input>
<xforms:input ref="auctionLength">
<xforms:label>Auction Length</xforms:label>
</xforms:input>
<xforms:input ref="purchasePrice">
<xforms:label>Purchase Price</xforms:label>
<!--
<xforms:action ev:event="DOMActivate">
<xforms:send submission="submit_model_auctionItems"/>
</xforms:action>
-->
</xforms:input>
<xforms:input ref="description">
<xforms:label>Description</xforms:label>
</xforms:input>
<xforms:input ref="estimatedValue">
<xforms:label>Estimated Value</xforms:label>
</xforms:input>
</xforms:repeat>
<xforms:group>
<xforms:trigger>
<xforms:label>Insert Auction Item</xforms:label>
<xforms:insert nodeset="auctionItem" at="index('repeatAuctionItems')"
position="after" ev:event="DOMActivate" />
</xforms:trigger>
<xforms:trigger>
<xforms:label>Delete Auction Item</xforms:label>
<xforms:delete nodeset="auctionItem" at="index('repeatAuctionItems')"
ev:event="DOMActivate" />
</xforms:trigger>
</xforms:group>
<xforms:submit submission="submit_model_auctionItems">
<xforms:label>Submit</xforms:label>
</xforms:submit>
</body>
</html>
|
When you submit this form, shown in Listing 1, it goes directly to the URI specified on the submission element. But what if you want some feedback? Fortunately, you have the option to use one of three events (or, more than one at a time) involved in submissions.
The simplest way to see this in action is to create a message that appears when the user submits the form (see Listing 2).
Listing 2. Adding a message
...
<xforms:model id="auctionItems">
<xforms:instance src="auctions.xml"/>
<xforms:submission id="submit_model_auctionItems"
action="http://xformstest.org/cgi-bin/showinstance.sh"
method="post"/>
<xforms:message ev:event="xforms-submit"
level="modal">Submitting...</xforms:message>
</xforms:model>
<link href="gen_default.css" rel="stylesheet"/>
...
|
Now if you submit the form, you will see a text box telling you that you are submitting, as shown in Figure 1.
Figure 1. Text box telling you that you are submitting
The xforms-submit element is useful for letting the user know that there is actually something happening when they submit the form. But in some cases, you're more interested in knowing that the form submission has taken place successfully, or conversely, that there is an error. You can do that using two subsidiary events, xforms-submit-done and xforms-submit-error, as shown in Listing 3.
Listing 3. Submission completion and error events
...
<xforms:model id="auctionItems">
<xforms:instance src="auctions.xml"/>
<xforms:submission id="submit_model_auctionItems"
action="http://xformstest.org/cgi-bin/showinstance.sh"
method="post"/>
<xforms:message ev:event="xforms-submit"
level="modal">Submitting...</xforms:message>
<xforms:message ev:event="xforms-submit-done"
level="modal">Submission complete</xforms:message>
<xforms:message ev:event="xforms-submit-error"
level="modal">Can't submit!</xforms:message>
</xforms:model>
...
|
It is just like the main event, except that they don't fire until the submit process is complete. If everything goes well, you will see a "Submission complete" message, as shown in Figure 2, and as soon as the messaged is dismissed, the browser displays the actual submission page.
Figure 2. Submission complete message
If there is an error in submitting the form, it shows the "can't submit" message instead, which can be quite useful in XForms, where if there is an error in the submission, the browser might not otherwise show any indication.
You also have the option to do more explicit event management. You can do this by creating an action and assigning it an observer looking for a specific event. For an example, see Listing 4.
Listing 4. Creating multiple actions
...
<xforms:model id="auctionItems">
<xforms:instance src="auctions.xml"/>
<xforms:submission id="submit_model_auctionItems"
action="http://xformstest.org/cgi-bin/showinstance.sh"
method="post"/>
<xforms:action ev:observer="submit_model_auctionItems"
ev:event="xforms-submit">
<xforms:message level="modal">Submitting...</xforms:message>
</xforms:action>
<xforms:action ev:observer="submit_model_auctionItems"
ev:event="xforms-submit-done">
<xforms:message level="modal">Submission
complete</xforms:message>
</xforms:action>
<xforms:action ev:observer="submit_model_auctionItems"
ev:event="xforms-submit-error">
<xforms:message level="modal">Cannot submit!</xforms:message>
</xforms:action>
</xforms:model>
...
|
In this case, the behavior is exactly the same as it was before, but it's being triggered by the events being seen by the observer. The advantage here is that you can group multiple tasks together in the action element. For example, you could set a message in the instance in the case of an error, or even perform an alternate submission.
By explicitly looking for the events fired before and after the XForms form gets submitted, you can take control of the process and give your users better feedback, as well as providing additional functionality by taking additional or alternative actions.
| Description | Name | Size | Download method |
|---|---|---|---|
| Submission events forms XForms samples | submitevents_source.zip | 4KB | HTTP |
Information about download methods
Learn
- Let
Skimstone explain to you what XForms is.
- See the
Skimstone introduction to XForms.
-
To learn more about other possible schema types for your XForms inputs, check out w3cschools.
-
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.
Get products and technologies
-
Get MozzIE, an open-source control that allows you to render XForms in IE.
Discuss
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 (Sams).
Comments (Undergoing maintenance)
Table of contents
Local resources
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
