When a dialog modal is in a component layout, the dialog don't appers correctaly, the dialog is show under the dark div that cover the page, so tehe dialog become diabled. like this exemple:
datatablelazy.xhtml
Code: Select all
<ui:composition 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.prime.com.tr/ui"
template="../templates/ui.xhtml">
<ui:define name="content">
<p:layout fullPage="true" style="z-index:-1;" >
<p:layoutUnit id="center" position="center" resizable="true" minHeight="400" scrollable="true">
<h1 class="title ui-widget-header ui-corner-all">DataTable - Lazy Loading</h1>
<div class="entry">
<p>DataTable has built-in support to deal with huge datasets. In order to enable lazy loading, a LazyDataModel needs to be implemented
to query the datasource when pagination, sorting, filtering or live scrolling happens.
This example demonstrates how to display one hundred million(100000000) records efficiently.</p>
<h:form id="formLazyTable">
<p:ajaxStatus style="width:16px;height:16px;">
<f:facet name="start">
<h:graphicImage value="../design/ajaxloading.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
<p:dataTable id="lazyTableCar" binding="#{tableBean.dataTable}"
var="car" value="#{tableBean.lazyModel}" paginator="true" rows="10" lazy="true"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15"
selection="#{tableBean.selectedCar}" selectionMode="single"
onRowSelectComplete="carDialog.show()" onRowSelectUpdate="display">
<f:facet name="header">
Displaying #{tableBean.countLazyCars} Cars
</f:facet>
<p:column headerText="Model">
<h:outputText value="#{car.model}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Manufacturer">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
<p:column>
<p:commandButton value="Delete" actionListener="#{tableBean.delete(car)}" update="@form" />
<p:commandButton value="Edit" actionListener="#{tableBean.edit(car)}" update="@form" oncomplete="carEditDialog.show()"/>
</p:column>
</p:dataTable>
<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" modal="true"
width="200" showEffect="explode" hideEffect="explode">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header">
<p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
</f:facet>
<h:outputText value="Model:" />
<h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>
<h:outputText value="Year:" />
<h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>
<h:outputText value="Manufacturer:" />
<h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>
<h:outputText value="Color:" />
<h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>
</h:panelGrid>
</p:dialog>
<p:dialog header="Car Detail" widgetVar="carEditDialog" resizable="false" modal="true"
width="250" showEffect="explode" hideEffect="explode" rendered="#{tableBean.selectedCar != null}">
<h:panelGrid id="editForm" columns="2" cellpadding="4">
<f:facet name="header">
<p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
</f:facet>
<h:outputText value="Model:" />
<p:inputText value="#{tableBean.selectedCar.model}"/>
<h:outputText value="Year:" />
<p:inputText value="#{tableBean.selectedCar.year}"/>
<h:outputText value="Manufacturer:" />
<p:inputText value="#{tableBean.selectedCar.manufacturer}"/>
<h:outputText value="Color:" />
<p:inputText value="#{tableBean.selectedCar.color}"/>
<p:commandButton value="Save" actionListener="#{tableBean.save()}" update="@form" oncomplete="carEditDialog.hide()"/>
</h:panelGrid>
</p:dialog>
</h:form>
<h3>Source</h3>
<p:tabView>
<p:tab title="datatableLazy.xhtml">
<pre name="code" class="xml">
<h:form>
<p:dataTable var="car" value="\#{tableBean.lazyModel}" paginator="true" rows="10" lazy="true"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15"
selection="\#{tableBean.selectedCar}" selectionMode="single"
onRowSelectComplete="carDialog.show()" onRowSelectUpdate="display">
<f:facet name="header">
Displaying 100,000,000 Cars
</f:facet>
<p:column headerText="Model">
<h:outputText value="\#{car.model}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="\#{car.year}" />
</p:column>
<p:column headerText="Manufacturer">
<h:outputText value="\#{car.manufacturer}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="\#{car.color}" />
</p:column>
</p:dataTable>
<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
width="200" showEffect="explode" hideEffect="explode">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header">
<p:graphicImage value="/images/cars/\#{tableBean.selectedCar.manufacturer}.jpg"/>
</f:facet>
<h:outputText value="Model:" />
<h:outputText value="\#{tableBean.selectedCar.model}"/>
<h:outputText value="Year:" />
<h:outputText value="\#{tableBean.selectedCar.year}"/>
<h:outputText value="Manufacturer:" />
<h:outputText value="\#{tableBean.selectedCar.manufacturer}"/>
<h:outputText value="Color:" />
<h:outputText value="\#{tableBean.selectedCar.color}"/>
</h:panelGrid>
</p:dialog>
</h:form>
</pre>
</p:tab>
<p:tab title="TableBean.java">
<pre name="code" class="java">
package org.primefaces.examples.view;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletContext;
import org.primefaces.examples.domain.Car;
import org.primefaces.model.LazyDataModel;
public class TableBean {
private LazyDataModel<Car> lazyModel;
private Car selectedCar;
public TableBean() {
lazyModel = new LazyDataModel<Car>() {
/**
* Dummy implementation of loading a certain segment of data.
* In a real application, this method should load data from a datasource
*/
@Override
public List<Car> load(int first, int pageSize, String sortField, boolean sortOrder, Map<String,String> filters) {
logger.log(Level.INFO, "Loading the lazy car data between {0} and {1}", new Object[]{first, (first+pageSize)});
//Sorting and Filtering information are not used for demo purposes just random dummy data is returned
List<Car> lazyCars = new ArrayList<Car>();
populateLazyRandomCars(lazyCars, pageSize);
return lazyCars;
}
};
/**
* In a real application, this number should be resolved by a projection query
*/
lazyModel.setRowCount(100000000);
}
public Car getSelectedCar() {
return selectedCar;
}
public void setSelectedCar(Car selectedCar) {
this.selectedCar = selectedCar;
}
public LazyDataModel<Car> getLazyModel() {
return lazyModel;
}
private void populateLazyRandomCars(List<Car> list, int size) {
for(int i = 0 ; i < size ; i++) {
list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
}
}
private String getRandomColor() {
return colors[(int) (Math.random() * 10)];
}
private String getRandomManufacturer() {
return manufacturers[(int) (Math.random() * 10)];
}
private int getRandomYear() {
return (int) (Math.random() * 50 + 1960);
}
}
</pre>
</p:tab>
</p:tabView>
</div>
</p:layoutUnit>
</p:layout>
</ui:define>
</ui:composition>
Code: Select all
/*
* Copyright 2009 Prime Technology.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package org.primefaces.examples.view;
import java.io.File;
import java.io.IOException;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.servlet.ServletContext;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFCellStyle;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.hssf.util.HSSFColor;
import org.primefaces.examples.domain.Car;
import org.primefaces.model.Cell;
import org.primefaces.model.LazyDataModel;
import com.lowagie.text.BadElementException;
import com.lowagie.text.Document;
import com.lowagie.text.DocumentException;
import com.lowagie.text.Image;
import com.lowagie.text.PageSize;
import com.lowagie.text.Rectangle;
import java.util.Map;
import javax.faces.model.SelectItem;
import org.primefaces.component.datatable.DataTable;
import org.primefaces.event.DragDropEvent;
import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;
import org.primefaces.examples.domain.ManufacturerSale;
public class TableBean implements Serializable {
private final static Logger logger = Logger.getLogger(TableBean.class.getName());
private final static String[] colors;
private final static String[] manufacturers;
private String theme;
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";
manufacturers = new String[10];
manufacturers[0] = "Mercedes";
manufacturers[1] = "BMW";
manufacturers[2] = "Volvo";
manufacturers[3] = "Audi";
manufacturers[4] = "Renault";
manufacturers[5] = "Opel";
manufacturers[6] = "Volkswagen";
manufacturers[7] = "Chrysler";
manufacturers[8] = "Ferrari";
manufacturers[9] = "Ford";
}
private List<Car> cars;
private List<Car> carsSmall;
private List<Car> carsLarge;
private Date date = new Date();
private Car selectedCar;
private Car[] selectedCars;
private Cell selectedCell;
private Cell[] selectedCells;
private LazyDataModel<Car> lazyModel;
private List<ManufacturerSale> sales;
private List<String> columns;
private List<Car[]> dynamicCars;
private String columnName;
private SelectItem[] manufacturerOptions;
private List<Car> droppedCars;
private List<Car> lazyCars;
private int countLazyCars;
private DataTable dataTable;
public TableBean() {
cars = new ArrayList<Car>();
carsSmall = new ArrayList<Car>();
carsLarge = new ArrayList<Car>();
droppedCars = new ArrayList<Car>();
populateRandomCars(cars, 50);
populateRandomCars(carsSmall, 9);
populateRandomCars(carsLarge, 200);
populateRandomSales();
createDynamicColumns();
populateDynamicCars();
manufacturerOptions = createFilterOptions(manufacturers);
lazyModel = new LazyDataModel<Car>() {
/**
* Dummy implementation of loading a certain segment of data.
* In a real application, this method should load data from a datasource
*/
@Override
public List<Car> load(int first, int pageSize, String sortField, boolean sortOrder, Map<String,String> filters) {
logger.log(Level.INFO, "Loading the lazy car data between {0} and {1}", new Object[]{first, (first+pageSize)});
//Sorting and Filtering information are not used for demo purposes just random dummy data is returned
return loadLazyCars(first, pageSize);
}
};
/**
* In a real application, this number should be resolved by a projection query
*/
lazyModel.setRowCount(100);
countLazyCars=100;
lazyCars = new ArrayList<Car>();
populateLazyRandomCars(lazyCars, 100);
}
public List<Car> loadLazyCars(int first, int pageSize){
List<Car> result = new ArrayList<Car>();
for (int i = first; i < (first + pageSize); i++) {
result.add(lazyCars.get(i));
}
return result;
}
public void delete(Car car) {
lazyCars.remove(car);
countLazyCars = lazyCars.size();
lazyModel.setRowCount(countLazyCars);
refreshTable();
}
public void edit(Car car) {
selectedCar = car;
}
public void saveCar() {
// here you can merge the car in your database
refreshTable();
}
public void refreshTable() {
dataTable.loadLazyData();
}
public int getCountLazyCars() {
return countLazyCars;
}
public void setCountLazyCars(int countLazyCars) {
this.countLazyCars = countLazyCars;
}
public DataTable getDataTable() {
return dataTable;
}
public void setDataTable(DataTable dataTable) {
this.dataTable = dataTable;
}
public LazyDataModel<Car> getLazyModel() {
return lazyModel;
}
public Car[] getSelectedCars() {
return selectedCars;
}
public void setSelectedCars(Car[] selectedCars) {
this.selectedCars = selectedCars;
}
public Car getSelectedCar() {
return selectedCar;
}
public void setSelectedCar(Car selectedCar) {
this.selectedCar = selectedCar;
}
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
private void populateRandomCars(List<Car> list, int size) {
for(int i = 0 ; i < size ; i++)
list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
}
private void populateLazyRandomCars(List<Car> list, int size) {
for(int i = 0 ; i < size ; i++) {
list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
}
}
public List<Car> getCars() {
return cars;
}
public List<Car> getCarsSmall() {
return carsSmall;
}
public List<Car> getCarsLarge() {
return carsLarge;
}
private int getRandomYear() {
return (int) (Math.random() * 50 + 1960);
}
private String getRandomColor() {
return colors[(int) (Math.random() * 10)];
}
private String getRandomManufacturer() {
return manufacturers[(int) (Math.random() * 10)];
}
private int getRandomSale() {
return (int) (Math.random() * 100000);
}
private int getRandomProfit() {
return (int) (Math.random() * 100);
}
private String getRandomModel() {
return UUID.randomUUID().toString().substring(0, 8);
}
public Cell getSelectedCell() {
return selectedCell;
}
public void setSelectedCell(Cell selectedCell) {
this.selectedCell = selectedCell;
}
public Cell[] getSelectedCells() {
return selectedCells;
}
public void setSelectedCells(Cell[] selectedCells) {
this.selectedCells = selectedCells;
}
public void postProcessXLS(Object document) {
HSSFWorkbook wb = (HSSFWorkbook) document;
HSSFSheet sheet = wb.getSheetAt(0);
HSSFRow header = sheet.getRow(0);
HSSFCellStyle cellStyle = wb.createCellStyle();
cellStyle.setFillForegroundColor(HSSFColor.GREEN.index);
cellStyle.setFillPattern(HSSFCellStyle.SOLID_FOREGROUND);
for(int i=0; i < header.getPhysicalNumberOfCells();i++) {
HSSFCell cell = header.getCell(i);
cell.setCellStyle(cellStyle);
}
}
public void preProcessPDF(Object document) throws IOException, BadElementException, DocumentException {
Document pdf = (Document) document;
pdf.open();
pdf.setPageSize(PageSize.A4);
ServletContext servletContext = (ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();
String logo = servletContext.getRealPath("") + File.separator + "images" + File.separator + "prime_logo.png";
pdf.add(Image.getInstance(logo));
}
public void displaySelectedCells(ActionEvent actionEvent) {
System.out.println(selectedCell.getColumnId());
Car car = (Car) selectedCell.getRowData();
System.out.println(car.getModel());
}
public String getTheme() {
return theme;
}
public void setTheme(String theme) {
this.theme = theme;
}
public void save() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Info", "Changes Saved"));
}
public void onRowSelect(SelectEvent event) {
FacesMessage msg = new FacesMessage("Car Selected", ((Car) event.getObject()).getModel());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onRowUnselect(UnselectEvent event) {
FacesMessage msg = new FacesMessage("Car Unselected", ((Car) event.getObject()).getModel());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public String onRowSelectNavigate(SelectEvent event) {
FacesContext.getCurrentInstance().getExternalContext().getFlash().put("selectedCar", event.getObject());
return "carDetail?faces-redirect=true";
}
public List<ManufacturerSale> getSales() {
return sales;
}
private void populateRandomSales() {
sales = new ArrayList<ManufacturerSale>();
for(int i = 0; i < 10; i++) {
sales.add(new ManufacturerSale(manufacturers[i], getRandomSale(), getRandomSale(), getRandomProfit(), getRandomProfit()));
}
}
public int getLastYearTotal() {
int total = 0;
for(ManufacturerSale sale : getSales()) {
total += sale.getLastYearSale();
}
return total;
}
public int getThisYearTotal() {
int total = 0;
for(ManufacturerSale sale : getSales()) {
total += sale.getThisYearSale();
}
return total;
}
private void populateDynamicCars() {
dynamicCars = new ArrayList<Car[]>();
for(int i=0; i < 9; i++) {
Car[] cars = new Car[columns.size()];
for(int j=0; j < columns.size(); j++) {
cars[j] = new Car(getRandomModel(), getRandomYear(), columns.get(j), getRandomColor());
}
dynamicCars.add(cars);
}
}
private void createDynamicColumns() {
columns = new ArrayList<String>();
for(int i=0; i < 3; i++) {
columns.add(manufacturers[i]);
}
}
public List<String> getColumns() {
return columns;
}
public List<Car[]> getDynamicCars() {
return dynamicCars;
}
public String getColumnName() {
return columnName;
}
public void setColumnName(String columnName) {
this.columnName = columnName;
}
public void addColumn() {
columns.add(columnName);
columnName = null;
populateDynamicCars();
}
public void removeColumn() {
String columnToRemove = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("columnToRemove");
columns.remove(columnToRemove);
populateDynamicCars();
}
public String[] getManufacturers() {
return manufacturers;
}
public String[] getColors() {
return colors;
}
public List<String> getAvailableManufacturers() {
List<String> availableManufacturers = new ArrayList<String>();
for(String manufacturer : manufacturers) {
if(!columns.contains(manufacturer))
availableManufacturers.add(manufacturer);
}
return availableManufacturers;
}
private SelectItem[] createFilterOptions(String[] data) {
SelectItem[] options = new SelectItem[data.length + 1];
options[0] = new SelectItem("", "Select");
for(int i = 0; i < data.length; i++) {
options[i + 1] = new SelectItem(data[i], data[i]);
}
return options;
}
public SelectItem[] getManufacturerOptions() {
return manufacturerOptions;
}
public void onCarDrop(DragDropEvent ddEvent) {
Car car = ((Car) ddEvent.getData());
droppedCars.add(car);
carsSmall.remove(car);
}
public List<Car> getDroppedCars() {
return droppedCars;
}
}
primefaces 3.0 snapshot and primefaces 2.0 snapshot