Java Tutorial Blog

Primefaces AccordionPanel Example

//  by 

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

Primefaces Accordion Panel General Info

2. AccordionPanel Attributes

Primefaces Accordion Attributes Part I

Primefaces Accordion Attributes Part II

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

Primefaces Demo

[wpdm_file id=58]

About Amr Mohammed