AccordionPanel is a container component that displays content in stacked format. That component has associated with a type of org.primefaces.component.AccordionPanel Java Class. This tutorial explains how to use the Primefaces AccordionPanel with simple example. If you have any questions, please write it in the comments section.
1. AccordionPanel Tag Info
2. AccordionPanel Attributes
3. Managed Bean
AccordionPanel.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() { return messageOne; } public void setMessageOne(String messageOne) { this.messageOne = messageOne; } public String getMessageTwo() { return messageTwo; } public void setMessageTwo(String messageTwo) { this.messageTwo = messageTwo; } public String getMessageThree() { return messageThree; } public void setMessageThree(String messageThree) { this.messageThree = messageThree; } }
4. The View
index.xhtml
<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> <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>
5. Required Dependencies
Add the following dependencies in your Maven’s pom.xml file.
pom.xml
<!-- Pom entries--> <dependencies> <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> </dependencies> <!-- Pom entries-->
7. The Deployment Descriptor
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" metadata-complete="true" version="2.5"> <error-page> <error-code>404</error-code> <location>/faces/error.xhtml</location> </error-page> <error-page> <error-code>500</error-code> <location>/faces/error.xhtml</location> </error-page> <error-page> <exception-type>java.lang.Exception</exception-type> <location>/faces/error.xhtml</location> </error-page> <context-param> <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2 </description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>server</param-value> </context-param> <context-param> <param-name>javax.faces.application.CONFIG_FILES</param-name> <param-value>/WEB-INF/faces-config.xml</param-value> </context-param> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> </web-app>
8. Faces Configuration File
faces-config.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>
9. Primefaces AccordionPanel Demo
[wpdm_file id=58]