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>

This class is ViewScoped so one bean instance will be created for each client session. The current HTTP session ID for this client will be tracked. An instance of the MessageBean is injected so that text can be added as needed.
Currently no Ajax Push is used in the above code, since we will add that further below.

6. Deploy the Application

Once the application is built and deployed and running it will look fairly basic. Clicking a color button will refresh the list of messages, since no Ajax Push has been added yet. Ideally we want to be able to open multiple web browsers and see each others color choices immediately through Ajax Push.

Master Details

Master Details

Master Details Tutorial

Development Tools Used

1. Make the masterDetails Project

2. Add ICEfaces

3. Create masterDetails.xhtml

6. Deploy the Application

Labels