how to create table with paging 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

In this example, instead of 'ui:repeat' we will use custom 'iceext:loop' tag.
This tag add some functionality like paging, mod, index.
Getting started with custom loop component
how to create custom loop jsf component: source code and example
Example for custom loop jsf component with zebra style and index

We use simplest HTML tags, together with "loop" tag, which loops on 'tr' element. We use "loop" tag, which works like 'ui:repeat' but add more functionality like paging, 'index' variable, 'mod' variable, and more
Also, we use 'iceext:tr' tag. This tag render 'tr' but has possibility create action binding on click event, in this example to select row.
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 TableWithPaging.jspx

	<table> 
		<caption>table with paging</caption> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
		</tr> 
		<iceext:loop id="tableWithTooManyRows" value="#{tableWithPagingBean.rows}" 
			var="row" rows="10"> 
			<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 'tableWithPagingBean' from faces-config.xml
com.gpost.jsfexamples.tableWithPaging.TableWithPagingBean

package com.gpost.jsfexamples.tableWithPaging;

import java.util.List;

import com.drytools.collections.selectable.SelectableArrayList;
import com.drytools.tables.rows.ISelectableTableRow;
import com.drytools.tables.rows.SelectableTableRow;

/*
* Java class for example 'table with paging'
* referenced as 'tableWithPagingBean' from faces-config.xml, 
* used in 'TableWithPaging.jspx'
*/
public class TableWithPagingBean{

	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")));
			
			// create more data so we can see paging...
			for (int i = 0; i < 100; i++) {
				rows.add(new SelectableTableRow<ManWithPhone>(new ManWithPhone("name"+i, "111-222-"+i)));
			}
			
		}
		return rows;
	}



} // end of class

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

package com.gpost.jsfexamples.tableWithPaging;

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>tableWithPagingBean</managed-bean-name>
 <managed-bean-class>com.gpost.jsfexamples.tableWithPaging.TableWithPagingBean</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 paging 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.

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.

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.

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.

how to create table with dynamic headers with jsf, icefaces, java and html

Explanation
Table headers can be more then one line, it can by dynamic too.

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 TableWithDynamicHeaders.jspx

	<table> 
		<caption>table with dynamic headers</caption> 
		<ui:fragment rendered="#{tableWithDynamicHeadersBean.size > 10}"> 
		<tr> 
			<td colspan="2">Too many rows, show only first 10</td> 
		</tr> 
		</ui:fragment> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
		</tr> 
		<ui:repeat value="#{tableWithDynamicHeadersBean.rows}" var="row"> 
			<tr> 
				<td><ice:outputText value="#{row.name}" /></td> 
				<td><ice:outputText value="#{row.phone}" /></td> 
			</tr> 
		</ui:repeat> 
	</table> 

This is main entry point. Its referenced by 'tableWithDynamicHeadersBean' from faces-config.xml
com.gpost.jsfexamples.tableWithDynamicHeaders.TableWithDynamicHeadersBean

package com.gpost.jsfexamples.tableWithDynamicHeaders;

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

import com.gpost.jsfexamples.tableWithDeleteOnClick.ManWithPhone;

/*
* Java class for example 'table with dynamic headers'
* referenced as 'tableWithDynamicHeadersBean' from faces-config.xml, 
* used in 'TableWithDynamicHeaders.jspx'
*/
public class TableWithDynamicHeadersBean{

	List<ManWithPhone> rows = null;
	
	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 int getSize() {
		return getRows().size();
	}

} // end of class

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

package com.gpost.jsfexamples.tableWithDynamicHeaders;

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

	String name;
	
	String phone;

	String creditCard;
	
	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 getCreditCard() {
		return creditCard;
	}

	public void setCreditCard(String creditCard) {
		this.creditCard = creditCard;
	}


}

part of faces-config.xml

<managed-bean>
 <managed-bean-name>tableWithDynamicHeadersBean</managed-bean-name>
 <managed-bean-class>com.gpost.jsfexamples.tableWithDynamicHeaders.TableWithDynamicHeadersBean</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 dynamic headers 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.

how to create table with dynamic columns with jsf, icefaces, java and html

Explanation
In many cases columns in table takes too many place of some columns are not to be shown to specific users.

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 TableWithDynamicColumns.jspx

	<table> 
		<caption>table with dynamic columns</caption> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
			<!-- third column is dynamic --> 
			<ui:fragment rendered="#{tableWithDynamicColumnsBean.showCreditCard}"> 
				<td>Credit card</td> 
			</ui:fragment> 
		</tr> 
		<ui:repeat value="#{tableWithDynamicColumnsBean.rows}" var="row"> 
			<tr> 
				<td><ice:outputText value="#{row.name}" /></td> 
				<td><ice:outputText value="#{row.phone}" /></td> 
				<!-- third column is dynamic --> 
				<ui:fragment 
					rendered="#{tableWithDynamicColumnsBean.showCreditCard}"> 
					<td><ice:outputText value="#{row.creditCard}" /></td> 
				</ui:fragment> 
			</tr> 
		</ui:repeat> 
	</table> 

This command link toggle on/off column
fragment from TableWithDynamicColumns.jspx

		<h:commandLink action="#{tableWithDynamicColumnsBean.toggleShowCreditCard}">toggle Credit Card column</h:commandLink> 

You can use othe controls to control columns