Skip to main content

skip to main content

developerWorks  >  XML  >

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

developerWorks
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
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
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

DescriptionNameSizeDownload method
Dynamic controls XForms samplesdynamiccontrols_source.zip4KBHTTP
Information about download methods


Resources

Learn

Get products and technologies
  • Get MozzIE, an open-source control that allows you to render XForms in IE.


Discuss


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


Please take a moment to complete this form to help us better serve you.



YesNoDon't know
 


 


12345
Not
useful
Extremely
useful
 


Back to top