### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

## 6.11. < a4j:outputPanel >

### 6.11.1. Description

The component is used for components grouping in the Ajax output area, which offers several additional output opportunities such as inserting of non-present in tree components, saving of transient elements after Ajax request and some others.

Table 6.22. a4j : outputPanel attributes

Attribute Name | Description
--- | ---
ajaxRendered | Defines, whether the content of this component must be (or not) included in AJAX response created by parent AJAX Container, even if it is not forced by reRender list of ajax action. Ignored if component marked to output by some Ajax action component. Default value is "false".
binding | The attribute takes a value-binding expression for a component property of a backing bean
dir | Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
id | Every component may have a unique id that is automatically created if omitted
keepTransient | Flag to mark all child components to non-transient. If true, all children components will be set to non-transient state and keep in saved components tree. For output in self-renderer region all content ( By default, all content in <f:verbatim> tags and non-jsf elements in facelets, marked as transient - since, self-rendered ajax regions don't plain output for ajax processing ). Default value is "true"
lang | Code describing the language used in the generated markup for this component
layout | HTML layout for generated markup. Possible values: "block" for generating an HTML <div> element, "inline" for generating an HTML <span> element, and "none" for generating no HTML element. There is a minor exception for the "none" case where a child element has the property "rendered" set to "false". In this case, we create an empty <span> element with same ID as the child element to use as a placeholder for later processing. Default value is "inline"
onclick | The clientside script method to be called when the element is clicked
ondblclick | The client side script method to be called when the element is double-clicked
onkeydown | The client side script method to be called when a key is pressed down over the element
onkeypress | The client side script method to be called when a key is pressed over the element and released
onkeyup | The client side script method to be called when a key is released
onmousedown | The client side script method to be called when a mouse button is pressed down over the element
onmousemove | The client side script method to be called when a pointer is moved within the element
onmouseout | The client side script method to be called when a pointer is moved away from the element
onmouseover | The client side script method to be called when a pointer is moved onto the element
onmouseup | The client side script method to be called when a mouse button is released
rendered | If "false", this component is not rendered
style | CSS style(s) is/are to be applied when this component is rendered
styleClass | Corresponds to the HTML class attribute
title | Advisory title information about markup elements generated for this component

Table 6.23. Component identification parameters

Name | Value
--- | ---
component-type | org.ajax4jsf.OutputPanel
component-family | javax.faces.Panel
component-type | org.ajax4jsf.ajax.OutputPanel
component-class | org.ajax4jsf.component.html.HtmlAjaxOutputPanel
renderer-type | org.ajax4jsf.components.AjaxOutputPanelRenderer

### 6.11.2. Creating on a page

Here is the simplest way for a component creation on a page.

Example:

    <a4j:outputPanel>

        <h:form>

            <h:outputText value="Some text"/>

                <h:inputText id="text1" label="text1" value="#{rsBean.text1}"/>

        </h:form>

    </a4j:outputPanel>

### 6.11.3. Creating the Component Dynamically Using Java

Example:

    import org.ajax4jsf.component.html.HtmlAjaxOutputPanel;

    ...

    HtmlAjaxOutputPanel  myPanel = new HtmlAjaxOutputPanel();

### 6.11.4. Key attributes and ways of usage

<a4j:outputPanel> allows marking of a page area, which is updated on Ajax response. Anyway, <a4j:outputPanel> usage is optional, as in RichFaces it's possible to indicate any existing component id on a component view in order to define updating areas. To speed up the performance, RichFaces updates only a component tree. <a4j:outputPanel> usage is recommended for wrapping components that aren't rendered during the primary non-ajax response, as the components don't present in a component tree.

Example:

    <a4j:support ... reRender="mypanel"/>

    ...

    <a4j:outputPanel id="mypanel">

        <h:panelGrid rendered="#{not empty foo.bar}">

            ...

        </h:panelGrid>

    </a4j:outputPanel>

In addition to the areas directly indicated in "reRender" attribute of Ajax components, <a4j:outputPanel> allows to update a part of a page basing on its own flag. The flag is defined by the "ajaxRendered" attribute. The flag is commonly used when a part of a page must be updated or can be updated on any response.

Example:

    <a4j:outputPanel ajaxRendered="true">

        <h:messages/>

    </a4j:outputPanel>

On default <a4j:outputPanel> is output as a pair of opening and closing html <span> tag, but with the help of the layout attribute this output way could be changed. There are three variants for this component value:

- "inline" (default)

- "block"

- "none"

If `layout="block"` is chosen, the component is rendered as a pair of opening and closing <div> tag, to which it's possible to apply any available style attributes available for block tags.

`layout ="none"` helps to avoid an unnecessary tag round a context that could or couldn't be rendered according to the defined "rendered" attribute conditions. If an inner context isn't rendered, <a4j:outputPanel> is rendered as a <span> tag with the id equal to an id of a child component and `display:none` style. If a child component is rendered, <a4j:outputPanel> doesn't present at all in a final code.

Example:

    <a4j:support .... reRender="mypanel"/>

    ...

    <a4j:outputPanel layout="none">

        <h:panelGrid id="mypanel" rendered="#{not empty foo.bar}">

            ...

        </h:panelGrid>

    </a4j:outputPanel>

As you see, the code is very similar to the one shown above, but "reRender " attribute refers directly to the updating panelGrid and not to the framing outputPanel, and it's more semantically correct.

<a4j:outPanel> should be used for non-JSF component part framing, which is to be updated on Ajax response, as RichFaces specifies the list of updating areas as a list of an existing JSF component.

On default non-JSF context isn't saved in a component tree, but is rendered anew every time. To accelerate the processing speed and Ajax response input speed, RichFaces saves non-JSF context in a component tree on default. This option could be canceled by "keepTransient" attribute that cancels transient flag forced setting for child components. This flag setting keeps the current value set by child components.

## Note:

In JSF 1.1 implementation and lower, where non-JSF context should be framed with the <f:verbatim> component, <a4j:outputPanel> doesn't improve this JSF implementation option in any way, so you still have to use this tag where it's necessary without RichFaces usage.

RichFaces allows setting Ajax responses rendering directly basing on component tree nodes without referring to the JSP (XHTML) page code. It could be defined by "selfRendered" attribute setting to "true" on <a4j:region> and could help considerably speed up a response output. However, if a transient flag is kept as it is, this rapid processing could cause missing of transient components that present on view and don't come into a component tree. Hence, for any particular case you could choose a way for you application optimization: speed up processing or redundant memory for keeping tree part earlier defined a transient.

### 6.11.5. Relevant resources links

On RichFaces Live Demo page you can see the example of <a4j:outputPanel> usage and sources for the given example.

Some additional information about usage of component can be found on the Ajax4JSF Users Forum

See how the <a4j:outputPanel> component can be used in the Ajax Input form with detection of Old/New Values example in the RichFaces cookbook.

- Prev6.10. < a4j:loadScript >
- Top of page
- Front page
- Next6.12. < a4j:loadBundle >