Following example shows how to pass data from a page displayed in the dialog (opened via openDialog()) back to the parent page by using 'dialogReturn' ajax behavior event.
Example
Parent JSF page
src/main/webapp/index.xhtml<h:body>
<h2>PrimeFaces - Programmatic Dialog</h2>
<h:form>
<p:commandButton value="Show Employees" actionListener="#{mainBean.showEmployees}">
<p:ajax event="dialogReturn" listener="#{mainBean.onEmployeeSelected}" update="selectedEmpPanel" />
</p:commandButton>
<br/>
<h3>Selected Employees:</h3>
<h:panelGrid id="selectedEmpPanel" columns="1">
<ui:repeat value="#{mainBean.selectedEmployees}" var="emp">
<h:outputText value="#{emp.name} (#{emp.department})"/>
<br/>
</ui:repeat>
</h:panelGrid>
</h:form>
</h:body>
The Main bean
@ManagedBean
@ViewScoped
public class MainBean {
private List<Employee> selectedEmployees = new ArrayList<>();
public void showEmployees(ActionEvent ae) {
RequestContext.getCurrentInstance()
.openDialog("employee", getDialogOptions(), null);
}
public Map<String, Object> getDialogOptions() {
Map<String, Object> options = new HashMap<>();
options.put("resizable", false);
options.put("draggable", true);
options.put("modal", true);
options.put("height", 600);
options.put("contentHeight", "100%");
return options;
}
public void onEmployeeSelected(SelectEvent selectEvent) {
this.selectedEmployees = (List<Employee>) selectEvent.getObject();
}
public List<Employee> getSelectedEmployees() {
return selectedEmployees;
}
}
public class Employee {
private long id;
private String name;
private String phoneNumber;
private String department;
.............
}
The Employee Page
src/main/webapp/employee.xhtml<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Employees</title>
</h:head>
<h:body>
<h:form>
<p:panel>
<p:dataTable var="employee"
value="#{employeeBean.employeeList}"
rowKey="#{employee.id}"
scrollable="true"
scrollHeight="400"
selection="#{employeeBean.selectedEmployees}">
<p:column headerText="Id">
<h:outputText value="#{employee.id}"/>
</p:column>
<p:column headerText="Name">
<h:outputText value="#{employee.name}"/>
</p:column>
<p:column headerText="Phone Number">
<h:outputText value="#{employee.phoneNumber}"/>
</p:column>
<p:column headerText="Department">
<h:outputText value="#{employee.department}"/>
</p:column>
<p:column selectionMode="multiple"
style="width:16px;text-align:center"/>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Submit" actionListener="#{employeeBean.submitSelectedEmployees()}"/>
</f:facet>
</p:panel>
</h:form>
</h:body>
</html>
The Employee bean
@ManagedBean
@RequestScoped
public class EmployeeBean {
private List<Employee> selectedEmployees;
public List<Employee> getEmployeeList() {
return EmployeeService.Instance.getEmployees();
}
public List<Employee> getSelectedEmployees() {
return selectedEmployees;
}
public void setSelectedEmployees(List<Employee> selectedEmployees) {
this.selectedEmployees = selectedEmployees;
}
public void submitSelectedEmployees() {
RequestContext.getCurrentInstance().closeDialog(selectedEmployees);
}
}
To try examples, run embedded tomcat (configured in pom.xml of example project below):
mvn tomcat7:run-war Output
Main page:
Invoking dialog by clicking 'Show Employees' button and making selections by clicking checkboxes:
On Submitting the dialog:
Example ProjectDependencies and Technologies Used: - primefaces 6.1 primefaces
- jsf-api 2.2.14:
This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
- jsf-impl 2.2.14:
This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
- datafactory 0.8: Library to generate data for testing.
- JDK 1.8
- Maven 3.3.9
|
