Document Information

Preface

Part I Introduction

1.  Overview

2.  Using the Tutorial Examples

Part II The Web Tier

3.  Getting Started with Web Applications

4.  JavaServer Faces Technology

5.  Introduction to Facelets

6.  Expression Language

7.  Using JavaServer Faces Technology in Web Pages

8.  Using Converters, Listeners, and Validators

9.  Developing with JavaServer Faces Technology

10.  JavaServer Faces Technology: Advanced Concepts

11.  Using Ajax with JavaServer Faces Technology

Overview of Ajax

Using Ajax Functionality with JavaServer Faces Technology

Using Ajax with Facelets

Using the f:ajax Tag

Sending an Ajax Request

Using the event Attribute

Using the execute Attribute

Using the immediate Attribute

Using the listener Attribute

Monitoring Events on the Client

Handling Errors

Receiving an Ajax Response

Ajax Request Lifecycle

Grouping of Components

Loading JavaScript as a Resource

Using JavaScript API in a Facelets Application

Using the @ResourceDependency Annotation in a Bean Class

Further Information about Ajax in JavaServer Faces Technology

12.  Composite Components: Advanced Topics and Example

13.  Creating Custom UI Components and Other Custom Objects

14.  Configuring JavaServer Faces Applications

15.  Java Servlet Technology

16.  Uploading Files with Java Servlet Technology

17.  Internationalizing and Localizing Web Applications

Part III Web Services

18.  Introduction to Web Services

19.  Building Web Services with JAX-WS

20.  Building RESTful Web Services with JAX-RS

21.  JAX-RS: Advanced Topics and Example

Part IV Enterprise Beans

22.  Enterprise Beans

23.  Getting Started with Enterprise Beans

24.  Running the Enterprise Bean Examples

25.  A Message-Driven Bean Example

26.  Using the Embedded Enterprise Bean Container

27.  Using Asynchronous Method Invocation in Session Beans

Part V Contexts and Dependency Injection for the Java EE Platform

28.  Introduction to Contexts and Dependency Injection for the Java EE Platform

29.  Running the Basic Contexts and Dependency Injection Examples

30.  Contexts and Dependency Injection for the Java EE Platform: Advanced Topics

31.  Running the Advanced Contexts and Dependency Injection Examples

Part VI Persistence

32.  Introduction to the Java Persistence API

33.  Running the Persistence Examples

34.  The Java Persistence Query Language

35.  Using the Criteria API to Create Queries

36.  Creating and Using String-Based Criteria Queries

37.  Controlling Concurrent Access to Entity Data with Locking

38.  Using a Second-Level Cache with Java Persistence API Applications

Part VII Security

39.  Introduction to Security in the Java EE Platform

40.  Getting Started Securing Web Applications

41.  Getting Started Securing Enterprise Applications

42.  Java EE Security: Advanced Topics

Part VIII Java EE Supporting Technologies

43.  Introduction to Java EE Supporting Technologies

44.  Transactions

45.  Resources and Resource Adapters

46.  The Resource Adapter Example

47.  Java Message Service Concepts

48.  Java Message Service Examples

49.  Bean Validation: Advanced Topics

50.  Using Java EE Interceptors

Part IX Case Studies

51.  Duke's Bookstore Case Study Example

52.  Duke's Tutoring Case Study Example

53.  Duke's Forest Case Study Example

Index

 

The ajaxguessnumber Example Application

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.

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

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

  1. In a terminal window, go to:
    tut-install/examples/web/ajaxguessnumber/
  2. 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.

  3. Type the following command:
    ant deploy

    Typing this command deploys ajaxguessnumber.war to the GlassFish Server.

To Run the ajaxguessnumber Example

  1. In a web browser, type the following URL:
    http://localhost:8080/ajaxguessnumber
  2. 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" />
    <!--<f:ajax execute="userNo" render="result errors1" onevent="msg"/>-->

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