
<< View previous version | view page history | view next version >>
Master Details
Master Details Tutorial
Master-Details update forms are commonly used for selecting an item from a list and then updating the details of that item. This example will show how you can easily set up a form to select an employee and update the employee details.
This tutorial uses an ICE dataTable with a rowSelector.
Here is the entire list of steps worked through during this tutorial:
- [Make the masterDetails Project|]
- [Add ICEfaces|]
- [Create masterDetails.xhtml|]
- [Create Person.java|]
- [Create DataTableBean.java|]
- [Deploy the Application|]
- [Tutorial Source Code Downloads|]
Development Tools Used
The following tools were used to create the project.
- Eclipse IDE for Java EE Developers - Version Juno
- Tomcat 7.x Web Server
- Java 6.x
- ICEfaces 3
1. Make the masterDetails Project
- Using Eclipse create a new Dynamic Web Project called masterDetails.
- Target runtime: Apache Tomcat v7.0
- Dynamic web module version: 3.0
- Configuration: JavaServer Faces v2.0 Project (Mojarra)
2. Add ICEfaces
Add the icefaces.jar (from the ICEfaces 3 bundle) to your project, either through a custom User Library or by putting them into masterDetails /WEB-INF/lib/. The approach doesn't matter as long as the jars are included in the deployed war file.
3. Create masterDetails.xhtml
Create a new page called masterDetails.xhtml and paste the code below:
<?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:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:icecore="http://www.icefaces.org/icefaces/core" xmlns:ace="http://www.icefaces.org/icefaces/components" xmlns:ice="http://www.icesoft.com/icefaces/component"> <h:head> <title>Master/Details demo</title> <link rel="stylesheet" type="text/css" href="./xmlhttp/css/rime/rime.css" /> </h:head> <h:body> <h:form id="master"> <center> <ace:panel header="Staff List" toggleable="true" style="width: 50%"> <ice:dataTable id="masterTable" value="#{dataTableBean.personData}" var="person"> <ice:column id="id" headerText="ID"> <ice:rowSelector value="#{person.selected}" selectionListener="#{dataTableBean.selectionListener}" /> <h:outputText id="idCell" value="#{person.id}" /> </ice:column> <ice:column id="name" headerText="Full Name"> <h:outputText id="nameCell" value="#{person.name}" /> </ice:column> <ice:column id="address" headerText="Address"> <h:outputText id="addressCell" value="#{person.address}" /> </ice:column> </ice:dataTable> </ace:panel> </center> </h:form> <p /> <h:form id="details"> <center> <ace:panel header="Staff Member Details" toggleable="true" style="width: 50%" collapsed="#{dataTableBean.detailsHidden}"> <ice:panelGrid columns="2"> <ice:outputLabel for="firstName" value="First Name" /> <h:inputText id="firstName" value="#{dataTableBean.personDetails.firstName}" size="55"> <f:ajax event="change" listener="#{dataTableBean.changeListener}"/> </h:inputText> <ice:outputLabel for="lastName" value="Last Name" /> <h:inputText id="lastName" value="#{dataTableBean.personDetails.lastName}" size="55"> <f:ajax event="change" listener="#{dataTableBean.changeListener}"/> </h:inputText> <ice:outputLabel for="address" value="Address" /> <h:inputText id="address" value="#{dataTableBean.personDetails.address}" size="55"> <f:ajax event="change" listener="#{dataTableBean.changeListener}" /> </h:inputText> <ice:outputText /> <ice:commandButton value="Update Details" action="#{dataTableBean.save}" /> </ice:panelGrid> </ace:panel> </center> <!-- Confirm Dialog --> <ice:panelPopup visible="#{dataTableBean.confirmDialog}" modal="true"> <f:facet name="header"> <ice:panelGroup styleClass="headerStyleClass"> <ice:outputText value="Warning" /> </ice:panelGroup> </f:facet> <f:facet name="body"> <ice:panelGroup styleClass="bodyStyleClass"> <ice:outputText value="You have unsaved data. <br/> Are you sure you want to change to a new master record?" escape="false" /> <ice:panelGroup> <h:commandButton value="Yes" action="#{dataTableBean.confirmYes}" /> <h:commandButton value="No" action="#{dataTableBean.confirmNo}" /> </ice:panelGroup> </ice:panelGroup> </f:facet> </ice:panelPopup> </h:form> </h:body> </html>
4. Create Person.java
Create a new Java class file called Person in the package org.icefaces.tutorial.masterdetails.model and paste the code below:
Person.java
package org.demo.model; import java.io.Serializable; import javax.faces.bean.ManagedBean; @ManagedBean public class Person implements Serializable, Cloneable{ private static final long serialVersionUID = -3540661397516075104L; public Person(Integer id, String firstName, String lastName, String address) { this.setId(id); this.firstName = firstName; this.lastName = lastName; this.address = address; } private Integer id; private String firstName; private String lastName; private String address; private Boolean selected; public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } public String getName(){ return firstName + " " + lastName; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Boolean getSelected() { return selected; } public void setSelected(Boolean selected) { this.selected = selected; } @Override public Object clone() throws CloneNotSupportedException { return super.clone(); } }