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

Explanation
When data in the row contain complicated additional information
use 'expandable row' or 'details row'. Put it under 'master' row
and open it on/off.
Not an easy task with h:dataTable!

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 TableWithExpandableRow.jspx
	<table> 
		<caption>table with edit on click</caption> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
			<td></td> 
		</tr> 
		 
		<ui:repeat value="#{tableWithExpandableRowBean.rows}" var="row"> 
			<tr> 
				<td><ice:outputText value="#{row.name}" /></td> 
				<td><ice:outputText value="#{row.phone}" /></td> 
				<td><!-- collapse/expand action --> <ice:commandLink 
					action="#{tableWithExpandableRowBean.toggleExpanded}"> 
					<!-- instead of command link with test, you can use icon --> 
					<ice:outputText value="#{row.expanded ? '^' : '>' }" /> 
					<f:setPropertyActionListener value="#{row}" 
						target="#{tableWithExpandableRowBean.selectedRow}" /> 
				</ice:commandLink></td> 
 
			</tr> 
			<!-- fragment for 'details'  --> 
			<ui:fragment rendered="#{row.expanded}"> 
				<tr> 
					 
					<td colspan="3"><ice:outputText value="#{row.history}" /></td> 
 
				</tr> 
			</ui:fragment> 
 
		</ui:repeat> 
	</table> 

This is main entry point. Its referenced by 'tableWithExpandableRowBean' from faces-config.xml
com.gpost.jsfexamples.tableWithExpandableRow.TableWithExpandableRowBean
package com.gpost.jsfexamples.tableWithExpandableRow;

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


/*
* Java class for example 'table with expandable row'
* referenced as 'tableWithExpandableRowBean' from faces-config.xml, 
* used in 'TableWithExpandableRow.jspx'
*/
public class TableWithExpandableRowBean{

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

	public void toggleExpanded() {
		selectedRow.setExpanded(!selectedRow.isExpanded());
	}
	public void expand() {
		selectedRow.setExpanded(true);
	}
	public void collapse() {
		selectedRow.setExpanded(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.tableWithExpandableRow.ManWithPhone
package com.gpost.jsfexamples.tableWithExpandableRow;

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

	String name;
	
	String phone;

	String history;
	
	boolean selected = false;
	
	boolean editMode = false;
	
	boolean expanded = 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;
	}

	public boolean isExpanded() {
		return expanded;
	}

	public void setExpanded(boolean expanded) {
		this.expanded = expanded;
	}

	public String getHistory() {
		return history;
	}

	public void setHistory(String history) {
		this.history = history;
	}

}


part of faces-config.xml
<managed-bean>
 <managed-bean-name>tableWithExpandableRowBean</managed-bean-name>
 <managed-bean-class>com.gpost.jsfexamples.tableWithExpandableRow.TableWithExpandableRowBean</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 expandable row 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.

No comments:

Post a Comment