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 instance data
This is the instance document that you'll use throughout this tip to test the XForm with (Listing 1).
Listing 1. The instance document
<DataElement xmlns=""> <FirstName /> <LastName /> <Special /> </DataElement>
There are three main elements in the form that you'll need instance data for. The form then concatenates the names all together for you.
It is time to create the XForm for this tip. Take notice of the
incremental attributes being set in bold font (Listing 2).
Listing 2. Detecting incremental changes
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms"> <head> <title>Using the incremental attribute to detect keystrokes</title> <xf:model id="nameConcat"> <xf:instance > <DataElement xmlns=""> <FirstName /> <LastName /> <Special /> </DataElement> </xf:instance> <xf:submission id="submit_nameConcat" action="http://xformstest.org/cgi-bin/showinstance.sh" method="post"/> </xf:model> </head> <body> <xf:group nodeset="/DataElement"> <xf:label>Name Concatenations: </xf:label> <xf:output value="concat(FirstName, ' ', LastName, ' ', Special)"/> <p> <xf:input ref="FirstName"> <xf:label>First Name: </xf:label> </xf:input> </p> <p> <xf:input ref="LastName" incremental="true"> <xf:label>Last Name: </xf:label> </xf:input> </p> <p> <xf:select1 ref="Special" incremental="true"> <xf:label>Special: </xf:label> <xf:item> <xf:label>Sr</xf:label> <xf:value>Sr</xf:value> </xf:item> <xf:item> <xf:label>Jr</xf:label> <xf:value>Jr</xf:value> </xf:item> <xf:item> <xf:label>I</xf:label> <xf:value>I</xf:value> </xf:item> <xf:item> <xf:label>II</xf:label> <xf:value>II</xf:value> </xf:item> <xf:item> <xf:label>III</xf:label> <xf:value>III</xf:value> </xf:item> </xf:select1> </p> <xf:submit submission="submit_nameConcat"> <xf:label>Submit</xf:label> </xf:submit> </xf:group> </body> </html>
It really is as simple as that. Notice how the first line of bold font concatenates the
Special together. The FirstName's control does not have the
incremental attibute set on purpose, so that you have something to compare with. The
Special controls are set as
incremental. Thus, when the value of those controls change, the output value (
"Name Concatenations:") will update immediately, but the
FirstName control will not update the output control (
"Name Concatenations:") immediately until the control looses its focus. You'll see more of what this means in the next section.
XForms in action
Seems too good to be true? Well it should be, but lucky for us XForms developers, it isn't. Upon loading the XForm, type some data into the "First Name:" text box, as shown in Figure 1.
Figure 1. Entering some data
Notice how the label beside "Name Concatenations:" hasn't changed? It's because you need to change to the next text box before any updating will occur. So go ahead and move the cursor to the "Last Name:" textbox, and enter some more data (Figure 2).
Figure 2. Typing in a last name
Notice how the "Name Concatenations:" label updates immediately? That's the magic of the
XForms allows you to update form data in real time as slight incremental changes are made to the form. In fact, you should now be more than able to implement the capabilities of the
incremental attribute in any XForms application. This feature allows you to develop more feature-rich and interactive XForms applications that will wow your clients time and time again.
|Incremental attribute XForms samples||incremental_detectkey_source.zip||2KB|
- 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.
- Let Skimstone explain to you what XForms is.
- See the Skimstone introduction to XForms.
Get products and technologies
- Get MozzIE, an open-source control that allows you to render XForms in IE.
- Build your next development project with trial software available for download directly from developerWorks: IBM trial software