JSF Ajax Notes

These are my notes.

What is AJAX?

When a JavaScript function sends an asynchronous request from the client to the server, the server sends back a response that is used to update the page's Document Object Model (DOM). This response is often in the format of XML.

The term AJAX refers to this interaction between the client and server.


JSF Life Cycle Recap

JSF 2.0 splits the JSF life cycle into two parts: execute and render.

Execute consists of: Restore View -> Apply Request Values -> Process Validations ->  Update Model Values -> Invoke Application

When JSF executes a component on the server, it:
  • Converts and validates the component 's value (if the component is an input).
  • Pushes valid input values to the model (if the component is wired to a bean property).
  • Executes actions and action listeners (if the component is an action).

Render consists of:
  • Render Response

JSF and AJAX
JSF integrates AJAX into its life cycle.

f:ajax attaches behavior to a component

JSF Ajax requests partially process components on the server, and partially render components on the client when the request returns.

On any given AJAX request, you specify a set of components that JSF executes, and another set of components that JSF renders.

For AJAX requests, JSF executes one or more components, and renders zero or more components.


JSF - AJAX Recipe
  • Associate a component and an event with an Ajax 
  • Identify components to execute on the server during the Ajax request.
  • Identify components to render after the Ajax request.

The key to using AJAX with JSF is to keep in mind what it means to execute a component on the server during an Ajax call.

Example:
<h:form>
 <h:inputText id="firstname" value="#{fooBar.firstname}">
  <f:ajax event="keyup" render="echo"/> <!-- execute="@this" is implicit here. -->
    </h:inputText>
</h:form>
<br />
<h:outputText id="echo" value="#{fooBar.firstname}"/>

<f:ajax>
Like most of the tags in the f: library, the <f:ajax> tag cannot be used in isolation; it has to be nested within, or wrapped around, a tag that corresponds to a server side UIComponent.

This code wraps the input field and the button and applies Ajax capabilities to each component:
<f:ajax>
 <h:inputText value="#{model.username}" />
 <h:commandButton action="next" />
</f:ajax>

This code does the same thing but using the nesting syntax:
<h:inputText value="#{model.username}">
 <f:ajax />
</h:inputText>
<h:commandButton action="next">
 <f:ajax />
</h:commandButton>

Rules to Determine Which UIComponent Tag Is Imbued with Ajax Behavior

• If the <f:ajax> tag has no UIComponent tag children and is nested immediately inside of a UIComponent tag, the parent UIComponent is imbued with Ajax behavior.

• If the <f:ajax> tag has UIComponent, children (and any children of those children, and so on) are imbued with Ajax behavior.

<f:ajax> Attributes
All of the attributes on the<f:ajax> tag are optional and have default values.

• The default event value for any component that is an EditableValueHolder is change. This corresponds to the onChange JavaScript event and means that the Ajax transaction will commence when the browser detects that the user has changed the value of the field.

• The default event value for any component that is an ActionSource is action. This event maps to the onClick JavaScript event.

• If execute is not specified, the client ID of the UIComponent to which the <f:ajax> tag applies is the default. This means that only one name = value pair will be submitted in the POST data and only one UIComponent will be processed during the postback.

• If render is not specified, no components will be traversed during the Render Response phase.

• If listener is not specified, the only action that will be invoked during the Invoke Application phase will be the one that corresponds to an ActionSource component listed in the execute attribute. [I am not sure this is entierly true. Please see this question.]

• If immediate is not specified, the action happens during the InvokeApplication phase; otherwise, the action happens during the Apply Request Values phase. This attribute is semantically equivalent to the attribute of the same name on other components in JSF.

• If event is not specified, the value returned from the getDefaultEventName() method on the UIComponent is used. If specified, the event name must be one of the values returned from the getEventNames() method on the UIComponent.



<f:ajax> Special Keywords 
Special Keywords for Use in the execute and render Attributes The execute and render keywords accept a set of special keywords, each with themeaning shown in this table.