<a:form>
<a:commandButton id="imageBtn" value="Basic" type="button" />
<a:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
<a:graphicImage name="/demo/images/nature/nature1.jpg" width="300" />
</a:overlayPanel>
<a:commandButton id="movieBtn" value="Dynamic" type="button" />
<a:overlayPanel id="moviePanel" for="movieBtn" hideEffect="fade" dynamic="true" style="width:600px">
<a:dataTable var="movies" value="#{movieView.movieList}" rows="5" paginator="true">
<a:column headerText="Movie">
<h:outputText value="#{movies.movie}" />
</a:column>
<a:column headerText="Directed By">
<h:outputText value="#{movies.directedBy}" />
</a:column>
<a:column headerText="Genres">
<h:outputText value="#{movies.genres}" />
</a:column>
<a:column headerText="Run Time(min.)">
<h:outputText value="#{movies.runTime}" />
</a:column>
</a:dataTable>
</a:overlayPanel>
<a:graphicImage id="img" name="/demo/images/images.png" style="cursor:pointer" title="Custom Options" />
<a:overlayPanel id="imgPanel" for="img" showEffect="blind" hideEffect="explode" showEvent="mouseover" hideEvent="mousedown"
dismissable="false" showCloseIcon="true">
<a:imageSwitch effect="fade" style="width:300px;height:188px;">
<ui:repeat value="#{imageSwitchView.images}" var="image">
<a:graphicImage name="/demo/images/nature/#{image}" width="300" />
</ui:repeat>
</a:imageSwitch>
</a:overlayPanel>
<a:dataTable id="basicDT" var="car" value="#{dtSelectionView.cars1}">
<f:facet name="header">
DataTable Integration
</f:facet>
<a:column headerText="Id">
<h:outputText value="#{car.id}" />
</a:column>
<a:column headerText="Year">
<h:outputText value="#{car.year}" />
</a:column>
<a:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</a:column>
<a:column headerText="Color">
<h:outputText value="#{car.color}" />
</a:column>
<a:column style="width:32px;text-align: center">
<a:commandButton update=":form:carDetail" oncomplete="PF('carOP').show('#{component.clientId}')" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{car}" target="#{dtSelectionView.selectedCar}" />
</a:commandButton>
</a:column>
</a:dataTable>
<a:overlayPanel widgetVar="carOP" showEffect="fade" hideEffect="fade" dismissable="false" showCloseIcon="true">
<a:outputPanel id="carDetail" style="text-align:center;">
<a:panelGrid columns="2" rendered="#{not empty dtSelectionView.selectedCar}" columnClasses="label,value">
<f:facet name="header">
<a:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/>
</f:facet>
<h:outputText value="Id:" />
<h:outputText value="#{dtSelectionView.selectedCar.id}" />
<h:outputText value="Year" />
<h:outputText value="#{dtSelectionView.selectedCar.year}" />
<h:outputText value="Color:" />
<h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>
<h:outputText value="Price" />
<h:outputText value="$#{dtSelectionView.selectedCar.price}" />
</a:panelGrid>
</a:outputPanel>
</a:overlayPanel>
</a:form>
package com.jarch.showcase.view.overlay;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import org.primefaces.showcase.domain.Movie;
@ManagedBean
public class MovieView {
private List<Movie> movieList;
public List<Movie> getMovieList() {
return movieList;
}
@PostConstruct
public void init() {
movieList = new ArrayList<Movie>();
movieList.add(new Movie("The Lord of the Rings: The Two Towers", "Peter Jackson", "Fantasy, Epic", 179));
movieList.add(new Movie("The Amazing Spider-Man 2", "Marc Webb", "Action", 142));
movieList.add(new Movie("Iron Man 3", "Shane Black", "Action", 109));
movieList.add(new Movie("Thor: The Dark World", "Alan Taylor", "Action, Fantasy", 112));
movieList.add(new Movie("Avatar", "James Cameron", "Science Fiction", 160));
movieList.add(new Movie("The Lord of the Rings: The Fellowship of the Ring", "Peter Jackson", "Fantasy, Epic", 165));
movieList.add(new Movie("Divergent", "Neil Burger", "Action", 140));
movieList.add(new Movie("The Hobbit: The Desolation of Smaug", "Peter Jackson", "Fantasy", 161));
movieList.add(new Movie("Rio 2", "Carlos Saldanha", "Comedy", 101));
movieList.add(new Movie("Captain America: The Winter Soldier", "Joe Russo", "Action", 136));
movieList.add(new Movie("Fast Five", "Justin Lin", "Action", 132));
movieList.add(new Movie("The Lord of the Rings: The Return of the King", "Peter Jackson", "Fantasy, Epic", 200));
}
}
package com.jarch.showcase.view.overlay;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class ImageSwitchView {
private List<String> images;
@PostConstruct
public void init() {
images = new ArrayList<String>();
images.add("nature1.jpg");
images.add("nature2.jpg");
images.add("nature3.jpg");
images.add("nature4.jpg");
}
public List<String> getImages() {
return images;
}
}