a4j:outputPanel

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

## 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>

## Creating the Component Dynamically Using Java

Example:

    import org.ajax4jsf.component.html.HtmlAjaxOutputPanel;
    ...
    HtmlAjaxOutputPanel  myPanel = new HtmlAjaxOutputPanel();

## 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.

## 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.