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.
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.
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.
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.
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.
| Description | Name | Size | Download method |
|---|---|---|---|
| Read-only writeable XForms samples | readonlywriteable_source.zip | 2KB | HTTP |
Information about download methods
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 (Undergoing maintenance)
Table of contents
Local resources
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
