how to create table with row selection with jsf, icefaces, java and html

Explanation


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

We use simplest HTML tags, together with "iceext:loop" 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 TableWithRowSelection.jspx

	<table> 
		<caption>table with row selection</caption> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
		</tr> 
		<iceext:loop value="#{tableWithRowSelectionBean.rows}" var="row"> 
			<iceext:tr action="#{row.select}" style="#{(row.selected)?'background-color: gray;' : ''}"> 
				<td><ice:outputText value="#{row.object.name}" /></td> 
				<td><ice:outputText value="#{row.object.phone}" /></td> 
			</iceext:tr> 
		</iceext:loop> 
	</table> 

This is main entry point. Its referenced by 'tableWithRowSelectionBean' from faces-config.xml
com.gpost.jsfexamples.tableWithRowSelection.TableWithRowSelectionBean

package com.gpost.jsfexamples.tableWithRowSelection;

import java.util.List;

import com.drytools.collections.selectable.SelectableArrayList;
import com.drytools.tables.rows.ISelectableTableRow;
import com.drytools.tables.rows.SelectableTableRow;
import com.gpost.jsfexamples.tableWithDeleteOnClick.ManWithPhone;

/*
* Java class for example 'table with row selection'
* referenced as 'tableWithRowSelectionBean' from faces-config.xml, 
* used in 'TableWithRowSelection.jspx'
*/
public class TableWithRowSelectionBean{
	List<ISelectableTableRow<ManWithPhone>> rows;

	public List<ISelectableTableRow<ManWithPhone>> getRows() {
		if (rows == null) {
			rows = new SelectableArrayList<ISelectableTableRow<ManWithPhone>>();
			
			// create same sample data...
			rows.add(new SelectableTableRow<ManWithPhone>(new ManWithPhone("Gary", "1234-6767")));
			rows.add(new SelectableTableRow<ManWithPhone>(new ManWithPhone("Bob", "5678-4553")));
			rows.add(new SelectableTableRow<ManWithPhone>(new ManWithPhone("John", "5698-4333")));
		}
		return rows;
	}

} // end of class

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

package com.gpost.jsfexamples.tableWithRowSelection;

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

	String name;
	
	String phone;

	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>tableWithRowSelectionBean</managed-bean-name>
 <managed-bean-class>com.gpost.jsfexamples.tableWithRowSelection.TableWithRowSelectionBean</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 row selection 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.