This example shows a basic use of Dialog in Primefaces. The dialog will contain a SelectManyMenu for the multiple selection. On submitting the dialog main page will be updated with the selection.
<h:body> <h2>Primefaces Simple Dialog Example</h2> <p:commandButton value="Select Employees" type="button" onclick="PF('dlg').show();"/> <h:form> <p:dialog header="Employee Selection Dialog" widgetVar="dlg" modal="true"> <p:selectManyMenu value="#{empSelectBean.selectedEmployees}"> <f:selectItems value="#{empSelectBean.employees}" var="emp" itemLabel="#{emp}" itemValue="#{emp}"/> </p:selectManyMenu> <p:commandButton value="Submit" update="selectedEmpPanel" onclick="PF('dlg').hide();"/> </p:dialog> <h3>Selected Employees:</h3> <h:panelGrid id="selectedEmpPanel" columns="1"> <ui:repeat value="#{empSelectBean.selectedEmployees}" var="emp"> <h:outputText value="#{emp}"/> <br/> </ui:repeat> </h:panelGrid> </h:form> </h:body>
@ManagedBean(name = "empSelectBean") @ViewScoped public class EmployeeSelectionBean { private List<String> selectedEmployees; private List<String> employees; @PostConstruct public void init() { employees = Arrays.asList("Jim", "Sara", "Tom", "Diana", "Tina", "Joe", "Lara", "Charlie"); } public void setSelectedEmployees(List<String> selectedEmployees) { this.selectedEmployees = selectedEmployees; } public List<String> getSelectedEmployees() { return selectedEmployees; } public List<String> getEmployees() { return employees; } }
To try examples, run embedded tomcat (configured in pom.xml of example project below):
mvn tomcat7:run-war
Dependencies and Technologies Used: