Example for custom loop jsf component with zebra style and index

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

Table and other controls are better when inner components displayed in different styles, on 'mod' style or 'zebra style' Lets see how to do it without complexity, compact and easy way.
This simple yet important features are difficult to implement with "ui:repeat" tag
Instead of ui:repeat, use custom "loop" component.
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 example, its easy!
fragment from LoopWithZebraStyleAndIndex.jspx

	 <style> 
	 .zebraStyle0 { 
	 	background-color: gray; 
	 } 
	 .zebraStyle1 { 
	 	background-color: blue; 
	 } 
	 .zebraStyle2 { 
	 	background-color: navy; 
	 } 
	 </style> 
	<table> 
		<caption>Loop with zebra style and index</caption> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
			<td>Index</td> 
		</tr> 
		<iceext:loop value="#{loopWithZebraStyleAndIndexBean.rows}" var="row" rowIndexVar="rowIndexVar" varMod="mod3" modValue="3"> 
			<tr class="zebraStyle#{mod3}"> 
				<td><ice:outputText value="#{row.name}" /></td> 
				<td><ice:outputText value="#{row.phone}" /></td> 
				<td><ice:outputText value="#{rowIndexVar}" /></td> 
			</tr> 
		</iceext:loop> 
	</table> 

This is main entry point. Its referenced by 'loopWithZebraStyleAndIndexBean' from faces-config.xml
com.gpost.jsfexamples.loopWithZebraStyleAndIndex.LoopWithZebraStyleAndIndexBean

package com.gpost.jsfexamples.loopWithZebraStyleAndIndex;

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


/*
* Java class for example 'Loop with zebra style and index'
* referenced as 'loopWithZebraStyleAndIndexBean' from faces-config.xml, 
* used in 'LoopWithZebraStyleAndIndex.jspx'
*/
public class LoopWithZebraStyleAndIndexBean{

	List<ManWithPhone> rows = null;
	
	public List<ManWithPhone> getRows() {
		if (rows == null) {
			rows = new ArrayList<ManWithPhone>();
			// 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"));
			rows.add(new ManWithPhone("John1", "5698-4333"));
			rows.add(new ManWithPhone("John2", "5698-4333"));
			rows.add(new ManWithPhone("John3", "5698-4333"));
			rows.add(new ManWithPhone("John4", "5698-4333"));
		}
		return rows;
	}



} // end of class

This class defines data in 'row'.
com.gpost.jsfexamples.loopWithZebraStyleAndIndex.ManWithPhone

package com.gpost.jsfexamples.loopWithZebraStyleAndIndex;

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>loopWithZebraStyleAndIndexBean</managed-bean-name>
 <managed-bean-class>com.gpost.jsfexamples.loopWithZebraStyleAndIndex.LoopWithZebraStyleAndIndexBean</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>

</managed-bean>

conclusion
As we saw in this example, you can use loop with simple html/css, then add some binding to your java beans and you get very flexible, easily customizable layout with more features like paging, indexing, and mod variables.