## The <a4j:status> component

<a4j:status> is a component, designed to create some visual effect during Ajax request. The comportment is usually attached to a certain request, which implies time consuming processing, so that the end user is aware the page is not hung up, it's responding to her actions: the user sees the processing progress (the component is frequently used to indicate file uploading process).

However, in the Photo Album application the <a4j:status> component is triggered on any Ajax request: to demonstrate the component itself and partially to display for the user that on every click on a link or a button something is happening, as all actions in the application occur on a single page which is not typical for usual web-workflow, when on each action the user navigates to a new page.

By default, <a4j:status> works for each Ajax components inside the local region. This means if you have no region defined on the page (the whole view is a region) and have only one <a4j:status> on the page, the <a4j:status> will be activated during Ajax request by any of the Ajax component located on the page.

As there are no regions defined explicitly in the application, <a4j:status> is located in the main template (template.xhtml) for all pages:

                <!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" … >
                    …
                    <h:body class="main-body" … >
                        <div>
                        …
                        <ui:include src="/includes/index/status.xhtml" />
                        </div>
                    </h:body>
                </html>

Hence the default behavior of the component meets that application's requirements: the component is shown on every single Ajax request.

This is the page with the <a4j:status> component:

                <ui:composition xmlns="http://www.w3.org/1999/xhtml" … >
                        …
                  <a4j:status layout="block" startStyle="height: 52px; width: 79px; position: absolute; top: 0px; left: 278px;">
                    <f:facet name="start">
                      <h:panelGroup>
                        <h:panelGroup style="position: absolute; top: 0px; left: 0px; width: 52px; height:79px; display: inline-block;
                            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources/img/shell/ai.png',sizingMethod='scale');">
                          <h:graphicImage styleClass="ie6transparency" height="79" width="52" alt="" value="resources/img/shell/ai.png"
                              border="0" />
                        </h:panelGroup>
                        <h:panelGroup
                            style="position: absolute; top: 26px; left: 13px; display: inline-block; height: 26px; width: 26px;">
                          <h:graphicImage height="26" width="26" alt="" value="resources/img/shell/ai.gif" border="0" />
                        </h:panelGroup>
                      </h:panelGroup>
                    </f:facet>
                  </a4j:status>
                </ui:composition>

The `startStyle="height: 52px; width: 79px; position: absolute; top: 0px; left: 278px;"` , attribute specifies what is displayed on the page after the request initiation, which means in our case that it is positioned absolutely: 278 pixels from the left border of the page and 0 pixels from the top, its width is 79px and the height is 52px.

The `stopStyle="display: none;"` attribute is responsible for displaying the component on the page when the request is finished, in our case the it will be hidden.

As we need to show only the beginning of the request, we customize only the `<f:facet name="start">` which is just an image (you can insert any image you like).

If you would like to get more details about the <a4j:status> please visit Showcase web page and RichFaces Developer Guide.