Using Ajax with JavaServer Faces Technology - The Java EE 6 Tutorial: Advanced Topics - page 81

The ajaxguessnumber Example Application

To demonstrate the advantages of using Ajax, revisit the guessnumber example from
Chapter 5 , “Introduction to Facelets,” in The Java EE 6 Tutorial: Basic Concepts . If
you modify this example to use Ajax, the response need not be displayed in the re-
sponse.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 com-
ponent 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:

Click here to view code image

<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}"/>