<a:form id="form">
<a:growl id="msgs" showDetail="true" />
<h3 style="margin-top:0">Basic</h3>
<a:tabView>
<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:tabView>
<h3>On-Demand Loading</h3>
<a:tabView 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:tabView>
<h3>Change Event</h3>
<a:tabView>
<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" closable="true">
<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" closable="true">
<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:tabView>
<h3>DataModel</h3>
<a:tabView 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:tabView>
<h3>Scrollable</h3>
<a:tabView scrollable="true">
<a:tab title="Tab 1">Tab 1 Content</a:tab>
<a:tab title="Tab 2">Tab 2 Content</a:tab>
<a:tab title="Tab 3">Tab 3 Content</a:tab>
<a:tab title="Tab 4">Tab 4 Content</a:tab>
<a:tab title="Tab 5">Tab 5 Content</a:tab>
<a:tab title="Tab 6">Tab 6 Content</a:tab>
<a:tab title="Tab 7">Tab 7 Content</a:tab>
<a:tab title="Tab 8">Tab 8 Content</a:tab>
<a:tab title="Tab 9">Tab 9 Content</a:tab>
<a:tab title="Tab 10">Tab 10 Content</a:tab>
<a:tab title="Tab 11">Tab 11 Content</a:tab>
<a:tab title="Tab 12">Tab 12 Content</a:tab>
<a:tab title="Tab 13">Tab 13 Content</a:tab>
<a:tab title="Tab 14">Tab 14 Content</a:tab>
<a:tab title="Tab 15">Tab 15 Content</a:tab>
<a:tab title="Tab 16">Tab 16 Content</a:tab>
<a:tab title="Tab 17">Tab 17 Content</a:tab>
<a:tab title="Tab 18">Tab 18 Content</a:tab>
<a:tab title="Tab 19">Tab 19 Content</a:tab>
<a:tab title="Tab 20">Tab 20 Content</a:tab>
<a:tab title="Tab 21">Tab 21 Content</a:tab>
<a:tab title="Tab 22">Tab 22 Content</a:tab>
<a:tab title="Tab 23">Tab 23 Content</a:tab>
<a:tab title="Tab 24">Tab 24 Content</a:tab>
<a:tab title="Tab 25">Tab 25 Content</a:tab>
</a:tabView>
<h3>Orientation - Top|Bottom|Left|Right</h3>
<a:tabView orientation="left">
<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:tabView>
</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);
}
}