XForms tip: Dynamically create controls with the repeat, select1, and itemset elements

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.

Summary: Forms can have lists of data, which are difficult to display using regular HTML forms. The select1 and itemset elements have a lot of flexibility and are very similar to the select or option tags in HTML. The repeat element really shows its power here in that you can have a list of lists of data, and so on. You'll see how slick it is to populate the data used by the forms using XML. Once you use these XForms controls and populate them using XML, you'll never want to go back to using HTML ever again!

View more content in this series

Tag this!

Date: 09 Jan 2007
Level: Intermediate
Activity: 1750 views

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

Here is an example that tracks purchases at an auction. You'll be able to implement and test the repeat element by having multiple auctionItem elements, and within each auctionItem you have a lotItems element with children lotItem elements that you'll use to populate a selection menu in XForms. The instance document you'll work with in this tip is shown below (Listing 1).

Listing 1. The instance document


<auctionItems  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <auctionItem itemID="2">
    <purchaseDate>2006-09-18</purchaseDate>
    <auctionLength>600</auctionLength>
    <purchasePrice>10</purchasePrice>
    <description>Vintage hair dryer</description>
    <estimatedValue>N/A</estimatedValue>
    <selection/>
  </auctionItem>
  <auctionItem itemID="5">
    <purchaseDate>2006-09-18</purchaseDate>
    <auctionLength>300</auctionLength>
    <purchasePrice>4</purchasePrice>
    <description>Box Lot</description>
    <estimatedValue>N/A</estimatedValue>
    <selection/>
  </auctionItem>
  <lotItems>
      <lotItem itemID="1">
        <name>not so cool toy</name>
      </lotItem>
      <lotItem itemID="2">
        <name>not so cool toy2</name>
      </lotItem>
      <lotItem itemID="4">
        <name>cool toy</name>
      </lotItem>
      <lotItem itemID="3">
        <name>not so cool toy3</name>
      </lotItem>
  </lotItems>
</auctionItems>

The items in bold specify the schema type of the auctionItem tags as well as the lotItems tags and their children. The selection tag is where the selected tag's value will go when submitting the form with the selection menu in place (which you'll do later in this tip). Next, you'll check out what the interface needs to look like to take true advantage of XML.

The repeat element

The repeat element helps you display all the children of an XML element, making the most of XML. Below is the form with the repeat element in action (Listing 2).

Listing 2. The repeat element


<?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 id="auctions" 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: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>

The repeat element displays all the instances of auctionItem in the form, as shown in Figure 1.

Figure 1. Viewing multiple instances of auctionItem

You can also insert and delete instances of auctionItem from the form by pressing the insert and delete buttons.

The select1 and itemset elements

With the select1 element inside the repeat element you can dynamically create a separate selection menu for each instance of the auctionItem element. Plus, you get to populate it with data from the XML instance data. Below, in Listing 3, is the modifications to the form, incorporating the select1 and itemset elements.

Listing 3. The select1 and itemset elements


...
      </xforms:input>
      <xforms:input ref="estimatedValue">
        <xforms:label>Estimated Value</xforms:label>
      </xforms:input>

      <xforms:select1 ref="selection" appearance="compact">
        <xforms:label>Choose lot item: </xforms:label>
        <xforms:itemset nodeset="//lotItem">
          <xforms:value ref="@itemID" />
          <xforms:label ref="name" />
        </xforms:itemset>
      </xforms:select1>
    </xforms:repeat>
...

Here you have a label, and the itemset element that populates the selection menu using the lotItem elements from the XML instance data. See it in action in Figure 2.

Figure 2. The dynamically created selection menus

There are other ways to display the selection menu as well. For instance, try setting the following attribute on the select1 element: <xforms:select1 ref="selection" appearance="full"> or <xforms:select1 ref="selection" appearance="minimal">. There are three possibilities in all: minimal, compact, and full. Minimal creates a control similar to that of a combo box. Compact is the selection menu shown in Figure 2, and full creates a number of options to click.

Submitting the form results in the following, as shown in Listing 4.

Listing 4. The submitted instance data


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<auctionItems xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <auctionItem itemID="2">
    <purchaseDate>2006-09-18</purchaseDate>
    <auctionLength>600</auctionLength>
    <purchasePrice>10</purchasePrice>
    <description>Vintage hair dryer</description>
    <estimatedValue>N/A</estimatedValue>
    <selection>3</selection>
  </auctionItem>
  <auctionItem itemID="5">
    <purchaseDate>2006-09-18</purchaseDate>
    <auctionLength>300</auctionLength>
    <purchasePrice>4</purchasePrice>
    <description>Box Lot</description>
    <estimatedValue>N/A</estimatedValue>
    <selection>4</selection>
  </auctionItem>
  <lotItems>
    <lotItem itemID="1">
      <name>not so cool toy</name>
    </lotItem>
    <lotItem itemID="2">
      <name>not so cool toy2</name>
    </lotItem>
    <lotItem itemID="4">
      <name>cool toy</name>
    </lotItem>
    <lotItem itemID="3">
      <name>not so cool toy3</name>
    </lotItem>
  </lotItems>
</auctionItems>

You can see the set selection tag's value corresponds to the itemID of the selected lot item (see Figure 2 to double check).

Summary

You can now effectively use the repeat, select1 and itemset elements to create dynamic XForms forms for your Web development needs. The repeat element lets you show all the children of an XML node in true XML fashion, listing all of the information. The select1 and itemset elements let you dynamically populate the data of your selection menu using the power and flexibility of XML. Who knows what you'll be able to do next!

Download

Description	Name	Size	Download method
Dynamic controls XForms samples	dynamiccontrols_source.zip	4KB	HTTP

Information about download methods

Resources

Learn

Let Skimstone explain to you what XForms is.
See the Skimstone introduction to XForms.
For a series of developerWorks tutorials on learning to program with PHP, see: Learning PHP, Part 1, Learning PHP, Part 2, and Learning PHP, Part 3.
Visit developerWorks' PHP project resources to learn more about PHP.
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

Participate in the discussion forum.

About the author

Comments (Undergoing maintenance)

Trademarks | My developerWorks terms and conditions

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=1

Zone=XML

ArticleID=187359

ArticleTitle=XForms tip: Dynamically create controls with the repeat, select1, and itemset elements

publish-date=01092007

author1-email=tyleranderson5@yahoo.com

author1-email-cc=troy@backstopmedia.com