If you’ve seen the primefaces accordion panel component, you are most probably asking about what’s the main important features that provided for the developer for making the component more useful. One of the feature is lazy loading of the content inside each tab.
AccordionPanel supports lazy loading of tab content, when dynamic attribute is set true, only active tab contents will be rendered to the client side and clicking an inactive tab header will do an ajax request to load the tab contents. This would increased the performance while first time rendering the page.
- Read : PrimeFaces Tutorials
This feature is useful to reduce bandwidth and speed up page loading time. By default activating a previously loaded dynamic tab does not initiate to load the contents again as tab is cached. To control this behavior use cache option.
AccordionPanel tag has the attributes dynamic and cache for achieving the lazy loading and caching techniques. This tutorial highlights the benefits of those two attributes.
AccordionPanel Dynamic Loading
The below snapshots show you the impact of using dynamic attribute and the difference between considering it or not. Using dynamic attribute will load the activated panel data only. The remaining panels won’t be loaded any more until they are activated by the user. But if you provide no dynamic attribute the view does load the whole panels.
Running Without Dynamic Attribute
- Without using dynamic attribute, the all Accordion Tabs have activated.
Running With Dynamic Attribute
- Using the dynamic attribute, wil cause the only first AccordionPanel Tab has been activated.
- Considering that the other tabs will be activated once the user has clicked on.
AccordionPanel Data Cache
As mentioned previously, activating a previous loaded dynamic Tab doesn’t initiate a request to load the contents again as tab is cached. Disabling of cache attribute will solve this issue.
Running in Dynamic & Cached
Running in Dynamic & Non Cached
1. Managed Bean
AccordionPanel.java
[code lang=”java”]
package net.javabeat.primefaces;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class AccordionPanel {
private String messageOne = "Hello JavaBeat One";
private String messageTwo = "Hello JavaBeat Two";
private String messageThree = "Hello JavaBeat Three";
public String getMessageOne() {
System.out.println("Message One Loaded");
return messageOne;
}
public void setMessageOne(String messageOne) {
this.messageOne = messageOne;
}
public String getMessageTwo() {
System.out.println("Message Two Loaded");
return messageTwo;
}
public void setMessageTwo(String messageTwo) {
this.messageTwo = messageTwo;
}
public String getMessageThree() {
System.out.println("Message Three Loaded");
return messageThree;
}
public void setMessageThree(String messageThree) {
this.messageThree = messageThree;
}
}
[/code]
2. index.xhtml
[code lang=”xml”]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<f:view>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces AccordionPanel</h2>
<br/>
<p:accordionPanel dynamic="true" cache="false">
<p:tab title="First Tab Title">
<h:outputText value="#{accordionPanel.messageOne}"></h:outputText>
</p:tab>
<p:tab title="Second Tab Title">
<h:outputText value="#{accordionPanel.messageTwo}"></h:outputText>
</p:tab>
<p:tab title="Third Tab Title">
<h:outputText value="#{accordionPanel.messageThree}"></h:outputText>
</p:tab>
</p:accordionPanel>
</h:form>
</f:view>
</html>
[/code]
3. Faces Configuration File
faces-config.xml
[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
<application>
<resource-bundle>
<base-name>net.javabeat.jsf.application</base-name>
<var>msg</var>
</resource-bundle>
</application>
</faces-config>
[/code]
4. Pom.xml File
pom.xml
[code lang=”xml”]
<!–Pom entries–>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>${servlet.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.4</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.4</version>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>4.0</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.1</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.1.2</version>
</dependency>
<!–Pom entries–>
[/code]
[wpdm_file id=59]
