RichFaces Showcase

Ajax Action

a4j:ajax

a4j:commandButton

a4j:commandLink

a4j:actionListener

a4j:jsFunction

a4j:poll

a4j:push

a4j:param

Ajax Queue

a4j:queue

a4j:attachQueue

Ajax Output/Containers

a4j:outputPanel

a4j:status

a4j:region

a4j:mediaOutput

a4j:log

Validation

Client Side Validation

rich:graphValidator

rich:message

rich:messages

rich:notify

Data Iteration

a4j:repeat

rich:dataTable

rich:extendedDataTable

rich:collapsibleSubTable

rich:dataScroller

rich:list

rich:dataGrid

Trees

rich:tree

Tree Adaptors

Output/Panels

rich:chart

rich:panel

rich:togglePanel

rich:tabPanel

rich:collapsiblePanel

rich:accordion

rich:popupPanel

rich:progressBar

rich:tooltip

Menus

rich:panelMenu

rich:toolbar

rich:contextMenu

rich:dropDownMenu

Inputs

rich:autocomplete

rich:calendar

rich:editor

rich:inputNumberSlider

rich:inputNumberSpinner

rich:inplaceInput

rich:fileUpload

Selects

rich:inplaceSelect

rich:select

rich:orderingList

rich:pickList

Drag and Drop

Miscellaneous

Standard elements skinning

rich:placeholder

RichFaces functions

rich:focus

rich:componentControl

rich:hashParam

rich:hotKey

rich:jQuery

VDL documentation
Component Reference

JSF 2 provides a queuing mechanism out-of the box in order to sequence client side events with the built-in Ajax implementation. This queue is lacking in some very essential tuning options. The RichFaces a4j:queue provides these basic options in addition to other enhancements. There are two primary options available; 'requestDelay' and 'ignoreDupResponse'. These are explained more in the example below.

Many of the features of the RichFaces 3.3.X queue have been ported to RichFaces 4.0 version. However it is important to remember that the 4.0 queue is a logical queue on top of JSF's. There is only a single physical queue allowed and there is no way to override that (for now).

In this example you can tweak different queue options and see what effect that has on the number of events fired, and how often the DOM is updated. This provides a good way to learn about Ajax requests flood protection.

Attribute details:

requestDelay is the number of milliseconds to wait before sending a request in order to combine similar requests. The greater the value the fewer requests will be sent when fast typing. Similar requests in the queue are combined while waiting for the request delay
If ignoreDupResponse is true then RichFaces will not waste time updating the client side DOM if it knows another request for the same thing is pending. The best way to see that in this demo is set requestDelay to a very small value and type quickly. You will see the number of DOM updates be smaller than requests sent.

View Source

<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <rich:panel>
        <a4j:queue requestDelay="#{queueBean.requestDelay}" ignoreDupResponses="#{queueBean.ignoreDupResponces}" />
        <h:form id="form">
            <h:panelGrid columns="1" width="100%">
                <h:panelGrid columns="2">
                    <h:outputText value="Type here:" />
                    <h:inputText id="myinput" value="#{queueBean.text}" onkeyup="addEvent();"
                        disabled="#{not (facesContext.maximumSeverity==null)}">
                        <a4j:ajax onbegin="addRequest();" event="keyup" render="outtext" oncomplete="printCounts()"
                            onbeforedomupdate="addUpdate()" />
                    </h:inputText>
                    <h:outputText value="Repeated text:" />
                    <h:outputText value="#{queueBean.text}" id="outtext" style="font-weight:bold; word-break: break-all" />
                    <h:outputText value="Events count:" />
                    <h:outputText value="0" id="events" />
                    <h:outputText value="Requests count:" />
                    <h:outputText value="0" id="requests" />
                    <h:outputText value="DOM updates count:" />
                    <h:outputText value="0" id="updates" />
                </h:panelGrid>
                <rich:message for="form:delay" style="color:red;" />
                <h:panelGrid columns="2">
                    <h:outputText value="Request delay:" />
                    <h:inputText value="#{queueBean.requestDelay}" id="delay"
                        converterMessage="Delay field should be a number (Demo input disabled till this resolved)">
                        <f:convertNumber integerOnly="true" />
                    </h:inputText>
                    <h:outputText value="Ignore Duplicated Responces" />
                    <h:selectBooleanCheckbox value="#{queueBean.ignoreDupResponces}" />
                    <f:facet name="footer">
                        <h:commandButton value="Apply" action="#{queueBean.resetText}" />
                    </f:facet>
                </h:panelGrid>
            </h:panelGrid>
        </h:form>
    </rich:panel>
    <h:outputScript>
        var events = 0;
        var updates = 0;
        var outEvents = #{rich:element('events')};
        var outUpdates = #{rich:element('updates')};
        var outRequests = #{rich:element('requests')};

        var requests=0;
        function addEvent(){
            events++;
        }
        function addUpdate(){
            updates++;
        }
        function addRequest(){
            requests++;
        }

        function printCounts(){
            outEvents.innerHTML=events;
            outUpdates.innerHTML=updates;
            outRequests.innerHTML=requests;
        }
    </h:outputScript>
</ui:composition>

Queue scopes, and names:

You can define a queue so that it is the default queue for all requests from a complete view, a specific form, or even specific components.

View scoped: Place an a4j:queue with no name attribute outside of any form, and it will be the default queue for all requests on the page.
Form scoped Place a nameless a4j:queue within a form to make it the default queue for all requests within it.
Named queue Define an a4j:queue with a specific name. Then you can make any component, or behavior use that queue with the a4j:attachQueue component. See the next queue example for details.