sun.com docs.sun.com My Sun Worldwide Sites

  Previous Contents Next

The simpleDynamicFaces Example

Project Dynamic Faces gives you a lot of flexibility with respect to how you Ajax-enable your applications. You can refer to the Project Dynamic Faces Reference for a complete but concise reference to the various options Project Dynamic Faces gives you. This tutorial covers the following, more common ways to use Project Dynamic Faces:

  • Using the ajaxZone tag to identify groups of components that should be asynchronously updated.

  • Attaching the fireAjaxTransaction JavaScript function directly onto individual components so that they will be asynchronously updated as a result of a user-initiated event.

  • Using the installDeferredTransaction JavaScript function to attach fireAjaxTransaction functions onto particular elements in the DOM tree that you want to be asynchronously updated.

This tutorial demonstrates these features with a simple example that uses Dynamic Faces to allow users to do the following:

  • Select a fruit from a radio button group and instantly see both of the following without experiencing a full-page refresh:

    • The varieties for that fruit appear in a menu.

    • A description of the currently selected variety appears.

  • Select one of the varieties from the menu to see its description, also without experiencing a page refresh.

The following figure shows a screenshot of the example:

Figure 4-3 The simpleDynamicFaces Application

If you were using plain JavaServer Faces technology without Dynamic Faces, you would need to add a button to update the varieties menu and the variety description, and you would have to go through a full-page refresh to do the update. With Dynamic Faces, you can get rid of the button and rely on the underlying infrastructure of Dynamic Faces to do the work of updating the appropriate components using Ajax.

Configuring Your Environment

Before running the simpleDynamicFaces example, you must do the following, as described in the Preface:

  1. Install the Sun Web Developer Pack
  2. Configure the Sun Web Developer Pack with Application Server 9.1
  3. Optionally install NetBeans IDE 5.5.1 and the Sun Web Developer Pack modules

Building and Running the simpleDynamicFaces Application in NetBeans IDE 5.5.1

  1. Select File→Open Project in NetBeans IDE 5.5.1.
  2. Navigate to swdp.tutorial.home/examples/dynamicfaces, select simpleDynamicFaces, and click Open Project Folder.
  3. Right-click the simpleDynamicFaces application in the Projects pane and select Run Project.

    This will compile the classes, package the files into a WAR file, deploy the WAR to your Application Server 9.1 instance, and open a web browser to the following URL:

    http://server:server-port/simpleDynamicFaces/

    This page has a list of links that take you to pages that demonstrate different Dynamic Faces features.

Building and Running the simpleDynamicFaces Application with Ant

  1. Open a terminal prompt and navigate to swdp.tutorial.home/examples/dynamicFaces/simpleDynamicFaces.
  2. Type ant and press Enter.

    This will build and package the simpleDynamicFaces.war web application.

  3. Type ant deploy and press Enter.

    This will deploy simpleDynamicFaces.war to Application Server 9.1.

  4. In a web browser navigate to:
    http://server:server-port/simpleDynamicFaces/

    This page has a list of links that take you to pages that demonstrate different Dynamic Faces Features.

  5. To undeploy the application, navigate to swdp.tutorial.home/examples/dynamicFaces/simpleDynamicFaces and run ant undeploy.
  6. To delete the built application, navigate to swdp.tutorial.home/examples/dynamicFaces/simpleDynamicFaces and run ant clean.
Previous Contents Next
Company Info Contact Terms of Use Privacy Copyright 1994-2007 Sun Microsystems, Inc.