Create new RichFaces Documentation Jira issue
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.
JBoss.orgCommunity Documentation
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.45. 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 | JSF: The attribute takes a value-binding expression for a component property of a backing bean |
| dir | HTML: Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left) |
| id | JSF: 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 | HTML: 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 | DHTML: The client-side script method to be called when the element is clicked |
| ondblclick | DHTML: The client-side script method to be called when the element is double-clicked |
| onkeydown | DHTML: The client-side script method to be called when a key is pressed down over the element |
| onkeypress | DHTML: The client-side script method to be called when a key is pressed over the element and released |
| onkeyup | DHTML: The client-side script method to be called when a key is released |
| onmousedown | DHTML: The client-side script method to be called when a mouse button is pressed down over the element |
| onmousemove | DHTML: The client-side script method to be called when a pointer is moved within the element |
| onmouseout | DHTML: The client-side script method to be called when a pointer is moved away from the element |
| onmouseover | DHTML: The client-side script method to be called when a pointer is moved onto the element |
| onmouseup | DHTML: The client-side script method to be called when a mouse button is released |
| rendered | JSF: If "false", this component is not rendered |
| style | HTML: CSS style rules to be applied to the component |
| styleClass | JSF: Assigns one or more CSS class names to the component. Corresponds to the HTML "class" attribute. |
| title | HTML: Advisory title information about markup elements generated for this component |
Table 6.46. 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 |
To create the simplest variant on a page use the following syntax:
Example:
<a4j:outputPanel>
<h:form>
<h:outputText value="Some text"/>
<h:inputText id="text1" label="text1" value="#{rsBean.text1}"/>
</h:form>
</a4j:outputPanel>
Example:
import org.ajax4jsf.component.html.HtmlAjaxOutputPanel;
...
HtmlAjaxOutputPanel myPanel = new HtmlAjaxOutputPanel();
The <a4j:outputPanel> component is used when one or more components should be always updated. The component job is similar to that the "reRender" attribute does, but instead of specifying a comma separated list of components it wraps the components to be updated. This could be useful in cases when some components aren't rendered during the primary non-ajax response.
Example:
<a4j:support reRender="mypanel"/>
...
<a4j:outputPanel id="mypanel">
<h:panelGrid rendered="#{not empty foo.bar}">
...
</h:panelGrid>
</a4j:outputPanel>
By default the <a4j:outputPanel> is rendered as opening and closing HTML <span> tags and functions as container. With the help of the "layout" attribute this output way could be set to any of three variants:
"inline" (default)
"block"
"none"
If layout="block" is set, the component is rendered as a pair of opening and closing
<div>
tags.
In this case it is possible to apply available for
<div>
elements style attributes.
layout ="none" helps to avoid an unnecessary tag around a context that is rendered or not according to the
"rendered"
attribute value.
In case an inner context isn't rendered the
<a4j:outputPanel>
is rendered in a
<span>
tags with ID equal to 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.
The <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>
The <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.
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.
Vizit OutputPanel page at RichFaces Livedemo for examples of component usage and their sources.
Useful articles:
search the RichFaces Users Forum for some additional information on component usage;