how to create table with content related actions

Explanation
In real life some action to be invoked on rows, like add, delete, edit. Those action depends on state of paticular row. Total row, for example, can not be removed.
Lets see how simple it can be just with html and jsf.
For programmer that used to read and write HTML tags, table-tr-td is common knowledge with tons of examples and tips.

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 TableWithContentRelatedActions.jspx
	<table> 
		<caption>table with content related actions</caption> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
			<td>Rank</td> 
		</tr> 
		<ui:repeat value="#{tableWithContentRelatedActionsBean.rows}" 
			var="row"> 
			<tr> 
				<td><ice:outputText value="#{row.name}" /></td> 
				<td><ice:outputText value="#{row.phone}" /></td> 
				<td><ice:outputText value="#{row.rank}" /></td> 
				<!-- This is action, dependent in data in the row --> 
				<td><h:commandLink 
					action="#{tableWithContentRelatedActionsBean.delete}" 
					rendered="#{row.rank != 'manager'}"> 
					<f:setPropertyActionListener value="#{row}" 
						target="#{tableWithContentRelatedActionsBean.selectedRow}" /> 
					<ice:outputText value="delete" /> 
				</h:commandLink></td> 
			</tr> 
		</ui:repeat> 
	</table> 

This is main entry point. Its referenced by 'tableWithContentRelatedActionsBean' from faces-config.xml 'delete' action invoked from web page. 'selectedRow' is variable contains selected row.
com.gpost.jsfexamples.tableWithContentRelatedActions.TableWithContentRelatedActionsBean
package com.gpost.jsfexamples.tableWithContentRelatedActions;

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


/*
* Java class for example 'table with content related actions'
* referenced as 'tableWithContentRelatedActionsBean' from faces-config.xml, 
* used in 'TableWithContentRelatedActions.jspx'
*/
public class TableWithContentRelatedActionsBean{
	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", "worker"));
			rows.add(new ManWithPhone("Bob", "5678-4553", "manager"));
		}
		return rows;
	}

	public void delete() {
		System.out.println("delete");
		getRows().remove(selectedRow);
	}
	
	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.tableWithContentRelatedActions.ManWithPhone
package com.gpost.jsfexamples.tableWithContentRelatedActions;

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

	String name;
	
	String phone;

	String rank;
	
	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 String getRank() {
		return rank;
	}

	public void setRank(String rank) {
		this.rank = rank;
	}
}


part of faces-config.xml
<managed-bean>
 <managed-bean-name>tableWithContentRelatedActionsBean</managed-bean-name>
 <managed-bean-class>com.gpost.jsfexamples.tableWithContentRelatedActions.TableWithContentRelatedActionsBean</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 content related actions 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