RetroSearch Browse

To demonstrate the advantages of using Ajax, revisit the guessnumber example from Chapter 5, Introduction to Facelets. If you modify this example to use Ajax, the response need not be displayed in the response.xhtml page. Instead, an asynchronous call is made to the bean on the server side, and the response is displayed in the originating page by executing just the input component rather than by form submission.

The source code for this application is in the tut-install/examples/web/ajaxguessnumber/ directory.

The ajaxguessnumber Source Files

The changes to the guessnumber application occur in two source files, as well as with the addition of a JavaScript file.

The ajaxgreeting.xhtml Facelets Page

The Facelets page for ajaxguessnumber, web/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:outputScript name="ui.js" target="head"/>
        <h:graphicImage library="images" name="wave.med.gif"
                        alt="Duke waving his hand"/>
        <h2>
            Hi, my name is Duke. I am thinking of a number from
            #{userNumberBean.minimum} to #{userNumberBean.maximum}.
            Can you guess it?
        </h2>
        <p>
            <h:inputText 
                id="userNo" 
                title="Type a number from 0 to 10:"
                value="#{userNumberBean.userNumber}">
                <f:validateLongRange
                    minimum="#{userNumberBean.minimum}"
                    maximum="#{userNumberBean.maximum}"/>
            </h:inputText>

            <h:commandButton id="submit" value="Submit" >
                <!--<f:ajax execute="userNo" render="result errors1" />-->
                    <f:ajax execute="userNo" render="result errors1" 
                            onevent="msg"/>
                </h:commandButton>
        </p>
        <p><h:outputText id="result" style="color:blue"
                         value="#{userNumberBean.response}"/>
        </p>

        <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:form>
</h:body>

The most important change is in the h:commandButton tag. The action attribute is removed from the tag, and 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 with the id values result and errors1 are then rendered. If that was all you did (as in the commented-out version of the tag), you would see the output from both the result and errors1 components, although only one output is valid; if a validation error occurs, the managed bean is not executed, so the result output is stale.

To solve this problem, the tag also calls the JavaScript function named msg, in the file ui.js, as described in the next section. The h:outputScript tag at the top of the form calls in this script.

The ui.js JavaScript File

The ui.js file specified in the h:outputScript tag of the ajaxgreeting.xhtml file is located in the web/resources directory of the application. The file contains just one function, msg:

var msg = function msg(data) {
    var resultArea = document.getElementById("AjaxGuess:result");
    var errorArea = document.getElementById("AjaxGuess:errors1"); 
    if (errorArea.innerHTML !== null && errorArea.innerHTML !== "") {
        resultArea.innerHTML="";
    }
};

The msg function obtains a handle to both the result and errors1 elements. If the errors1 element has any content, the function erases the content of the result element, so the stale output does not appear in the page.

The UserNumberBean Managed 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(randomInt) == 0)) {
        return "Yay! You got it!";
    }
    if (userNumber == null) {
        return null;
    } else {
        return "Sorry, " + userNumber + " is incorrect.";
    }
}

Running the ajaxguessnumber Example

You can use either NetBeans IDE or Ant to build, package, deploy, and run the ajaxguessnumber example.

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

This procedure builds the application into the tut-install/examples/web/ajaxguessnumber/build/web/ directory. The contents of this directory are deployed to the GlassFish Server.

From the File menu, choose Open Project.
In the Open Project dialog, navigate to:
```
tut-install/examples/web/
```
Select the ajaxguessnumber folder.
Select the Open as Main Project check box.
Click Open Project.
In the Projects tab, right-click the ajaxguessnumber project and select Deploy.

To Build, Package, and Deploy the ajaxguessnumber Example Using Ant

In a terminal window, go to:

tut-install/examples/web/ajaxguessnumber/

Type the following command:
```
ant
```
This command calls the default target, which builds and packages the application into a WAR file, ajaxguessnumber.war, located in the dist directory.
Type the following command:
```
ant deploy
```
Typing this command deploys ajaxguessnumber.war to the GlassFish Server.

To Run the ajaxguessnumber Example

In a web browser, type the following URL:
```
http://localhost:8080/ajaxguessnumber
```
Type a value in the input field and click Submit.
If the value is in the range 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.

To see what would happen if the JavaScript function were not included, remove the comment marks from the first f:ajax tag in ajaxgreeting.xhtml and place them around the second tag, as follows:
```
<f:ajax execute="userNo" render="result errors1" />

```
If you then redeploy the application, you can see that stale output from valid guesses continues to appear if you subsequently type erroneous input.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4