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. &lt;br/&gt;
                                         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();
	}
}

Master Details

Master Details

Master Details Tutorial

Development Tools Used

1. Make the masterDetails Project

2. Add ICEfaces

3. Create masterDetails.xhtml

4. Create Person.java

Labels