Drop-Down List
The <h:selectone_menu> tag generates a drop-down list
containing a few colors.
It contains <h:selectitem> tags, as
in the case in the list box:
<f:use_faces>
<h:form formName="pform">
..........
<p><h:output_text value="Color:"/><br>
<h:selectone_menu id="color" valueRef="pbean.color">
<f:validate_required/>
<h:selectitem itemValue="black" itemLabel="Black"/>
<h:selectitem itemValue="red" itemLabel="Red"/>
<h:selectitem itemValue="blue" itemLabel="Blue"/>
<h:selectitem itemValue="green" itemLabel="Green"/>
</h:selectone_menu>
<br><h:output_errors for="color"/>
..........
</h:form>
</f:use_faces>The above JSP code generates the following HTML fragment:
<form method="post" action="/usingjsf/faces/edit.jsp">
..........
<p>Color:<br>
<select name="color" size="1">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green" selected>Green</option>
</select>
<br>
..........
</form>The drop-down list is bound to the color property, whose type is
String:
public class PBean implements java.io.Serializable {
..........
private String color;
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
..........
}When the HTML form is generated, JSF adds the selected HTML
attribute to the list item whose value is equal to the color
property of the JavaBean model. Assuming that there are no validation errors,
JSF updates the JavaBean property when it receives the user input containing a
new color.
Radio Buttons
The <h:selectone_radio> and <h:selectitem>
tags produce a group of radio buttons:
<f:use_faces>
<h:form formName="pform">
..........
<p><h:output_text value="Alignment:"/><br>
<h:selectone_radio id="align" valueRef="pbean.align"
layout="LINE_DIRECTION">
<f:validate_required/>
<h:selectitem itemValue="left" itemLabel="Left"/>
<h:selectitem itemValue="center" itemLabel="Center"/>
<h:selectitem itemValue="right" itemLabel="Right"/>
</h:selectone_radio>
<br><h:output_errors for="align"/>
..........
</h:form>
</f:use_faces>The above JSP code generates the following HTML fragment:
<form method="post" action="/usingjsf/faces/edit.jsp">
..........
<p>Alignment:<br>
<table border="0">
<tr>
<td><input type="radio" checked
name="align" value="left"> Left</td>
<td><input type="radio"
name="align" value="center"> Center</td>
<td><input type="radio"
name="align" value="right"> Right</td>
</tr>
</table>
<br>
..........
</form>The radio buttons are bound to the align property:
public class PBean implements java.io.Serializable {
..........
private String align;
public String getAlign() {
return align;
}
public void setAlign(String align) {
this.align = align;
}
..........
}When the HTML form is generated, JSF adds the checked HTML
attribute to the radio button whose value is equal to the align
property of the JavaBean model. Assuming that there are no validation errors,
JSF updates the JavaBean property when it receives the user input containing a
new alignment.
Checkboxes
The edit.jsp page contains three checkboxes that are generated
with <h:selectboolean_checkbox>. These UI components are
contained by an HTML table that is generated with the
<h:panel_grid> and <h:panel_group>:
<f:use_faces>
<h:form formName="pform">
..........
<p><h:output_text value="Style:"/><br>
<h:panel_grid columns="3" border="0" cellspacing="5">
<h:panel_group>
<h:selectboolean_checkbox id="bold"
valueRef="pbean.bold"/>
<h:output_text value="Bold"/>
</h:panel_group>
<h:panel_group>
<h:selectboolean_checkbox id="italic"
valueRef="pbean.italic"/>
<h:output_text value="Italic"/>
</h:panel_group>
<h:panel_group>
<h:selectboolean_checkbox id="underline"
valueRef="pbean.underline"/>
<h:output_text value="Underline"/>
</h:panel_group>
</h:panel_grid>
..........
</h:form>
</f:use_faces>The above JSP code generates the following HTML fragment:
<form method="post" action="/usingjsf/faces/edit.jsp">
..........
<p>Style:<br>
<table border="0" cellspacing="5">
<tr>
<td><input type="checkbox"
name="bold">Bold</td>
<td><input type="checkbox"
name="italic" checked>Italic</td>
<td><input type="checkbox"
name="underline">Underline</td>
</tr>
</table>
..........
</form>The three checkboxes are bound to the bold,
italic, and underline Boolean properties:
public class PBean implements java.io.Serializable {
..........
private boolean bold;
public boolean isBold() {
return bold;
}
public void setBold(boolean bold) {
this.bold = bold;
}
private boolean italic;
public boolean isItalic() {
return italic;
}
public void setItalic(boolean italic) {
this.italic = italic;
}
private boolean underline;
public boolean isUnderline() {
return underline;
}
public void setUnderline(boolean underline) {
this.underline = underline;
}
..........
}When the HTML form is generated, JSF adds the checked HTML
attribute to each checkbox whose associated JavaBean property is
true. Assuming that there are no validation errors, JSF updates
the JavaBean properties when it receives the user input.
In this example, the checkboxes are generated separately. JSF offers another
tag, called <h:selectmany_checkboxlist>, which can be used to
generate a group of checkboxes. JSF also has two other tags, named
<h:panel_list> and <h:panel_data>, which can be
used to generate tables from collections and arrays.
Command Buttons
The faces-config.xml file defines a navigation rule that tells
JSF what to do when the user clicks one of the command buttons of the page
whose path is specified within <from-tree-id>
(/edit.jsp). There are two navigation cases defined within
separate <navigation-case> elements:
..........
<faces-config>
<navigation-rule>
<from-tree-id>/edit.jsp</from-tree-id>
<navigation-case>
<from-outcome>editOutcome</from-outcome>
<to-tree-id>/edit.jsp</to-tree-id>
</navigation-case>
<navigation-case>
<from-outcome>viewOutcome</from-outcome>
<to-tree-id>/view.jsp</to-tree-id>
</navigation-case>
</navigation-rule>
..........
</faces-config>The /edit.jsp page contains two buttons generated with
<h:command_button>. Each of them has an ID, a label, a command
name (not used here, but required by JSF), and an action or
actionRef attribute:
<f:use_faces>
<h:form formName="pform">
..........
<p>
<h:command_button id="view" label="View"
commandName="viewCmd" action="viewOutcome"/>
<h:command_button id="boldUpperCase"
label="Bold Upper Case / View"
commandName="boldUpperCaseCmd"
actionRef="pbean.boldUpperCaseAction"/>
</h:form>
</f:use_faces>The above JSP code generates the following HTML fragment:
<form method="post" action="/usingjsf/faces/edit.jsp">
..........
<p>
<input type="submit" name="view" value="View">
<input type="submit" name="boldUpperCase"
value="Bold Upper Case / View">
</form>JSF validates the form data every time the browser submits the user input.
If there are no errors signaled by validators and no type-conversion errors,
JSF takes into account the navigation cases. For the first button, JSF gets the
viewOutcome value of the action attribute, which
matches the text of the <from-outcome> element of the second
navigation case. Therefore, JSF will forward the HTTP request to
/view.jsp, which is the path contained by the
<to-tree-id> element of the second navigation case.
When the user clicks the second button, JSF calls the
getBoldUpperCaseAction() method of the PBean object.
This method returns an instance of BoldUpperCaseAction, which is
an inner class of PBean. Then, JSF calls the invoke()
method that returns an outcome determined at runtime rather than hard-coded
within the HTML file:
public class PBean implements java.io.Serializable {
..........
public BoldUpperCaseAction getBoldUpperCaseAction() {
return new BoldUpperCaseAction();
}
public class BoldUpperCaseAction
extends javax.faces.application.Action {
public String invoke() {
String ucText = getText().toUpperCase();
if (isBold() && getText().equals(ucText))
return "viewOutcome";
else {
setBold(true);
setText(ucText);
return "editOutcome";
}
}
}
}If the bold property is true and all letters of
text are majuscules, JSF follows the second navigation case,
forwarding the HTTP request to /view.jsp as in the case of the
other button. Otherwise, invoke() sets the bold
property to true, converts all characters of the text
property to upper case, and returns editOutcome, telling JSF to
follow the first navigation case which keeps /edit.jsp as the
current page.
