4.3.1 Radio Buttons

This section describes the radio buttons used in the W-4 application described in a previous section (see Section 4.2.2, A JSP-Defined Entry (W-4 Form)). This is the code from the JSP for the W-4 form that implements the Single, Married, and “Married but...” radio buttons:

<td colspan="4">
<font size="-1"><b>3</b>&nbsp;<input type="radio"  name="status" value="Single" 

<c:if test="${ssDefinitionEntry.customAttributes['status'].value == 'Single' || ssDefinitionEntry.customAttributes['status'].value != 'Married' && ssDefinitionEntry.customAttributes['status'].value != 'MarriedBut'}">checked="checked"</c:if> />Single

<input type="radio"  name="status" value="Married" <c:if test="${ssDefinitionEntry.customAttributes['status'].value == 'Married'}">checked="checked"</c:if> />Married

<input type="radio"  name="status" value="MarriedBut" <c:if test="${ssDefinitionEntry.customAttributes['status'].value == 'MarriedBut'}">checked="checked"</c:if> />Married, but withhold at higher
Single rate.
</font></td>

The JSP tagging code selects the Single radio button by default.

This is the code from the JSP for the view that displays all radio buttons, including the selected button, but displays them as being disabled (so users do not attempt to change the value of the element on the view):

<td colspan="4">3 <input type="radio"  name="status" value="Single" 

<c:if test="${ssDefinitionEntry.customAttributes['status'].value == 'Single' || ssDefinitionEntry.customAttributes['status'].value != 'Married' && ssDefinitionEntry.customAttributes['status'].value != 'MarriedBut'}">checked="checked"</c:if> DISABLED />Single

<input type="radio" name="status" value="Married" <c:if test="${ssDefinitionEntry.customAttributes['status'].value == 'Married'}">checked="checked"</c:if> DISABLED />Married

<input type="radio" name="status" value="MarriedBut" <c:if test="${ssDefinitionEntry.customAttributes['status'].value == 'MarriedBut'}">checked="checked"</c:if> DISABLED />Married, but withhold at higher
Single rate.
</td>

4.3.2 Check Boxes

This section describes the check boxes used in the W-4 application described in a previous section (see Section 4.2.2, A JSP-Defined Entry (W-4 Form)). This is the code from the JSP for the W-4 form that implements the differing-names check box:

<td colspan="4">
<font size="-1"><b>&nbsp;&nbsp;check
here. You must call 1-800-772-1213 for a new card&nbsp;</b>
</font>

<input type="checkbox" name="boxFour" 
<c:if test="${ssDefinitionEntry.customAttributes['boxFour'].value == 'true'}">checked="checked"</c:if>/>
</td>

Here is the code in the JSP for the view that displays the disabled check box (so users do not attempt to change the value of the element on the view):

<td colspan="4">
<font size="-1"><b>&nbsp;&nbsp;check here. You must call
1-800-772-1213 for a new card&nbsp;</b></font>

<input type="checkbox" name="boxFour" 
<c:if test="${ssDefinitionEntry.customAttributes['boxFour'].value == 'true'}">checked="checked"</c:if> DISABLED />
</td>

4.3.3 Select Boxes

All other data types involve the storage of a single value. For both single-value and multiple-value select boxes,Novell Vibe stores the selected value or values in a value set. You can access the attribute’s value set using this notation:

ssDefinitionEntry.customAttributes[attributeName].valueSet

You can use the foreach tag to loop through the value set, using that information to present either form or view elements.

The W-4 application did not include an example of a select box, so this section presents code that implements a multiple-value select box that allows user to choose between the written numbers one through four:

Figure 4-38 Example of a Select Box on a Form

The previous graphic shows how the list looks by default, with no selections. Your code also needs to display currently selected items upon entry modification.

This code labels the form element and initializes flag variables:

<b>Test select box:</b><br/>

<c:set var="matchOne" value="0"/>
<c:set var="matchTwo" value="0"/>
<c:set var="matchThree" value="0"/>
<c:set var="matchFour" value="0"/>

Next, loop through the value set, and increment the flag that corresponds to a selected item:

<c:forEach var="selection" 
items="${ssDefinitionEntry.customAttributes['testSelection'].valueSet}" >
<c:if test="${selection == 'one'}"><c:set var="matchOne" value="1"/></c:if>
<c:if test="${selection == 'two'}"><c:set var="matchTwo" value="1"/></c:if>
<c:if test="${selection == 'three'}"><c:set var="matchThree" value="1"/></c:if>
<c:if test="${selection == 'four'}"><c:set var="matchFour" value="1"/></c:if>
</c:forEach>

Then, in the option HTML tags for the select list, use an if JSP tag to indicate that an option is selected:

<select name="testSelection" id="testSelection" multiple="multiple">
<option value="one" name="one" id="one" 
<c:if test="${matchOne == 1}">selected="selected" </c:if>>One</option>
<option value="two" name="two" id="two" 
<c:if test="${matchTwo == 1}">selected="selected" </c:if>>Two</option>
<option value="three" name="three" id="three" 
<c:if test="${matchThree == 1}">selected="selected" </c:if>>Three</option>
<option value="four" name="four" id="four" 
<c:if test="${matchFour == 1}">selected="selected" </c:if>>Four</option>
</select>          

In the view, you can display the selections in many ways. Here is one example:

Figure 4-39 Example of Displaying Selections on the View Page

This code displays the bolded header, and loops through the value set, counting the selections:

<b>Test selection:</b>

<c:set var="numSelections" value="0"/>
<c:forEach var="selection" 
items="${ssDefinitionEntry.customAttributes['testSelection'].valueSet}" >
<c:set var="numSelections" value="${numSelections + 1}"/>
</c:forEach>

Then, this code displays the written words that match the selections, separating them with commas, and does not display a comma after the last selection.

<c:set var="count" value="0"/>
<c:forEach var="selection" 
items="${ssDefinitionEntry.customAttributes['testSelection'].valueSet}" >
<c:set var="count" value="${count + 1}"/>
<c:if test="${selection == 'one'}">One</c:if>
<c:if test="${selection == 'two'}">Two</c:if>
<c:if test="${selection == 'three'}">Three</c:if>
<c:if test="${selection == 'four'}">Four</c:if>
<c:if test="${count != numSelections}">, </c:if>
</c:forEach>