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

The a4j:region component is used to mark zones which should be processed during Ajax requests without using execute definitions for Ajax behaviors or components. This allows the processing definitions and component identifiers to be decoupled, and declarative wrapping with the a4j:region tag is used instead.

In RichFaces 3.3, the whole view was processed if no regions were specified, as the ViewRoot itself was the region by default. In RichFaces 4.x, all the controls are set to execute="@this" by default according to JSF 2 specifications. However, if the controls wrapped with the a4j:region tag and have no execute definitions, they use execute="@region" instead.

The example below contains two similar user info panels. The button inside the first panel will not work, as it does not use execute declarations; by default it uses execute="@this". A separate definition is needed to make the button work properly. The second panel has its inputs and button wrapped in an a4j:region. This means that the h:commandButton works without any additional execute definitions.

User Info Panel explicitly executed by identifier

User Name:
User email:

Echo Panel
Entered name:
Entered email:

User Info Panel with Region

User Name:
User email:

Echo Panel
Entered name:
Entered email:

View Source

<!DOCTYPE html>
<html 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">
<ui:composition>
    <h:outputStylesheet>
        .col1 {
            width: 260px;
        }
        
        .col4 {
            word-break: break-all;
        }
    </h:outputStylesheet>
    <h:form id="form">
        <h:panelGrid columns="2" columnClasses="col1, col2">
            <h:panelGrid>
                <f:facet name="header">
                    User Info Panel explicitly executed by identifier
                </f:facet>
                <h:panelGrid columns="2" id="userInfoPanel1">
                    <h:outputText value="User Name: " />
                    <h:inputText value="#{regionBean.user1.name}" />
                    <h:outputText value="User email: " />
                    <h:inputText value="#{regionBean.user1.email}" />
                </h:panelGrid>
                <h:commandButton value="broken submit">
                    <a4j:ajax render="echopanel1" />
                </h:commandButton>
            </h:panelGrid>
            <h:panelGrid columns="2" id="echopanel1">
                <f:facet name="header">
                    Echo Panel
                </f:facet>
                <h:outputText value="Entered name:" />
                <h:outputText value="#{regionBean.user1.name}" />
                <h:outputText value="Entered email:" />
                <h:outputText value="#{regionBean.user1.email}" />
            </h:panelGrid>
        </h:panelGrid>
        <h:panelGrid columns="2" columnClasses="col1, col2">
            <h:panelGrid>
                <f:facet name="header">
                    User Info Panel with Region
                </f:facet>
                <a4j:region>
                    <h:panelGrid columns="2">
                        <h:outputText value="User Name: " />
                        <h:inputText value="#{regionBean.user2.name}" />
                        <h:outputText value="User email: " />
                        <h:inputText value="#{regionBean.user2.email}" />
                    </h:panelGrid>
                    <h:commandButton value="submit">
                        <a4j:ajax render="echopanel2" />
                    </h:commandButton>
                </a4j:region>
            </h:panelGrid>
            <h:panelGrid columns="2" id="echopanel2" columnClasses="col3, col4">
                <f:facet name="header">
                    Echo Panel
                </f:facet>
                <h:outputText value="Entered name:" />
                <h:outputText value="#{regionBean.user2.name}" />
                <h:outputText value="Entered email:" />
                <h:outputText value="#{regionBean.user2.email}" />
            </h:panelGrid>
        </h:panelGrid>
    </h:form>
</ui:composition>
</html>

Note: a4j:commandButton/Link use execute="@form"" as their default and so would work as expected in both panels. They also integrate in the core Ajax functionality, and do not require additional a4j:ajax tags.