More in this series: XForms tip

In this article:
	Before you begin: Notes about this tip
	The instance data
	The repeat element
	The select1 and itemset elements
	Summary
	Download
	Resources
	About the author
	Rate this page

Related links
	XML technical library

developerWorks > XML >

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

Document options

Document options requiring JavaScript are not displayed

		Discuss
		Sample code

Rate this page

Help us improve this content

Level: Intermediate

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

09 Jan 2007

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!

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.

Back to top

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.

Back to top

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.

Back to top

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).

Back to top

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!

Back to top

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


		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.

Rate this page

Back to top