Level: Intermediate Tyler Anderson (tyleranderson5@yahoo.com), Freelance writer
13 Feb 2007 At times it is crucial to programmatically control the writability of data in your XForms. For example, if you're browsing data in read-only mode (so modifications aren't made by accident), and then you need to update or add new data, the read-only mode of the same controls will need to become writeable. This tip shows how you can change the readonly property of controls programmatically.
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 (see Listing 1).
Listing 1. The instance document
<DataElement xmlns="">
<FirstName readonly="true" />
<LastName />
<Special />
</DataElement>
|
As you can see, 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. Note that the FirstName control has a readonly attribute that will be used to programmatically change the control's writability.
The XForm
Take a look at the XForm created for this tip, shown in Listing 2. Notice the readonly-writability relevant code in bold font.
Listing 2. Controlling writability
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Making a readOnly control writeable</title>
<xf:model id="nameConcat">
<xf:instance id="main">
<DataElement xmlns="">
<FirstName readonly="true" />
<LastName />
<Special />
</DataElement>
</xf:instance>
<xf:submission id="submit_nameConcat"
action="http://xformstest.org/cgi-bin/showinstance.sh"
method="post"/>
<xf:bind nodeset="FirstName" readonly="@readonly='true'"/>
</xf:model>
</head>
<body>
<xf:group nodeset="/DataElement">
<xf:label>Name Concatenations: </xf:label>
<xf:output value="concat(FirstName, ' ', LastName,
' ', Special)"/>
<p>
<xf:output ref="FirstName/@readonly">
<xf:label>Read Only: </xf:label>
</xf:output>
</p>
<p>
<xf:input ref="FirstName" incremental="true">
<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:trigger>
<xf:label>Make writeable</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="FirstName/@readonly" value="'false'" />
</xf:action>
</xf:trigger>
<xf:trigger>
<xf:label>Make readonly</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="FirstName/@readonly" value="'true'" />
</xf:action>
</xf:trigger>
</xf:group>
</body>
</html>
|
There are several areas in Listing 2 to focus on. Notice the bind element under the model element. The FirstName data is bound as read only if its readonly attribute in the instance data is set to true. The value of this attribute is also displayed on the form for testing purposes. Finally, there are two buttons that change the value of the readonly attribute in the instance data. The button that makes the FirstName writeable is like providing the user of the form with an Edit button, and the button that makes the FirstName read only again is like providing the user with a Save button to preserve the changes.
Note that the buttons modify the writability of the control by using the setvalue action. The readonly attribute of FirstName in the instance data is modified to false or true, respectively. This gives you full programmatic control over the writability of the control.
XForms in action
Now you need to see the form in action. Load up the form and try typing in the "First Name:" to verify that it's readonly, as shown in Figure 1.
Figure 1. The form in action
You can't type anything, just as expected. Now click the Make writeable button, and type some data, shown in Figure 2.
Figure 2. Making the control writeable
Excellent! You've modified the control, now set it back to readonly by clicking Make readonly. You will no longer be able to modify the text in the textbox just as before.
Summary
You've learned more on how to take control over the attributes contained in your form, enabling you to build more powerful XForms. You should now be able to implement this feature into your other XForms projects, or adapt these attribute-controlling concepts to other attributes such as the relevant attribute.
Download | Description | Name | Size | Download method |
|---|
| Read-only writeable XForms samples | readonlywriteable_source.zip | 2KB | HTTP |
|---|
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
About the author  | | | Tyler Anderson recieved both his B.S. in Computer Science in 2004 and his M.S. in Electrical and Computer Engineering in 2005 from Brigham Young University. Tyler has written and coded numerous articles and tutorials for IBM developerWorks and DevX. |
Rate this page
| 
