Primefaces AccordionPanel Client Side API Example

Primefaces defines JavaScript library called WidgetWidget – defined using WidgetVar – is the representation of the primefaces components on which the JavaScript works. However, primefaces does provide an implicit JavaScript object called PF for accessing the various functionality (behaviors) of primefaces widgets. Those widgets are defined using the primefaces’ WidgestVar attribute that all components have defined it as one of the properties that could be provided. This isn’t the only way that being used for accessing the primefaces components. However, the primefaces does allow the developer to invoke a widget functionality through using the WidgetVar directly.

One of the component that could be controlled through using of Client Side API by either way is the AccordionPanel. At this tutorial you will see how could Activate/Deactivate the AccordionPanel using the PF or by using the direct access of the WidgetVar. This library is part of primafaces library.

1. Managed Bean

AccodrionPanel.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 activateTab(index){
				PF('accordionPanel').select(index);
			}

			function deactivateTab(index){
				accordionPanel.unselect(index);
			}
		</script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces AccordionPanel</h2>
			<br/>
			<p:accordionPanel widgetVar="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>
			<br/>
			<h:link value="Activate First Tab"  onclick="activateTab(0);return false;"/>
			#{' '}
			<h:link value="Deactivate First Tab"  onclick="deactivateTab(0);return false;"/>
			<br/>
			<h:link value="Activate Second Tab"  onclick="activateTab(1);return false;"/>
			#{' '}
			<h:link value="Deactivate Second Tab"  onclick="deactivateTab(1);return false;"/>
			<br/>
			<h:link value="Activate Third Tab"  onclick="activateTab(2);return false;"/>
			#{' '}
			<h:link value="Deactivate Third Tab"  onclick="deactivateTab(2);return false;"/>
		</h:form>
	</f:view>
</html>

3. Primefaces AccordionPanel JavaScript Widget Example Demo

Primefaces AccordionPanel Client Side API

  • First Tab that has been activated by default.
  • For deactivating the first Tab, you have to invoke a Deactivate First Tab that by turn invoke a JavaScript function.
  • The defined JavaScript function does access the accordion component through its WidgetVar directly.

Primefaces AccordionPanel Client Side API

  • The result of deactivating the first Tab.

Primefaces AccordionPanel Client Side API

  • To activate the second Tab, you have to click on the Active Second Tab which in turn, it would invoke a JavaScript function that does use the implicit PF object for accessing the AccordionPanel component. The passed value for the PF is the WidgetVar value that defined previously.

Comments

comments

About Amr Mohammed

Speak Your Mind

*