JSF 2.x Tip of the Day: AJAX Composite Component with AJAX Event Listener

Tuesday, November 13, 2012

JSF 2.x Tip of the Day: AJAX Composite Component with AJAX Event Listener

This example is using a JSF composite component to create an AJAX enabled <h:commandButton/> that has an <f:ajax/> component. Additionally, there is a listener that handles the AJAX events that occur.

This is a simple example which demonstrates the concepts, but could be extended to create your own type of AJAX button like you would find in PrimeFaces, or RichFaces.

The source code for the project can be found here: cc-ajax-commandbutton.zip

The composite component is located in a directory called resources/lotuscc. The only thing interesting about the implementation is the method-signature for the listener.

ajaxCommandButton.xhtml

<?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:cc="http://java.sun.com/jsf/composite"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      >
    <!-- INTERFACE -->
    <cc:interface>
        <cc:attribute name="value" required="true" type="java.lang.String"/>
        <cc:attribute name="render" type="java.lang.String"/>
        <cc:attribute method-signature="void actionListener(javax.faces.event.AjaxBehaviorEvent)" name="listener"/>
    </cc:interface>
 
    <!-- IMPLEMENTATION -->
    <cc:implementation>
        <f:ajax listener="#{cc.attrs.listener}" render="#{cc.attrs.render}">
            <h:commandbutton value="#{cc.attrs.value}">
            </h:commandbutton></f:ajax>
    </cc:implementation>
</html>

The index.xhtml page, and IndexBean are very straightforward.

index.xhtml

<?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:lotuscc="http://java.sun.com/jsf/composite/lotuscc">
    <h:head>
        <title>Composite Component AJAX Command Button Example</title>
    </h:head>
    <h:body>
        <h:form id="form1">
            <lotuscc:ajaxCommandButton value="AJAX Update" render=":form1:out"
                                       listener="#{indexBean.update(event)}" />
             
 
            <h:outputText id="out" value="AJAX Submissions: #{indexBean.count}"/>   
        </h:form>
    </h:body>
</html>

IndexBean.java

/*
* Copyright 2012 Blue Lotus Software, LLC.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*      http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.bluelotussoftware.jsf.example;
 
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.AjaxBehaviorEvent;
 
/**
*
* @author John Yeary
* @version 1.0
*/
@ManagedBean
@ViewScoped
public class IndexBean implements Serializable {
 
private static final long serialVersionUID = -6989441633260622062L;
private int count;
 
public int getCount() {
return count;
}
 
public void update(AjaxBehaviorEvent event) {
count++;
}
}

Java Evangelist John Yeary

Pages

Tuesday, November 13, 2012