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.29. 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 Ajax action. default 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 for 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 ). |
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. |
onclick | HTML: a script expression; a pointer button is clicked |
ondblclick | HTML: a script expression; a pointer button is double-clicked |
onkeydown | HTML: a script expression; a key is pressed down |
onkeypress | HTML: a script expression; a key is pressed and released |
onkeyup | HTML: a script expression; a key is released |
onmousedown | HTML: script expression; a pointer button is pressed down |
onmousemove | HTML: a script expression; a pointer is moved within |
onmouseout | HTML: a script expression; a pointer is moved away |
onmouseover | HTML: a script expression; a pointer is moved onto |
onmouseup | HTML: script expression; a pointer 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.30. 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 |
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:inputText>
</h:form>
</a4j:outputPanel>
Example:
import org.ajax4jsf.component.html.HtmlAjaxOutputPanel;
...
HtmlAjaxOutputPanel myPanel = new HtmlAjaxOutputPanel();
<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.
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.