<a:form id="form">
<a:growl id="msgs" showDetail="true" />
<h3 style="margin-top:0">Basic</h3>
<a:accordionPanel>
<a:tab title="Godfather Part I">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather1.jpg" />
<h:outputText
value="The story begins as Don Vito Corleone..." />
</h:panelGrid>
</a:tab>
<a:tab title="Godfather Part II">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather2.jpg" />
<h:outputText value="Francis Ford Coppola's legendary..." />
</h:panelGrid>
</a:tab>
<a:tab title="Godfather Part III">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather3.jpg" />
<h:outputText value="After a break of more than 15 years..." />
</h:panelGrid>
</a:tab>
</a:accordionPanel>
<h3>Multiple Selection</h3>
<a:accordionPanel multiple="true">
<a:tab title="Godfather Part I">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather1.jpg" />
<h:outputText
value="The story begins as Don Vito Corleone..." />
</h:panelGrid>
</a:tab>
<a:tab title="Godfather Part II">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather2.jpg" />
<h:outputText value="Francis Ford Coppola's legendary..." />
</h:panelGrid>
</a:tab>
<a:tab title="Godfather Part III">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather3.jpg" />
<h:outputText value="After a break of more than 15 years...." />
</h:panelGrid>
</a:tab>
</a:accordionPanel>
<h3>On-Demand Loading</h3>
<a:accordionPanel dynamic="true" cache="true">
<a:tab title="Godfather Part I">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather1.jpg" />
<h:outputText
value="The story begins as Don Vito Corleone..." />
</h:panelGrid>
</a:tab>
<a:tab title="Godfather Part II">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather2.jpg" />
<h:outputText value="Francis Ford Coppola's legendary..." />
</h:panelGrid>
</a:tab>
<a:tab title="Godfather Part III">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather3.jpg" />
<h:outputText value="After a break of more than 15 years..." />
</h:panelGrid>
</a:tab>
</a:accordionPanel>
<h3>Change Event</h3>
<a:accordionPanel>
<a:ajax event="tabChange" listener="#{tabbedView.onTabChange}" update=":form:msgs" />
<a:ajax event="tabClose" listener="#{tabbedView.onTabClose}" update=":form:msgs" />
<a:tab title="Godfather Part I">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather1.jpg" />
<h:outputText
value="The story begins as Don Vito Corleone..." />
</h:panelGrid>
</a:tab>
<a:tab title="Godfather Part II">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather2.jpg" />
<h:outputText value="Francis Ford Coppola's legendary..." />
</h:panelGrid>
</a:tab>
<a:tab title="Godfather Part III">
<h:panelGrid columns="2" cellpadding="10">
<a:graphicImage name="demo/images/godfather/godfather3.jpg" />
<h:outputText value="After a break of more than 15 years..." />
</h:panelGrid>
</a:tab>
</a:accordionPanel>
<h3>DataModel</h3>
<a:accordionPanel value="#{tabbedView.cars}" var="car">
<a:tab title="Car - #{car.id}">
<h:panelGrid columns="2" cellpadding="5">
<f:facet name="header">
<a:graphicImage name="demo/images/car/#{car.brand}-big.gif" />
</f:facet>
<h:outputText value="Brand:" style="font-weight: bold" />
<h:outputText value="#{car.brand}" />
<h:outputText value="Year:" style="font-weight: bold" />
<h:outputText value="#{car.year}" />
<h:outputText value="Color:" style="font-weight: bold" />
<h:outputText value="#{car.color}" />
</h:panelGrid>
</a:tab>
</a:accordionPanel>
</a:form>
package com.jarch.showcase.view.panel;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.event.TabChangeEvent;
import org.primefaces.event.TabCloseEvent;
import org.primefaces.showcase.domain.Car;
@ManagedBean
public class TabbedView {
private List<Car> cars;
@PostConstruct
public void init() {
cars = new ArrayList<Car>();
cars.add(new Car("Y25YIH5", "Fiat", 2014, "Black", 10000, true));
cars.add(new Car("JHF261G", "BMW", 2013, "Blue", 50000, true));
cars.add(new Car("HSFY23H", "Ford", 2012, "Black", 35000, false));
cars.add(new Car("GMDK353", "Volvo", 2014, "White", 40000, true));
cars.add(new Car("345GKM5", "Jaguar", 2011, "Gray", 48000, false));
}
public List<Car> getCars() {
return cars;
}
public void onTabChange(TabChangeEvent event) {
FacesMessage msg = new FacesMessage("Tab Changed", "Active Tab: " + event.getTab().getTitle());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onTabClose(TabCloseEvent event) {
FacesMessage msg = new FacesMessage("Tab Closed", "Closed tab: " + event.getTab().getTitle());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}