Feature

Jakarta Struts provides a standard framework for Web applications, and JavaServer Faces offers a component-based framework for user interfaces.

At the user interface, a common task in both frameworks is selecting items from lists. Over the years, standard design patterns have been developed for selection lists. For developers, the advantage of implementing these standard patterns is that they are readily available and offer a familiar user experience.

This article describes the following patterns:

• One selection from few
• One selection from many
• Multiple selections from few
• Extended selections from many
• Multiple selections from many

These are small idioms for simple UI controls, but it's not always obvious how to implement them to maximize usability. This article describes best practices recommended by usability experts for these patterns and compares their implementations in Struts and JavaServer Faces.

Background
Both Struts and JSF architectures are based on the Model-View-Controller design pattern. This article focuses on the View, implemented using JavaServer Pages. JSPs are typical in Struts architectures3. They're not required by JavaServer Faces, but are used here for ease of comparison.

In both frameworks, JSPs are backed by JavaBeans, for which the interfaces are nearly identical in Struts and JSF. In the Struts bean, List properties are stored as LabelValueBeans; in the JSF bean they are SelectItems. Both JavaBeans are initialized in their constructors, again for ease of comparison.

JavaBean interfaces and JSP comparisons are shown in this article. JavaBean variables and constructors are shown in Listings 1 and 2. Complete JSPs are in Listings 3 and 4. The patterns that follow show controls that might be used in a Web search application.

Pattern 1: One Selection from Few
Use when:

• One selection is needed.
• There is room to display all available items.

The best design pattern for one selection from few items is a list of radio buttons, also known as option buttons. This pattern shows all available items and the selection requires only one mouse-click.

As pointed out in GUI Design Essentials⁴, vertical alignment makes the text easier to scan. This also makes the radio buttons easier to click, as it places them all in the same area. It's not always possible to align buttons vertically, but if you can, it's a service to your users.

Radio buttons are mutually exclusive, so one button should be selected by default^{5, 6}. This costs your users nothing and may save them a step (Figure 1).

The Windows Interface Guidelines for Software Design recommends this pattern for lists with seven items or fewer⁷. If you have more, or screen real estate is limited, consider Pattern 2.

In the JavaBean, the "forList" property stores the list of available values. The "forValue" property stores the selected value as a string.

public List getForList() ...
public void setForList( List list ) ...
public String getForValue() ...
public void setForValue( String id ) ...

In the Struts JSP, the <logic:iterate> tag loops over the buttons specified by <html:radio> and <bean:write> tags. The "Search For:" label is provided by the <fmt:message> tag from the JSP Standard Tag Library8. Struts tags and JSTL tags are often used in combination.

<tr valign="top">
   <td align="right">
     <fmt:message key="searchFor"/>
   </td>
   <td>
     <logic:iterate name="exampleForm" property="forList" id="item">
     <html:radio property="forValue" idName="item" value="value">
 <bean:write name="item" property="label"/><br />
     </html:radio>
    </logic:iterate>
   </td>
</tr>

In the JavaServer Faces JSP, the <h:selectOneRadio> tag loops over the list specified by the <f:selectItems> tag. The "Search For:" label is provided by the <h:outputText> tag.

<h:panelGrid columns="2">
   <h:outputText value="#{bundle.searchFor}" />
   <h:selectOneRadio value="#{example.forValue}"
      layout="pageDirection" id="for">
      <f:selectItems value="#{example.forList}"/>
   </h:selectOneRadio>
</h:panelGrid>

In the JavaServer Faces JSP, code size is reduced by using more compact tags for both controls and layout. The layout tags <tr> and <td> are replaced by <h:panelGrid>. For brevity, layout and label tags are omitted in succeeding patterns.

Pattern 2: One Selection from Many
Use when:

• One selection is needed.
• There is not enough room to display all available items.

The standard pattern for one selection from many items is the listbox (Figure 2). A disadvantage of this pattern is that not all available items are visible. An advantage is that it requires only a small amount of space⁹.

This control can display several items or one. When several items are displayed, GUI Design Essentials recommends a minimum of three items and a maximum of eight.

When only one item is displayed, the control appears as a dropdown menu. The drop-down variant conserves more space but requires more user interaction⁷ (Figure 3).

In the JavaBean, the "updateList" property stores the list of available values. The "updateValue" property stores the selected value as a string.

public List getUpdateList() ...
public void setUpdateList( List list ) ...
public String getUpdateValue() ...
public void setUpdateValue( String id ) ...

In the Struts JSP, the <html:select> tag creates this control. The <html:optionsCollection> specifies the list. The "size" attribute of the <html:select> tag controls the number of items displayed. If "size" is omitted, it defaults to 1, which makes this control a dropdown menu.

<html:select property="updateValue" size="4">
     <html:optionsCollection property="updateList"/>
</html:select>

In JavaServer Faces, the JSP is similar to that of Pattern 1. The <h:selectOneListbox> tag loops over the list specified by the <f:selectItems> tag. The "size" attribute of the <h:selectOneListbox> tag works similarly to that of the Struts tag. If size=1, the <h:selectOneListbox> tag renders the same dropdown menu as the <h:selectOneMenu> tag, which is clearer.

<h:selectOneListbox value="#{example.updateValue}" size="4" id="update">
     <f:selectItems value="#{example.updateList}"/>
</h:selectOneListbox>

Pattern 3: Multiple Selections from Few
Use when:

• Multiple selections are needed.
• There is room to display all available items.

The standard pattern for multiple selections from few items is a list of check boxes. This pattern shows all the items and requires only one mouse-click per selection (Figure 4).

As in Pattern 1, vertical alignment makes the checkboxes easier to click and the text easier to scan⁴.