PrimeFaces AccordionPanel – onTabChange and onTabShow Events

This tutorial explains the event change listeners used along with the AccordionPanel component. The onTabChange is called before a tab is displayed to the user and onTabShow is called after displayed to the user. Both receive container element of the tab to show as a parameter.

At the other hand tabChange is the one and only ajax behavior event for accordion panel that’s executed when a tab is toggled. It is used inside the sub-element p:ajax. Your listener (if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance that contains a reference to a new active tab and the accordion panel itself.

Look at the below sample code to understand how to use the tab change listener in AccordionPanel.

1. Managed Bean

AccordionPanel.java

package net.javabeat.primefaces;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.TabChangeEvent;

@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;
	}
	public void changeListener(TabChangeEvent e){
		System.out.println("TabChangeEvent Has Fired By ::"+e.getSource());
		System.out.println("The next Tab Title is :: "+e.getTab().getTitle());
	}
}

2. 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>
		<script>
			function onTabChange(panel){
				alert('Client Callback : Before Tab Being Changed');
			}

			function onTabShow(panel){
				alert('Client Callback : After Tab Been changed');
			}
		</script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces AccordionPanel</h2>
			<br/>
			<p:accordionPanel onTabShow="onTabShow(panel)" onTabChange="onTabChange(panel)">
				<p:ajax event="tabChange" listener="#{accordionPanel.changeListener}"></p:ajax>
				<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>

3. AccordionPanel onTabChange and onTabShow Events Demo

The below snapshots show you the application behavior once you’ve used the client side callbacks and the Ajax event of the p:accordionPanel component in your application.

Accordion Callback & Ajax Event

  • This client side callback has been invoked once the user has activated the second Tab.
  • The callback JavaScript method does define a parameter for the accordionPanel itself.

Accordion Callback & Ajax Event

  • The client side callback has been invoked after the user has activated the second Tab.
  • The callback JavaScript method does define a parameter for the accordionPanel itself.

Accordion Ajax TabChange Event

  • The listener of the TabChange event has been invoked.
  • The TabChangeEvent provides references for the accordion panel itself and for the tab being activated.

Comments

comments

About Amr Mohammed

Speak Your Mind

*