The outputPanel component is a panel component that can be rendered as a div or span HTML component. In this recipe, we will create an output panel that demonstrates deferred loading and placeholder usage for a data table.
A basic definition of an output panel would be as follows:
<p:outputPanel layout="block">
<h3>The Volkswagen CC (also known as the
Volkswagen Passat CC)</h3>
<p>is a four-door coupe version of the Volkswagen Passat.</p>
</p:outputPanel>When the layout attribute is set to block, which is the default value, outputPanel renders an HTML div. By setting layout as inline, we can render an HTML span instead of the div.
The outputPanel component supports deferred loading, where the content of the panel is loaded after the page is loaded. The panel renders a loading animation while loading its contents.
By default, content gets loaded after the page load, but by setting deferredMode to visible, it's possible to load the contents when the panel becomes visible with a scroll for instance. The default value of deferredMode is load. The code for this is as follows:
<p:outputPanel deferred="true" deferredMode="visible">
<h3>Loaded after the panel becomes visible
on page scroll.</h3>
<p>The Volkswagen CC is a four-door coupe version of
the Volkswagen Passat.</p>
</p:outputPanel>With deferred set to true, it's also possible to load the content of the panel with a delay. The delay attribute defines this delay in milliseconds.
The PrimeFaces AJAX mechanism is basically based on IDs of the components. When those components get rendered as HTML markups and viewed in the browser with specified IDs, the JavaScript part of PrimeFaces will be responsible for updating the DOM according to the given IDs.
This will work in most cases, but when conditional rendering takes place, such as the dataTable component not being rendered on the page when it's empty, there will be no way to update the markup of the table with the AJAX mechanism since its markup won't exist within the content of the page.
To overcome this problem, we can use outputPanel as a placeholder component, which wraps the datatable component. A sample definition is given here:
<p:outputPanel id="wrapper">
<p:dataTable id="table" rendered="#{tableBean.condition}">
...
</p:dataTable>
</p:outputPanel>The action components should update the panel with the wrapper ID instead of the table from now on.
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter4/outputPanel.jsf.