AJAX in JSF 2.0

Description

In this post, we will see ho to develop your  first JSF 2 AJAX example.  You will see some recipes that demonstrate the JSF support for AJAX. We start
with some core JSF tags that provide AJAX support and we will continue with frameworks that offer many other AJAX components.

Your first JSF 2.0

In this recipe, you will see how simple it is to use AJAX in JSF 2.0. For this we have built a “HelloWorld” example based on a simple button that when pressed renders a random number on the screen using the AJAX mechanism.

The following screenshot is a capture of this:

Random

How to do it

We start with a simple bean, meant to generate a random number using the  java.util.Random class and we will reuse the project  generated in the precedent post, Getting Started with RichFaces 4using the specialized Maven archetypes.

This bean looks like the following code snippet:

import java.util.Random;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "random")
@SessionScoped
public class RandomNumber {
private Integer random = 0;
Random generator = new Random( 19580427 );
public Integer getRandom() {

random = generator.nextInt();
return random;
}
}

We go further and develop the JSF page that will call the previous bean modifying the index.xhtml page:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Simple JSF2.0-AJAX example</title>
</h:head>
<h:body>
<h:form id="formID" prependId="false">
<strong><h:outputScript</strong> name="jsf.js"
library="javax.faces" target="head"/>
<h:outputText id="randomID" value="#{random.random}"/>
<h:commandButton id="buttonID" value="Random"
onclick="jsf.ajax.request(this, event, {execute:
this.id, render: 'randomID'}); return false;"/>
</h:form>
</h:body>
</html>

That’s it !

You can deploy on your Netbeans IDE the project to see the final result:

SimpleRichFacesLab2

How it works ?

For understanding how it works, we should take a closer look at some code lines.

  1. First, we have the h:outputScript line, which includes the JSF AJAX library into our page (this is necessary for the call to ajaxRequest)
  2. After that, we have an outputText component, which displays the random number from the bean
  3. Third, we have a commandButton, which calls ajaxRequest and returns false when it is clicked.

An ajaxRequest has three arguments, as follows:

  • The calling object, which is this
  • The calling event, which is event
  • The third argument is a little tricky. It contains the execute and render properties.
    The first property takes a list of the IDs of all the JSF components that we would like  to execute, while the second property contains the IDs of all the JSF components that we want to re-render (refresh).

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: