Skip to main content

XForms tip: Making a read-only control writeable

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.

Summary:  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.

View more content in this series

Date:  13 Feb 2007
Level:  Intermediate
Activity:  1333 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

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

DescriptionNameSizeDownload method
Read-only writeable XForms samplesreadonlywriteable_source.zip2KB HTTP

Information about download methods


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.

Comments (Undergoing maintenance)



Trademarks  |  My developerWorks terms and conditions

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

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=195833
ArticleTitle=XForms tip: Making a read-only control writeable
publish-date=02132007
author1-email=tyleranderson5@yahoo.com
author1-email-cc=troy@backstopmedia.com

My developerWorks community

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

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

Use the search field to find all types of content in My developerWorks with that tag. 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).

Special offers