how to create table with edit on click with jsf, icefaces, java and html

Explanation
Values in table are subject to change. User can select row(s), press button edit, then fields in table should became editable.
Lets see example. Its very simple, look for more examples in next posts

New to Java, JSF, Icefaces? Here is some links to start with:
Why and when use ICEFACES?
First steps with jsf and java

We use simplest HTML tags, together with "ui:repeat" tag, which loops on 'tr' element.
Pros: every programmer, even not-jsf, can understand it. CSS is transparent: what you see is what you get.
Customization is simple too.
Use you favorite HTML editor, or JSF editor together with CSS tools to customize every aspect of this table, its easy!
fragment from TableWithEditOnClick.jspx

	<table> 
		<caption>table with edit on click</caption> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
			<td></td> 
		</tr> 
		<!-- depending on row mode flag, show different row --> 
		<ui:repeat value="#{tableWithEditOnClickBean.rows}" var="row"> 
			<ui:fragment rendered="#{!row.editMode}"> 
				<tr> 
					<td><ice:outputText value="#{row.name}" /></td> 
					<td><ice:outputText value="#{row.phone}" /></td> 
					<td> 
					<!-- edit action -->  
					<ice:commandLink action="#{tableWithEditOnClickBean.edit}"> 
						<ice:outputText value="edit" /> 
						<f:setPropertyActionListener value="#{row}" 
							target="#{tableWithEditOnClickBean.selectedRow}" /> 
					</ice:commandLink></td> 
 
				</tr> 
			</ui:fragment> 
			<ui:fragment rendered="#{row.editMode}"> 
				<tr> 
				<!-- instead of outputText, show inputText --> 
					<td><ice:inputText value="#{row.name}" /></td> 
					<td><ice:inputText value="#{row.phone}" /></td> 
					<td><!-- unedit action --> <ice:commandLink 
						action="#{tableWithEditOnClickBean.finishEdit}"> 
						<ice:outputText value="submit" /> 
						<f:setPropertyActionListener value="#{row}" 
							target="#{tableWithEditOnClickBean.selectedRow}" /> 
					</ice:commandLink></td> 
 
				</tr> 
			</ui:fragment> 
 
		</ui:repeat> 
	</table> 

This is main entry point. Its referenced by 'tableWithEditOnClickBean' from faces-config.xml
com.gpost.jsfexamples.tableWithEditOnClick.TableWithEditOnClickBean

package com.gpost.jsfexamples.tableWithEditOnClick;

import java.util.ArrayList;
import java.util.List;

/*
* Java class for example 'table with edit on click'
* referenced as 'tableWithEditOnClickBean' from faces-config.xml, 
* used in 'TableWithEditOnClick.jspx'
*/
public class TableWithEditOnClickBean{
	List<ManWithPhone> rows = null;
	ManWithPhone selectedRow;
	
	
	public List<ManWithPhone> getRows() {
		if (rows == null) {
			rows = new ArrayList();
			// create same sample data...
			rows.add(new ManWithPhone("Gary", "1234-6767"));
			rows.add(new ManWithPhone("Bob", "5678-4553"));
			rows.add(new ManWithPhone("John", "5698-4333"));
		}
		return rows;
	}

	public void edit() {
		selectedRow.setEditMode(true);
	}
	public void finishEdit() {
		selectedRow.setEditMode(false);
	}
	
	public ManWithPhone getSelectedRow() {
		return selectedRow;
	}

	public void setSelectedRow(ManWithPhone selectedRow) {
		this.selectedRow = selectedRow;
	}
} // end of class

This class defines data in row.
com.gpost.jsfexamples.tableWithEditOnClick.ManWithPhone

package com.gpost.jsfexamples.tableWithEditOnClick;

public class ManWithPhone {
	public ManWithPhone(String name, String phone) {
		super();
		this.name = name;
		this.phone = phone;
	}

	String name;
	
	String phone;

	
	boolean selected = false;
	
	boolean editMode = false;
	
	public boolean isEditMode() {
		return editMode;
	}

	public void setEditMode(boolean editMode) {
		this.editMode = editMode;
	}

	public boolean isSelected() {
		return selected;
	}

	public void setSelected(boolean selected) {
		this.selected = selected;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

}

part of faces-config.xml

<managed-bean>
 <managed-bean-name>tableWithEditOnClickBean</managed-bean-name>
 <managed-bean-class>com.gpost.jsfexamples.tableWithEditOnClick.TableWithEditOnClickBean</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>

</managed-bean>

conclusion
As we saw in this example, you can create perfect table with edit on click using simple html/css, then add some binding to your java beans and you get very flexible, easily customizable data table without complexity of 'h:dataTable' component.