Using Ajax with JSF components

Adding Ajax to a JSF page is a four-step process:

1. Identify the area of the page that will be updated by the Ajax request. In Rational Application Developer V7, you can use Ajax with the content of almost any panel component. The panels range from simple containers, such as and , to feature-rich panels, such as menus () and dialogs ().
2. Select the type of Ajax request to use. There are three different kinds of Ajax requests supported in the Rational Application Developer V7 JSF library:
   
   
   
   
   • GET request for the same page ()
   • POST request for the same page ()
   • GET request for another page ()
3. Configure parameters to pass to the server with the Ajax request.
   
   
   
   
   • For GET requests, you can pass values of various input fields on the page.
   • For POST request, the entire form is submitted.
4. Identify the event that initiates the Ajax request. This can be any client-side JavaScript event, such as onclick for a button, onblur for an input field, or onchange for a check box.

Let's walk through all of these steps, using a simple example of a "Hello, world" type of application. You'll build a page with two fields: input and output. After the user tabs out of the input field, you'll use Ajax to send the value that the user entered to the server and to update the output field with a greeting.
Set up your Web project
To begin, create a Web project (see Figure 1):

• Select File > New > Project > Dynamic Web Project from the menu.
• In the New Project wizard:
1. Enter a project name (for example, HelloWorld).
2. Select the Faces Project configuration.
3. Select Add project to an EAR.
• Click Finish.

Figure 1. New Dynamic Web Project screen


To create a Web page (see Figure 2):

• Right-click the project name in the Project Explorer.
• Select New > Web Page from the context menu.
• In the New Web Page wizard, enter a page name (for example, hello).
• Click Finish.

Figure 2. New Web Page wizard


Add components to the page
Now that you have a page to work with, you'll add the components. You'll use an inputText component for the text field where the user will type a name and an outputText component to show the greeting. Because you're going to update the outputText with Ajax, you need to put it inside of a panel component. You'll use a panelGroup component for this page.
To add the components:

• Drag an Input component from the Enhanced Faces Components drawer of the palette onto the page.
• Drag a Panel Group box component from the palette onto the page below the Input component. When you are prompted for the group box type, select Group.
• Drag an Output component from the palette onto the Panel Group box.

Add Ajax support to the panel
To make content of the panel updatable via Ajax (in this case, an Output field), you need to mark the panel as "Ajaxable" and configure the parameters that you want the user's request to pass to the server. (See Figure 3.)

1. Select the outputText component and switch to the Properties view.
2. In the Properties view, select the h:panelGroup tag, which is directly above the h:outputText tag in the left-side tag navigator.
3. Select the Ajax page for the h:panelGroup tag.
4. Click the Allow Ajax updates check box.
5. Select Refresh as the Ajax request type.

Figure 3. panelGroup Properties


This example uses a Refresh request to show how parameters can be passed with an Ajax request. Alternatively, a Submit request would submit the entire form. In that case, because the form on the sample page contains just one input field, you would not need to configure parameters for the Ajax request at all.
To configure parameters for the Ajax request (Figure 4):

• Select Click to edit Ajax request properties on the Ajax properties page (see Figure 3, shown previously).
• On the Properties page for the hx:ajaxRefreshRequest tag:
  
  
  
  
  1. Click Add Parameter for the parameters to send from the browser.
  2. Select the name of the Input component (in this case, text1) from the combo box.

Figure 4. ajaxRefreshRequest Properties


You have configured the panelGroup tag to be updated by an Ajax request and to use the value of the Input field as a parameter for the request. The only thing left to do is to make the outputText component use this parameter to display a greeting (see Figure 5):

• Select the outputText component.
• Enter Hello, #{param.text1} into the Value field.

Figure 5. outputText Properties


Initiate the Ajax request
If you look back to the four steps required to use Ajax, you will see that you have already completed the first three steps. Now you just need to identify the event that will trigger the Ajax request. To update the greeting as soon as the user tabs out of the input field, you'll use the onblur event on the inputText component (see Figure 6):

• Select the inputText component.
• Switch to Quick Edit view.
• In the Quick Edit view:
  
  
  
  
  1. Select the onblur event in the list of events on the left side.
  2. Click the Use predefined behavior check box.
  3. Select the Invoke Ajax behavior on the specified tag action.
  4. Select the name of the panelGroup (in this case, group1) as the target.

Figure 6. Quick Edit view


Now you can save the page and run it on a server. When the browser window opens, you will see an input field and the "Hello" text beneath it. As soon as the user types anything in the field and then tabs out, the greeting will be updated with the text that the user typed in the input field. (See Figure 7.)

Figure 7. Run the Web page on the server


As you can see, you were able to build a simple yet functional Ajax page with standard JSF components and absolutely no JavaScript code.