Master Details

You are viewing an old version (v. 4) of this page.
The latest version is v. 27, last edited on Oct 29, 2012 (view differences | )
<< 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:

  1. [Make the masterDetails Project|]
  2. [Add ICEfaces|]
  3. [Create masterDetails.xhtml|]
  4. [Create|]
  5. [Create|]
  6. [Deploy the Application|]
  • [Tutorial Source Code Downloads|]

Development Tools Used

The following tools were used to create the project.

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

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();

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2017 ICEsoft Technologies Canada Corp.