JSF AJAX Test Page

To get used to the JSF AJAX facilities you should play around with it for some time. This Blog provides a basic implementation with different AJAX and non-AJAX callbacks to start with.

The execute attribute of an <f:ajax> element enumerates the ids of fields to take to the server when called, the render attribute enumerates ids of elements to update when the asynchronous response comes back from the server. Optionally the event attribute enumerates events (e.g. "click") that should trigger the AJAX call.

Application Screenshots

In the following you see screenshots of the user interface, and explanations about what has been clicked and typed on the UI, and how this was implemented in the application.

Mind that I changed to a new browser-tab several times during these screenshots, so the shown identities and times are not consistent.

User Interactions

The test page contains two forms and some command-buttons. It displays its own log messages on bottom. Following is the look when loading it into a browser:

The blue area on top is the observed and logged input form. Below are some informations about the HTTP session and the JSF view. On bottom are the log messages, generated by the Java controller when some callback is invoked. It logs the time, phase and message-text of any server-side event.

Initially just the controller constructor logged its creation in RENDER_RESPONSE phase. In field "HTTP Method" we see that a GET was used to read the JSF page.

After entering some text in "Name" field and clicking elsewhere into the page (to make the browser trigger the change-event) it looks like this:

We see that, in PROCESS_VALIDATIONS phase, a valueChange callback was called, and consequently in UPDATE_MODEL_VALUES the new value was set into the bean. Then, in INVOKE_APPLICATION phase, an AJAX callback was triggered.

These three things were caused by a valueChangeListener attribute on the text field, the data-binding in value attribute, and an AJAX listener in a nested <f:ajax> element. The render-id "fieldsToUpdateByAjax" is the information- and logging-area below the blue panel, which should be updated with server-information on any event.

Mind that we see the old field value (null) just in the valueChange callback, but no more in the AJAX callback. There is a workaround to queue a valueChange event to the INVOKE_APPLICATION phase, so that the business logic can access also the old value, by calling event.setPhaseId(PhaseId.INVOKE_APPLICATION); event.queue().

The same happened for the language selection-menu: a valueChange callback, then the bean setter, then an AJAX callback.

The "AJAX commandButton" has been programmed to take the "Name" text field to the server (see execute=...), but not the "Language" selection field, thus we see the name again being put into the bean, but not the language. Then an AJAX callback is invoked.

Two more buttons to study. The "Listener commandButton" actually is an actionListener. When clearing messages and pressing that button, following happens:

We see that this button submitted the full form ("Name" and "Language" fields), but it did not reset the form for new input. The listener method was finally executed in INVOKE_APPLICATION phase.

Now lets clear the messages and press the "Action commandButton", which is the normal JSF form submitter.

The "Action commandButton" button did the same as the "Listener commandButton", it took all fields in the form to the server, but after that it reloaded the page to get a new empty input form. We can see that the PersonController constructor has been called again.

We see that there is a switch that lets us choose whether the button reloads the page or just saves the properties to the bean. Now lets deactivate this by clicking onto the "POST-Redirect-GET" checkbox, and then press "Action commandButton" again.

We see that the fields were not cleared, and the PersonController constructor has not been called. Anyway the input data have been saved to the bean. So this seems to be the same as "Listener commandButton".

Full Source Code

There are no special configurations, no JPA involved, stick to web.xml, faces-config.xml, beans.xml, ApplicationFacesConfig.java as I showed them in my recent Blog about setup of a JSF project in Eclipse. I called the project jsfAjax, put this as artifactId into the Maven pom.xml.

Project Structure

Files

index.xhtml

Remarkable: in JSF, you can avoid the browser-specific default action when the user presses the ENTER key by adding following attribute to any input field (except textarea): onkeypress="if (event.keyCode === 13) return false". See <h:inputText> with id="textInputId". When you remove this and press ENTER while standing in the "Name" text field, the first found submit-button would get triggered by the browser; in this case it would be the "AJAX commandButton", which may not be what we want.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
>
    <h:head><title>JSF AJAX Example</title></h:head>
    
    <h:body>
        <h2>JSF AJAX Test Form</h2>
        
        <h:form style="background-color: lightBlue;">
            <h:panelGrid columns="2">
                <h:panelGrid columns="2">
                    <h:outputLabel>Name</h:outputLabel>
                    <h:inputText value="#{personController.name}" id="textInputId"
                            valueChangeListener="#{personController.textValueChangeCallback}"
                            onkeypress="if (event.keyCode === 13) return false;">
                            <!-- Avoid browser default which would trigger first submit-button on page -->
                        
                        <f:ajax render="fieldsToUpdateByAjax"
                                listener="#{personController.textAjaxCallback}"/>
                    </h:inputText>
                    
                    <h:outputLabel>Language</h:outputLabel>
                    <h:selectOneMenu value="#{personController.language}"  id="selectInputId"
                            valueChangeListener="#{personController.selectValueChangeCallback}">
                            
                        <f:selectItems value="#{personController.languages}"/>
                        
                        <f:ajax render="fieldsToUpdateByAjax"
                                listener="#{personController.selectAjaxCallback}"/>
                    </h:selectOneMenu>
                </h:panelGrid>
                
                <h:panelGrid columns="1">
                    <h:commandButton value="AJAX commandButton"> <!-- Doesn't take selectInputId to server! -->
                        <f:ajax execute="textInputId"
                                render="fieldsToUpdateByAjax" 
                                listener="#{personController.commandAjaxCallback}"/>
                    </h:commandButton>
                    
                    <h:commandButton value="Listener commandButton"
                            actionListener="#{personController.commandListenerCallback}"/>
                    
                    <h:commandButton value="Action commandButton"
                            action="#{personController.commandActionCallback}"/>
                            
                </h:panelGrid>
            </h:panelGrid>
        </h:form>
        
        <hr/>
        
        <h:form id="fieldsToUpdateByAjax">
        <!-- AJAX-fields in other form can not see fields inside here, but they can see this form -->
            <h:selectBooleanCheckbox value="#{personController.postRedirectGet}" id="postRedirectGetId">
                <f:ajax render="fieldsToUpdateByAjax"/>
            </h:selectBooleanCheckbox>
            <h:outputLabel for="postRedirectGetId">Make "Action commandButton" perform POST-Redirect-GET</h:outputLabel>
                 
            <h:panelGrid columns="2">
                <h:outputLabel value="viewId:"/>#{view.viewId}
                <h:outputLabel value="id, clientId:" />#{view.id}, #{view.clientId}
                <h:outputLabel value="Session Start:"/> #{logging.creationTime}
                <h:outputLabel value="View Creation:"/> #{personController.creationTime}
                <h:outputLabel value="Latest Request:"/> #{personController.requestTime}
                <h:outputLabel value="HTTP Method:"/>#{request.method}
                <h:outputLabel value="Bean-Identity:"/>#{personController.beanIdentity}
                <h:outputLabel value="ViewRoot-Identity:"/>#{personController.viewRootIdentity}
            </h:panelGrid>
            
            <hr/>

            <h:outputLabel><b>Log</b> (session-scoped)</h:outputLabel>
            
            <h:commandButton value="Clear">
                <f:ajax render="fieldsToUpdateByAjax" listener="#{personController.clearLog}"/>
            </h:commandButton>
    
            <h:selectBooleanCheckbox value="#{logging.newestOnTop}" id="newestOnTopId">
                <f:ajax render="fieldsToUpdateByAjax"/>
            </h:selectBooleanCheckbox>
            <h:outputLabel for="newestOnTopId">Newest on Top</h:outputLabel>
                 
            <h:dataTable value="#{logging.messages}" var="message" style="width: 100%;" border="1" cellpadding="3">
                <h:column><f:facet name="header">Time</f:facet>#{message.time}</h:column>
                <h:column><f:facet name="header">Phase</f:facet>#{message.phase}</h:column>
                <h:column><f:facet name="header">Message</f:facet>#{message.text}</h:column>
            </h:dataTable>
        
        </h:form>
        
    </h:body>
</html>

Person.java

PersonController.java

This "backing bean" serves both the blue input-form and the information- and logging-area below. Any logging message is generated here.

package fri.jsf;

import java.io.Serializable;
import java.util.Arrays;
import java.util.List;

import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.event.AjaxBehaviorEvent;
import javax.faces.event.ValueChangeEvent;
import javax.faces.view.ViewScoped;
import javax.inject.Named;

@Named
@ViewScoped
public class PersonController implements Serializable
{
    private Person person = new Person();
    private List<String> languages = Arrays.asList(new String[] { "en", "fr", "de" });
    
    private boolean postRedirectGet = true;
    private final String creationTime;
    private String requestTime;

    public PersonController() {
        log("PersonController() constructor");
        creationTime = logging().getCurrentTime();
    }
    
    // form properties
    
    public String getName() {
        return person.getName();
    }
    public void setName(String name) {
        log("setName("+logging().formatString(name)+")");
        person.setName(name);
    }
    
    public String getLanguage() {
        return person.getLanguage();
    }
    public void setLanguage(String language) {
        log("setLanguage("+logging().formatString(language)+")");
        person.setLanguage(language);
    }
    
    public List<String> getLanguages() {
        return languages;
    }
    
    // text field callbacks
    
    public void textValueChangeCallback(ValueChangeEvent changeEvent)   {
        log("textValueChangeCallback("+logging().formatChangeEvent(changeEvent)+")");
    }

    public void textAjaxCallback(AjaxBehaviorEvent behaviorEvent)   {
        log("textAjaxCallback()");
    }
    
    // select field callbacks
    
    public void selectValueChangeCallback(ValueChangeEvent changeEvent)   {
        log("selectValueChangeCallback("+logging().formatChangeEvent(changeEvent)+")");
    }

    public void selectAjaxCallback(AjaxBehaviorEvent behaviorEvent)   {
        log("selectAjaxCallback()");
    }
    
    // button callbacks
    
    public String commandActionCallback()   {
        log("commandActionCallback(), postRedirectGet="+postRedirectGet);
        if (postRedirectGet == false)
            return null;    // stay on same page
        
        String viewId = FacesContext.getCurrentInstance().getViewRoot().getViewId();
        return viewId+"?faces-redirect=true";    // reload page
    }

    public void commandListenerCallback(ActionEvent actionEvent)   {
        log("commandListenerCallback()");
    }
    
    public void commandAjaxCallback(AjaxBehaviorEvent behaviorEvent)   {
        log("commandAjaxCallback()");
    }
    
    // logging area
    
    public boolean isPostRedirectGet() {
        return postRedirectGet;
    }
    public void setPostRedirectGet(boolean postRedirectGet) {
        System.out.println("setPostRedirectGet("+postRedirectGet+")");
        this.postRedirectGet = postRedirectGet;
    }
    
    public String getCreationTime() {
        return creationTime;
    }
    
    public String getRequestTime() {
        return requestTime;
    }
    
    public String getBeanIdentity() {
        return String.valueOf(System.identityHashCode(this));
    }
    
    public String getViewRootIdentity() {
        return String.valueOf(System.identityHashCode(FacesContext.getCurrentInstance().getViewRoot()));
    }
    
    public void clearLog(AjaxBehaviorEvent behaviorEvent)   {
        logging().clear(null);
        System.out.println("clearLog()");
    }
    
    private void log(String message)  {
        requestTime = logging().getCurrentTime();
        logging().addMessage(message);
    }
    private Logging logging()  {
        return javax.enterprise.inject.spi.CDI.current().select(Logging.class).get();
    }
}

Logging.java

This holds the list of logging messages. The PersonController was bound to view-scope, but to be able to observe everything at any time, this is bound to session-scope. It provides presentation logic for the area below the blue input-form.

package fri.jsf;

import java.io.Serializable;
import java.text.SimpleDateFormat;
import java.util.*;
import javax.enterprise.context.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;
import javax.faces.event.ValueChangeEvent;
import javax.inject.Named;

@Named
@SessionScoped
public class Logging implements Serializable
{
    public static class Message implements Serializable
    {
        // it is not possible with JSF to have this public final without getters!
        private final String time;
        private final String phase;
        private final String text;
        
        public Message(String time, String phase, String text) {
            this.time = time;
            this.phase = phase;
            this.text = text;
        }
        public String getTime() {
            return time;
        }
        public String getPhase() {
            return phase;
        }
        public String getText() {
            return text;
        }
        @Override
        public String toString() {
            return time+" | "+phase+" | "+text;
        }
    }

    
    private String creationTime;
    private List<Message> messages = new ArrayList<>();
    private boolean newestOnTop = false;

    public String getCreationTime() {
        if (creationTime == null)
            creationTime = getCurrentTime();
        return creationTime;
    }
    
    public List<Message> getMessages() {
        return messages;
    }
    
    public void clear(AjaxBehaviorEvent behaviorEvent) {
        messages.clear();
    }
    
    public boolean isNewestOnTop() {
        return newestOnTop;
    }
    public void setNewestOnTop(boolean newestOnTop) {
        this.newestOnTop = newestOnTop;
        Collections.reverse(messages);
    }
    
    public void addMessage(String message)  {
        String time = getCurrentTime();
        String phase = ""+FacesContext.getCurrentInstance().getCurrentPhaseId();
        
        Message m = new Message(time, phase, message);
        if (newestOnTop)
            messages.add(0, m);
        else
            messages.add(m);
        
        System.out.println(m);
    }
    
    public String formatChangeEvent(ValueChangeEvent event) {
        return formatString(event.getOldValue())+" -> "+formatString(event.getNewValue());
    }
    
    public String formatString(Object s) {
        return (s == null) ? "null" : "\""+s+"\"";
    }
    
    public String getCurrentTime() {
        return new SimpleDateFormat("HH:mm:ss:SSS").format(new Date());
    }
}

Conclusion

JSF Blogs are as long as the learning curve is steep. Hope this article helps :-!