13.11.1.1 The ajaxgreeting.xhtml Facelets Page

The Facelets page for ajaxguessnumber, ajaxgreeting.xhtml, is almost the same as the greeting.xhtml page for the guessnumber application:

<h:head>
    <h:outputStylesheet library="css" name="default.css"/>
    <title>Ajax Guess Number Facelets Application</title>
</h:head>
<h:body>
    <h:form id="AjaxGuess">
        <h:graphicImage value="#{resource['images:wave.med.gif']}"
                        alt="Duke waving his hand"/>
        <h2>
            Hi, my name is Duke. I am thinking of a number from
            #{dukesNumberBean.minimum} to #{dukesNumberBean.maximum}.
            Can you guess it?
        </h2>
        <p>
            <h:inputText id="userNo" 
                         title="Enter a number from 0 to 10:"
                         value="#{userNumberBean.userNumber}">
                <f:validateLongRange minimum="#{dukesNumberBean.minimum}"
                                     maximum="#{dukesNumberBean.maximum}"/>
            </h:inputText>

            <h:commandButton id="submit" value="Submit">
                <f:ajax execute="userNo" render="outputGroup" />
            </h:commandButton>
        </p>
        <p>
            <h:panelGroup layout="block" id="outputGroup">
                <h:outputText id="result" style="color:blue"
                              value="#{userNumberBean.response}"
                              rendered="#{!facesContext.validationFailed}"/>
                <h:message id="errors1" 
                           showSummary="true" 
                           showDetail="false"
                           style="color: #d20005;
                           font-family: 'New Century Schoolbook', serif;
                           font-style: oblique;
                           text-decoration: overline" 
                           for="userNo"/>
            </h:panelGroup>
        </p>
    </h:form>
</h:body>

The most important change is in the h:commandButton tag. The action attribute is removed from the tag, and an f:ajax tag is added.

The f:ajax tag specifies that when the button is clicked the h:inputText component with the id value userNo is executed. The components within the outputGroup panel group are then rendered. If a validation error occurs, the managed bean is not executed, and the validation error message is displayed in the message pane. Otherwise, the result of the guess is rendered in the result component.

13.11.1.2 The UserNumberBean Backing Bean

A small change is also made in the UserNumberBean code so that the output component does not display any message for the default (null) value of the property response. Here is the modified bean code:

public String getResponse() {
    if ((userNumber != null)
            && (userNumber.compareTo(dukesNumberBean.getRandomInt()) == 0)) {
        return "Yay! You got it!";
    }
    if (userNumber == null) {
        return null;
    } else {
        return "Sorry, " + userNumber + " is incorrect.";
    }
}

13.11.1.3 The DukesNumberBean CDI Managed Bean

The DukesNumberBean session-scoped CDI managed bean stores the range of guessable numbers and the randomly chosen number from that range. It is injected into UserNumberBean with the CDI @Inject annotation so that the value of the random number can be compared to the number the user submitted:

@Inject
DukesNumberBean dukesNumberBean;

You will learn more about CDI in Chapter 23, "Introduction to Contexts and Dependency Injection for Java EE".

13.11.2.1 To Build, Package, and Deploy the ajaxguessnumber Example Using NetBeans IDE

1. Make sure that GlassFish Server has been started (see Starting and Stopping GlassFish Server).

2. From the File menu, choose Open Project.

3. In the Open Project dialog box, navigate to:

   tut-install/examples/web/jsf
   

4. Select the ajaxguessnumber folder.

5. Click Open Project.

6. In the Projects tab, right-click the ajaxguessnumber project and select Build.

   This command builds and deploys the project.

13.11.2.2 To Build, Package, and Deploy the ajaxguessnumber Example Using Maven

1. Make sure that GlassFish Server has been started (see Starting and Stopping GlassFish Server).

2. In a terminal window, go to:

   tut-install/examples/web/jsf/ajaxguessnumber/
   

3. Enter the following command:

   mvn install
   

   This command builds and packages the application into a WAR file, ajaxguessnumber.war, located in the target directory. It then deploys the application.

13.11.2.3 To Run the ajaxguessnumber Example

1. In a web browser, enter the following URL:

   http://localhost:8080/ajaxguessnumber
   

2. Enter a value in the field and click Submit.

   If the value is in the range of 0 to 10, a message states whether the guess is correct or incorrect. If the value is outside that range or if the value is not a number, an error message appears in red.