JSF allows us to easily implement Ajax (Asynchronous JavaScript and XML) functionality into our web applications by simply employing the <f:ajax> tag and CDI named beans, without needing to implement any JavaScript code or having to parse JSON strings to implement Ajax with JSF.
The following illustrates a typical usage of the <f:ajax> tag:
<?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"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>JSF Ajax Demo</title>
</h:head>
<h:body>
<h2>JSF Ajax Demo</h2>
<h:form>
<h:messages/>
<h:panelGrid columns="2">
<h:outputText value="Echo input:"/>
<h:inputText id="textInput" value="#{controller.text}">
<f:ajax render="textVal" event="keyup"/>
</h:inputText>
<h:outputText value="Echo output:"/>
<h:outputText id="textVal" value="#{controller.text}"/>
</h:panelGrid>
<hr/>
<h:panelGrid columns="2">
<h:panelGroup/>
<h:panelGroup/>
<h:outputText value="First Operand:"/>
<h:inputText id="first" value="#{controller.firstOperand}"
size="3"/>
<h:outputText value="Second Operand:"/>
<h:inputText id="second"
value="#{controller.secondOperand}"
size="3"/>
<h:outputText value="Total:"/>
<h:outputText id="sum" value="#{controller.total}"/>
<h:commandButton
actionListener="#{controller.calculateTotal}"
value="Calculate Sum">
<f:ajax execute="first second" render="sum"/>
</h:commandButton>
</h:panelGrid>
</h:form>
</h:body>
</html>
After deploying our application, the preceding page renders as illustrated in the following screenshot:
The preceding page illustrates two uses of the <f:ajax> tag. At the top of the page, we use this tag by implementing a typical Ajax Echo example, in which we have a <h:outputText> component updating itself with the value of an input text component. Whenever any character is entered into the input field, the value of the <h:outputText> component is automatically updated.
To implement the functionality described in the previous paragraph, we put an <f:ajax> tag inside an <h:inputText> tag. The value of the render attribute of the <f:ajax> tag must correspond to the ID of a component we want to update after the Ajax request finishes. In our particular example, we want to update the <h:outputText> component with an ID of textVal, therefore this is the value we use for the render attribute of our <f:ajax> tag.
The other <f:ajax> attribute we used in this instance is the event attribute. This attribute indicates the JavaScript event that triggers the Ajax event. In this particular case we need to trigger the event any time a key is released while a user is typing into the input field; therefore the appropriate event is to use is keyup.
The following table lists all supported JavaScript events:
|
Event |
Description |
|
blur |
The component loses focus. |
|
change |
The component loses focus and its value has been modified. |
|
click |
The component is clicked on. |
|
dblclick |
The component is double-clicked on. |
|
focus |
The component gains focus. |
|
keydown |
A key is pressed while the component has focus. |
|
keypress |
A key is pressed or held down while the component has focus. |
|
keyup |
A key is released while the component has focus. |
|
mousedown |
Mouse button is pressed while the component has focus. |
| mousemove |
Mouse pointer is moved over the component. |
|
mouseout |
Mouse pointer leaves the component. |
|
mouseover |
Mouse pointer is placed over the component. |
|
mouseup |
Mouse button is released while the component has focus. |
|
select |
The component's text is selected. |
|
valueChange |
Equivalent to change; the component loses focus and its value has been modified. |
We use <f:ajax> once again further down in the page, to Ajax-enable a command button component. In this instance, we want to recalculate a value based on the value of two input components. In order to have the values on the server updated with the latest user input, we used the execute attribute of <f:ajax>; this attribute takes a space-separated list of component IDs for use as input. We then use the render attribute just like before to specify which components need to be re-rendered after the Ajax request finishes.
Notice we are using the actionListener attribute of <h:commandButton>. This attribute is typically used whenever we don't need to navigate to another page after clicking the button. The value for this attribute is an action listener method we wrote in one of our named beans. Action listener methods must return void, and take an instance of javax.faces.event.ActionEvent as its sole parameter.
The named bean for our application looks like this:
package net.ensode.glassfishbook.jsfajax;
import javax.faces.event.ActionEvent;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
@Named
@ViewScoped
public class Controller {
private String text;
private int firstOperand;
private int secondOperand;
private int total;
public Controller() {
}
public void calculateTotal(ActionEvent actionEvent) {
total = firstOperand + secondOperand;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public int getFirstOperand() {
return firstOperand;
}
public void setFirstOperand(int firstOperand) {
this.firstOperand = firstOperand;
}
public int getSecondOperand() {
return secondOperand;
}
public void setSecondOperand(int secondOperand) {
this.secondOperand = secondOperand;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
}
Notice that we didn't have to do anything special in our named bean to enable Ajax in our application. It is all controlled by the <f:ajax> tag on the page.
As we can see from this example, Ajax-enabling JSF applications is very simple; we simply need to use a single tag to Ajax-enable our page, without having to write a single line of JavaScript, JSON, or XML.