View Source

h1. Master Details

h1. {anchor:EasyAjaxPush-EasyAjaxPushTutorial}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|]
# [Create|]
# [Deploy the Application|]

* [Tutorial Source Code Downloads|]

h3. {anchor:EasyAjaxPush-DevelopmentToolsUsed}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

h3. {anchor:EasyAjaxPush-1.Makethe%7B%7BeasyAjaxPush}{anchor:EasyAjaxPush-step1}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)

h3. {anchor:EasyAjaxPush-2.AddICEfacesandICEpush}{anchor:EasyAjaxPush-step2}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.

h3. {anchor:EasyAjaxPush-3.Create%7B%7Bcolor.xhtml%7}{anchor:EasyAjaxPush-step3}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" "">
<html xmlns=""
<title>Master/Details demo</title>
<link rel="stylesheet" type="text/css"
href="./xmlhttp/css/rime/rime.css" />
<h:form id="master">

<ace:panel header="Staff List" toggleable="true" style="width: 50%">

<ice:dataTable id="masterTable" value="#{dataTableBean.personData}"
<ice:column id="id" headerText="ID">
<ice:rowSelector value="#{person.selected}"
selectionListener="#{dataTableBean.selectionListener}" />
<h:outputText id="idCell" value="#{}" />

<ice:column id="name" headerText="Full Name">
<h:outputText id="nameCell" value="#{}" />

<ice:column id="address" headerText="Address">
<h:outputText id="addressCell" value="#{person.address}" />
<p />

<h:form id="details">

<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}"/>

<ice:outputLabel for="lastName" value="Last Name" />
<h:inputText id="lastName"
value="#{dataTableBean.personDetails.lastName}" size="55">
<f:ajax event="change" listener="#{dataTableBean.changeListener}"/>

<ice:outputLabel for="address" value="Address" />
<h:inputText id="address"
value="#{dataTableBean.personDetails.address}" size="55">
<f:ajax event="change" listener="#{dataTableBean.changeListener}" />
<ice:outputText />
<ice:commandButton value="Update Details"
action="#{}" />
<!-- Confirm Dialog -->
<ice:panelPopup visible="#{dataTableBean.confirmDialog}" modal="true">
<f:facet name="header">
<ice:panelGroup styleClass="headerStyleClass">
<ice:outputText value="Warning" />
<f:facet name="body">
<ice:panelGroup styleClass="bodyStyleClass">
value="You have unsaved data. &lt;br/&gt; Are you sure you want to change to a new master record?"
escape="false" />
<h:commandButton value="Yes" action="#{dataTableBean.confirmYes}" />
<h:commandButton value="No" action="#{dataTableBean.confirmNo}" />


h3. 4. Create
Create a new Java class file called Person in the package org.icefaces.tutorial.masterdetails.model and paste the code below:
package org.demo.model;
import javax.faces.bean.ManagedBean;

public class Person implements Serializable, Cloneable{
private static final long serialVersionUID = -3540661397516075104L;
public Person(Integer id, String firstName, String lastName, String address) {
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) { = id;
public Boolean getSelected() {
return selected;
public void setSelected(Boolean selected) {
this.selected = selected;
public Object clone() throws CloneNotSupportedException {
return super.clone();