OverlayPanel is a generic container component that can overlay other components on page. Notable features are custom positioning, configurable events and effects. Lazy content loading to reduce page load time is also supported via dynamic option, when enabled overlayPanel will load the contents just before being shown.
Documentation<h:form id="form"> <p:commandButton id="imageBtn" value="Basic" type="button" /> <p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade"> <p:graphicImage name="/demo/images/nature/nature1.jpg" width="300" /> </p:overlayPanel> <br /><br /> <p:commandButton id="movieBtn" value="Dynamic" type="button" /> <p:overlayPanel id="moviePanel" for="movieBtn" hideEffect="fade" dynamic="true" style="width:600px" modal="true"> <p:dataTable var="movies" value="#{movieView.movieList}" rows="5" paginator="true"> <p:column headerText="Movie"> <h:outputText value="#{movies.movie}" /> </p:column> <p:column headerText="Directed By"> <h:outputText value="#{movies.directedBy}" /> </p:column> <p:column headerText="Genres"> <h:outputText value="#{movies.genres}" /> </p:column> <p:column headerText="Run Time(min.)"> <h:outputText value="#{movies.runTime}" /> </p:column> </p:dataTable> </p:overlayPanel> <br /><br /> <p:graphicImage id="img" name="/demo/images/images.png" style="cursor:pointer" title="Custom Options" /> <p:overlayPanel id="imgPanel" for="img" showEffect="blind" hideEffect="explode" showEvent="mouseover" hideEvent="mousedown" dismissable="false" showCloseIcon="true"> <p:imageSwitch effect="fade" style="width:300px;height:188px;"> <ui:repeat value="#{imageSwitchView.images}" var="image"> <p:graphicImage name="/demo/images/nature/#{image}" width="300" /> </ui:repeat> </p:imageSwitch> </p:overlayPanel> <br /><br /> <p:dataTable id="basicDT" var="car" value="#{dtSelectionView.cars1}"> <f:facet name="header"> DataTable Integration </f:facet> <p:column headerText="Id"> <h:outputText value="#{car.id}" /> </p:column> <p:column headerText="Year"> <h:outputText value="#{car.year}" /> </p:column> <p:column headerText="Brand"> <h:outputText value="#{car.brand}" /> </p:column> <p:column headerText="Color"> <h:outputText value="#{car.color}" /> </p:column> <p:column style="width:32px;text-align: center"> <p:commandButton update=":form:carDetail" oncomplete="PF('carOP').show('#{component.clientId}')" icon="pi pi-search" title="View"> <f:setPropertyActionListener value="#{car}" target="#{dtSelectionView.selectedCar}" /> </p:commandButton> </p:column> </p:dataTable> <p:overlayPanel widgetVar="carOP" showEffect="fade" hideEffect="fade" dismissable="false" showCloseIcon="true"> <p:outputPanel id="carDetail" style="text-align:center;"> <p:panelGrid columns="2" rendered="#{not empty dtSelectionView.selectedCar}" columnClasses="label,value"> <f:facet name="header"> <p: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}" /> </p:panelGrid> </p:outputPanel> </p:overlayPanel> </h:form>
@Named @RequestScoped 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)); } }
@Named @RequestScoped 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; } }
@Named("dtSelectionView") @ViewScoped public class SelectionView implements Serializable { private List<Car> cars1; private List<Car> cars2; private List<Car> cars3; private List<Car> cars4; private List<Car> cars5; private List<Car> cars6; private Car selectedCar; private List<Car> selectedCars; @Inject private CarService service; @PostConstruct public void init() { cars1 = service.createCars(10); cars2 = service.createCars(10); cars3 = service.createCars(10); cars4 = service.createCars(10); cars5 = service.createCars(10); cars6 = service.createCars(10); } public List<Car> getCars1() { return cars1; } public List<Car> getCars2() { return cars2; } public List<Car> getCars3() { return cars3; } public List<Car> getCars4() { return cars4; } public List<Car> getCars5() { return cars5; } public List<Car> getCars6() { return cars6; } public void setService(CarService service) { this.service = service; } public Car getSelectedCar() { return selectedCar; } public void setSelectedCar(Car selectedCar) { this.selectedCar = selectedCar; } public List<Car> getSelectedCars() { return selectedCars; } public void setSelectedCars(List<Car> selectedCars) { this.selectedCars = selectedCars; } public void onRowSelect(SelectEvent<Car> event) { FacesMessage msg = new FacesMessage("Car Selected", event.getObject().getId()); FacesContext.getCurrentInstance().addMessage(null, msg); } public void onRowUnselect(UnselectEvent<Car> event) { FacesMessage msg = new FacesMessage("Car Unselected", event.getObject().getId()); FacesContext.getCurrentInstance().addMessage(null, msg); } }
public class Car implements Serializable { public String id; public String brand; public int year; public String color; public int price; public boolean sold; public Car() {} public Car(String id, String brand, int year, String color) { this.id = id; this.brand = brand; this.year = year; this.color = color; } public Car(String id, String brand, int year, String color, int price, boolean sold) { this.id = id; this.brand = brand; this.year = year; this.color = color; this.price = price; this.sold = sold; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getBrand() { return brand; } public void setBrand(String brand) { this.brand = brand; } public int getYear() { return year; } public void setYear(int year) { this.year = year; } public String getColor() { return color; } public void setColor(String color) { this.color = color; } public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } public boolean isSold() { return sold; } public void setSold(boolean sold) { this.sold = sold; } @Override public int hashCode() { int hash = 7; hash = 59 * hash + (this.id != null ? this.id.hashCode() : 0); return hash; } @Override public boolean equals(Object obj) { if (obj == null) { return false; } if (getClass() != obj.getClass()) { return false; } final Car other = (Car) obj; if ((this.id == null) ? (other.id != null) : !this.id.equals(other.id)) { return false; } return true; } }
@Named @ApplicationScoped public class CarService { private final static String[] colors; private final static String[] brands; static { colors = new String[10]; colors[0] = "Black"; colors[1] = "White"; colors[2] = "Green"; colors[3] = "Red"; colors[4] = "Blue"; colors[5] = "Orange"; colors[6] = "Silver"; colors[7] = "Yellow"; colors[8] = "Brown"; colors[9] = "Maroon"; brands = new String[10]; brands[0] = "BMW"; brands[1] = "Mercedes"; brands[2] = "Volvo"; brands[3] = "Audi"; brands[4] = "Renault"; brands[5] = "Fiat"; brands[6] = "Volkswagen"; brands[7] = "Honda"; brands[8] = "Jaguar"; brands[9] = "Ford"; } public List<Car> createCars(int size) { List<Car> list = new ArrayList<Car>(); for(int i = 0 ; i < size ; i++) { list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState())); } return list; } private String getRandomId() { return UUID.randomUUID().toString().substring(0, 8); } private int getRandomYear() { return (int) (Math.random() * 50 + 1960); } private String getRandomColor() { return colors[(int) (Math.random() * 10)]; } private String getRandomBrand() { return brands[(int) (Math.random() * 10)]; } private int getRandomPrice() { return (int) (Math.random() * 100000); } private boolean getRandomSoldState() { return (Math.random() > 0.5) ? true: false; } public List<String> getColors() { return Arrays.asList(colors); } public List<String> getBrands() { return Arrays.asList(brands); } }