ONJava.com -- The Independent Source for Enterprise Java
oreilly.comSafari Books Online.Conferences.

advertisement

AddThis Social Bookmark Button

Using JSF
Pages: 1, 2, 3, 4

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.

Pages: 1, 2, 3, 4

Next Pagearrow