4.1 Aggregation Using group

XForms aggregation construct group can be used to group logically related user interface controls. When introducing the notion of hierarchical data models, we saw how related variables were grouped into higher-level aggregations. Thus, the house number, street name, city name , and ZIP code are typically grouped into an address structure. Construct group enables similar functionality on the user interface side.

When modeling data, grouping related variables into appropriate hierarchical structures leads to data encapsulation. When creating user interfaces, grouping logically related controls results in related parts of a user interface being encapsulated in logical containers. When rendering the final presentation, this logical grouping can be used to advantage in refactoring the user interface in a manner appropriate for the target device. Such grouping can also help in navigating through a complex user interface. We show an example of the use of element group in grouping together the various user interface controls making up a conceptual address control in Figure 4.1. The result of rendering this example using X-Smiles is shown in Figure 4.2.

Figure 4.1 Grouping related controls using construct group .

 <  html   xmlns  ="http://www.w3.org/1999/xhtml">   <  head  ><  title  >Address Form</  title  >     <  model   xmlns  ="http://www.w3.org/2002/xforms">       <  instance  >         <  address   xmlns  ="">           <  name  /><  street  /><  city  /><  state  /><  zip  />       </  address  ></  instance  >   </  model  ></  head  >   <  body  >     <  group   xmlns  ="http://www.w3.org/2002/xforms"  ref  ="/address"  accesskey  ="a">       <  label  >Mailing Address</  label  >       <  input   ref  ="name"><  label  >Name</  label  ></  input  >       <  input   ref  ="street"><  label  >...</  label  ></  input  >       <  input   ref  ="city"><  label  >City</  label  ></  input  >       <  input   ref  ="state"><  label  >...</  label  ></  input  >       <  input   ref  ="zip"><  label  >ZIP</  label  ></  input  > </  group  ></  body  ></  html  >

Figure 4.2. X-Smiles rendering of related controls using construct group .

graphics/04fig02.gif

4.1.1 Labeling Groups

Element label can be used to attach a meaningful label to a group. As in the case of user interface controls, the contents of the label can be specified directly within element label or indirectly via a URI. Placing meaningful labels on element group has several advantages:

Accessibility

When the user navigates to a group, an accessibility aid can render the label for the group to give the user a high-level overview of the contents of the group. Thus, label Mailing Address in Figure 4.1 alerts the user about what to expect when moving through the controls in that group.

Refactoring

Consider a complex invoice that contains the address user interface shown in Figure 4.1. When rendered to a large display, the user is presented sufficient context to interpret meaningfully the relationship of the address being input to the rest of the invoice. Consider refactoring such a complex user interface for presentation on a small display. The user interface will need to be split into a number of logical units and presented as a deck of cards. Alternatively, it might be presented as a tab dialog with each tab containing a portion of the interface. In either case, the group label can be used as the title for each logical component of the interface to construct a navigable table of contents that lets the user move efficiently between the various portions of the application.

4.1.2 Navigating among Groups

Logically grouped controls enable the user to navigate through complex user interfaces. As in the case of user interface controls, attribute accesskey on element group can be used to specify an accelerator key that moves focus to the group. As an example, Figure 4.1 specifies a value of a for attribute accesskey . In this case, pressing a with the appropriate platform-specific modifier key would move to the address group. This moves focus to the user interface control within that group that appears first in navigation order. Attribute navindex on element group can be used to refine this process further if needed.

4.1.3 Groups and Binding Expressions

Attribute pair ( model , ref ) can be used on element group , as in Figure 4.1. The binding expression on element group sets up the context for resolving relevant XPath expressions within element group . The binding expression factors out those parts of the XPath binding expression that are common to all user interface controls in the group and therefore serves to ease authoring.

In addition, using element group to set up the XPath context for user interface controls within a group and using relative binding expressions on the various controls make the resulting XForms document easier to maintain. For example, consider the example shown in Figure 4.1 where element address is assumed to occur at the root of the instance tree. To change this example to be more realistic where the mailing address appears lower down within the instance tree, for example, /invoice/address , we need only edit the binding expression on element group . Contrast this with using absolute XPath expressions on the user interface controls making up the address user interface.

Using binding expressions on element group has one final subtle advantage. One of the main reasons for HTML's early success was the ability of users to cut and paste portions of the HTML source they saw on the Web to create their own Web pages. The XForms working group considered this a key enabler for rapid adoption of a new markup language. Using binding expressions on element group as described here enables such cut and paste authoring.