XForms/Read Only

Motivation

Forms frequently need to display fields that are not editable by the user. The following program demonstrates this feature.

This is done in XForms using a binding and a style sheet.

A single field (or group of fields) can be marked as read-only with a single bind statement. For example, suppose you had a set of fields related to shipping supplies to remote staff in your IT department. The billing address could not be changed, only who an item was shipped to.

The following single line in the model would make all of the sub-elements of BillToAddress read-only:

<xf:bind nodeset="/PurchaseOrders/BillToAddress" readonly="true()" />

Note that because of CSS, all the fields under this binding will be marked read-only. This is one good reason you may want to logically group read-only data elements in an application.

Screen Image

XForm read-only fields have a gray background

Sample Program

XHTML XForm

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>Demonstration of Read-Only Binding</title>
      <link rel="stylesheet" type="text/css" href="table-form.css" />
      <xf:model>
         <xf:instance xmlns="" src="PurchaseOrder.xml" />
         <!-- the following line sets all the data input fields under this node to be read-only -->
         <xf:bind nodeset="/PurchaseOrder/BillToAddress" readonly="true()" />
      </xf:model>
   </head>
   <body>
      <xf:group ref="/PurchaseOrder/BillToAddress">
         <xf:label class="box-label">Billing Address :</xf:label>
         <xf:input ref="OrganizationName">
            <xf:label>Organization Name: </xf:label>
         </xf:input>
         <xf:input ref="LocationStreetFullText">
            <xf:label>Street: </xf:label>
         </xf:input>
         <xf:input ref="LocationStreetFullText2">
            <xf:label />
         </xf:input>
         <xf:input ref="LocationCityName">
            <xf:label>City:</xf:label>
         </xf:input>
         <xf:input ref="LocationStateName">
            <xf:label>State:</xf:label>
         </xf:input>
         <xf:input ref="LocationPostalID">
            <xf:label>Postal Code:</xf:label>
         </xf:input>
      </xf:group>
      <xf:group ref="/PurchaseOrder/ShipToAddress">
         <xf:label class="box-label">Shipping Address :</xf:label>
         <xf:input ref="PersonName">
            <xf:label>Person Name: </xf:label>
         </xf:input>
         <xf:input ref="LocationStreetFullText">
            <xf:label>Street: </xf:label>
         </xf:input>
         <xf:input ref="LocationStreetFullText2">
            <xf:label />
         </xf:input>
         <xf:input ref="LocationCityName">
            <xf:label>City:</xf:label>
         </xf:input>
         <xf:input ref="LocationStateName">
            <xf:label>State:</xf:label>
         </xf:input>
         <xf:input ref="LocationPostalID">
            <xf:label>Postal Code:</xf:label>
         </xf:input>
      </xf:group>
   </body>
</html>

Sample Instance Data (PurchaseOrder.xml)

<PurchaseOrder xmlns="">
   <BillToAddress>
      <OrganizationName>MegaCorp IT Dept.</OrganizationName>
      <LocationStreetFullText>123 Main St.</LocationStreetFullText>
      <LocationStreetFullText2>Mailstop 47</LocationStreetFullText2>
      <LocationCityName>Anytown</LocationCityName>
      <LocationStateName>Minnesota</LocationStateName>
      <LocationPostalID>55123</LocationPostalID>
   </BillToAddress>
   <ShipToAddress>
      <PersonName>John Jones</PersonName>
      <LocationStreetFullText>123 Main Street SE</LocationStreetFullText>
      <LocationStreetFullText2>Apartment 123</LocationStreetFullText2>
      <LocationCityName>Anytown</LocationCityName>
      <LocationStateName>Minnesota</LocationStateName>
      <LocationPostalID>55123</LocationPostalID>
   </ShipToAddress>
</PurchaseOrder>

XForms tabular layout stylesheet (table-form.css)

 /* a stylesheet for tabular XForms input field alignment */

@namespace xf url("http://www.w3.org/2002/xforms");

/* give the input form labels and the fieldset legend a bold sans-serif font */
label {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: small;
}

xf|group {
	border: black solid 2px;
	padding: 5px;
	width: 300px;
}

/* the labels are right-aligned in a 150px wide column */
xf|input xf|label {
   width: 150px;
   margin: 3px;
   text-align: right;
}

/* the input values are left aligned */
xf|value {
   text-align: left;
}

/* vertical area between input boxes */
input {
   margin: .2em;        
}

/* each input is a row in the group table */
xf|input {
   display: table-row;
}

/* each label within an input is a cell in the input row */
xf|input xf|label {
   display: table-cell; 
}

/* each value (pseudo-element) is also a cell in the input row */
xf|input::value {
   display: table-cell;
}

Discussion

Next Page: Select and Group | Previous Page: Disable Buttons
Home: XForms