XForms tip: Using the incremental attribute to detect keystrokes

One of the slickest application genres are those that update data as you type. XForms does this with finesse! Controls have the ability to send events after each keystroke entered within them using the incremental attribute. That way controls that need to change their data based on the data of a control that's changing incrementally can also update their data incrementally, effectively keeping what's viewed "on screen" in sync across the board. This tip shows you how to make the most of the incremental feature with sample XForms code.

Tyler Anderson (tyleranderson5@yahoo.com), Freelance writer

Tyler Anderson graduated with a degree in Computer Science from Brigham Young University in 2004 and is currently in his last semester as a Master of Science student in Computer Engineering. In the past, he worked as a database programmer for DPMG.COM, and he is currently an engineer for Stexar Corp., based in Beaverton, Oregon.



06 February 2007

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.


The XForm

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 FirstName, LastName and Special together. The FirstName's control does not have the incremental attibute set on purpose, so that you have something to compare with. The LastName and 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
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
Typing in a last name

Notice how the "Name Concatenations:" label updates immediately? That's the magic of the incremental attribute.


Summary

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.


Download

DescriptionNameSize
Incremental attribute XForms samplesincremental_detectkey_source.zip2KB

Resources

Learn

  • 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

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into XML on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=XML
ArticleID=194033
ArticleTitle=XForms tip: Using the incremental attribute to detect keystrokes
publish-date=02062007