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 Person.java|]
# [Create DataTableBean.java|]
# [Deploy the Application|]

* [Tutorial Source Code Downloads|]

----
h3. {anchor:EasyAjaxPush-DevelopmentToolsUsed}Development Tools Used

The following tools were used to create the project.
* [Eclipse|http://eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/heliossr1] IDE for Java EE Developers - Version Juno
* [Tomcat 7.x|http://tomcat.apache.org/download-70.cgi] Web Server
* [Java 6.x|http://www.oracle.com/technetwork/java/javase/downloads/]
* 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:
{code}
<?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>

{code}

h3. 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
{code}
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();
}
}

{code}