Showing posts with label jsf2.0. Show all posts
Showing posts with label jsf2.0. Show all posts

Friday, 27 September 2013

JSF2 Datatable sorting example

// siddhu vydyabhushana // 11 comments
Here’s the idea to sort a JSF dataTable list :

1. Column Header

Put a commandLink in the column header, if this link is clicked, sort the dataTable list.
<h:column>
    <f:facet name="header">
    	<h:commandLink action="#{order.sortByOrderNo}">
    	   Order No
    	</h:commandLink>
    </f:facet>
    #{o.orderNo}
</h:column>

2. Implementation

In the managed bean, uses Collections.sort() and custom comparator to sort the list.
@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{
 
	//sort by order no
	public String sortByOrderNo() {
 
	   Collections.sort(orderArrayList, new Comparator<Order>() {
 
		@Override
		public int compare(Order o1, Order o2) {
 
			return o1.getOrderNo().compareTo(o2.getOrderNo());
 
		}
	   });	
	}
	//...
}

dataTable Sorting example

A JSF 2.0 example to implement the sorting feature in dataTable. Click on the “Order No” column header make the list order by “Order No” in ascending order; Click it again, make the list order by “Order No” in descending order.

1. Managed Bean

A managed bean to provide a dummy list for testing, and shows the use of Collections.sort() to sort the dataTable list.
package com.mkyong;
 
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{
 
	private static final long serialVersionUID = 1L;
 
	private List<Order> orderArrayList;
 
	private boolean sortAscending = true; 
 
	private static final Order[] orderList = {
		new Order("A0002", "Harddisk 100TB", 
				new BigDecimal("500.00"), 3),
		new Order("A0001", "Intel CPU", 
				new BigDecimal("4200.00"), 6),
		new Order("A0004", "Samsung LCD", 
				new BigDecimal("5200.00"), 10),
		new Order("A0003", "Dell Laptop", 
				new BigDecimal("11600.00"), 9),
		new Order("A0005", "A4Tech Mouse", 
				new BigDecimal("200.00"), 20)
	};
 
	public OrderBean(){
 
		orderArrayList = new ArrayList<Order>(Arrays.asList(orderList));
 
	}
 
	public List<Order> getOrderList() {
 
		return orderArrayList;
 
	}
 
	//sort by order no
	public String sortByOrderNo() {
 
	   if(sortAscending){
 
		//ascending order
		Collections.sort(orderArrayList, new Comparator<Order>() {
 
			@Override
			public int compare(Order o1, Order o2) {
 
				return o1.getOrderNo().compareTo(o2.getOrderNo());
 
			}
 
		});
		sortAscending = false;
 
	   }else{
 
		//descending order
		Collections.sort(orderArrayList, new Comparator<Order>() {
 
			@Override
			public int compare(Order o1, Order o2) {
 
				return o2.getOrderNo().compareTo(o1.getOrderNo());
 
			}
 
		});
		sortAscending = true;
	   }
 
	   return null;
	}
 
	public static class Order{
 
		String orderNo;
		String productName;
		BigDecimal price;
		int qty;
 
		public Order(String orderNo, String productName, 
				BigDecimal price, int qty) {
			this.orderNo = orderNo;
			this.productName = productName;
			this.price = price;
			this.qty = qty;
		}
 
		public String getOrderNo() {
			return orderNo;
		}
 
		public void setOrderNo(String orderNo) {
			this.orderNo = orderNo;
		}
 
		public String getProductName() {
			return productName;
		}
 
		public void setProductName(String productName) {
			this.productName = productName;
		}
 
		public BigDecimal getPrice() {
			return price;
		}
 
		public void setPrice(BigDecimal price) {
			this.price = price;
		}
 
		public int getQty() {
			return qty;
		}
 
		public void setQty(int qty) {
			this.qty = qty;
		}
	}
}

2. dataTable Tag

A JSF page, put a commandLink tag in the “Order No” column header, if click, sort the dataTable list.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    <h:head>
    	<h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
 
    	<h1>JSF 2 dataTable sorting example</h1>
		  <h:form>
    		<h:dataTable value="#{order.orderList}" var="o"
    			styleClass="order-table"
    			headerClass="order-table-header"
    			rowClasses="order-table-odd-row,order-table-even-row"
    		>
 
    		<h:column>
    			<f:facet name="header">
    			   <h:commandLink action="#{order.sortByOrderNo}">
    				Order No
    			   </h:commandLink>
    			</f:facet>
    			#{o.orderNo}
    		</h:column>
 
    		<h:column>
    			<f:facet name="header">
    				Product Name
			</f:facet>
    			#{o.productName}
    		</h:column>
 
    		<h:column>
    			<f:facet name="header">Price</f:facet>
    			#{o.price}
    		</h:column>
 
    		<h:column>
    			<f:facet name="header">Quantity</f:facet>
    			#{o.qty}
    		</h:column>
 
    	    </h:dataTable>
    	  </h:form>
    </h:body>
</html>

3. Demo

From top to bottom, shows a dataTable list being sorted in ascending and descending order.
jsf2-dataTable-Sorting-Example-1
jsf2-dataTable-Sorting-Example-2
jsf2-dataTable-Sorting-Example-3

Download Source Code

Download It – JSF-2-DataTable-Sorting-Example.zip (10KB)
 
Read More

JSF 2 Radio Buttons Example

// siddhu vydyabhushana // 3 comments
In JSF, “h:selectOneRadio” tag is used to render a set of HTML input element of type “radio“, and format it with HTML table and label tag.
//JSF...
<h:selectOneRadio value="#{user.favColor1}">
   	<f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
   	<f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
   	<f:selectItem itemValue="Blue" itemLabel="Color1 - Blue" />
</h:selectOneRadio>
 
//HTML output...
<table>
<tr>
  <td>
	<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:0" value="Red" />
	<label for="j_idt6:j_idt8:0"> Color1 - Red</label></td>
  <td>
	<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:1" value="Green" />
	<label for="j_idt6:j_idt8:1"> Color1 - Green</label></td>
  <td>
	<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:2" value="Blue" />
	<label for="j_idt6:j_idt8:2"> Color1 - Blue</label>
  </td>
</tr>
</table>

JSF 2.0 “h:selectOneRadio” example

A JSF 2.0 example to show the use of “h:selectOneRadio” tag to render radio buttons, and populate the data in 3 different ways :
  1. Hardcoded values in “f:selectItem” tag.
  2. Generate values with a Map and put it into “f:selectItems” tag.
  3. Generate values with an Object array and put it into “f:selectItems” tag, then represent the value with a “var” attribute.

1. Backing Bean

A backing bean to hold the submitted data.
package com.mkyong;
 
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
	public String favColor1;
	public String favColor2;
	public String favColor3;
 
	//getter and setter methods 
 
	//Generated by Map
	private static Map<String,Object> color2Value;
	static{
		color2Value = new LinkedHashMap<String,Object>();
		color2Value.put("Color2 - Red", "Red"); //label, value
		color2Value.put("Color2 - Green", "Green");
		color2Value.put("Color3 - Blue", "Blue");
	}
 
	public Map<String,Object> getFavColor2Value() {
		return color2Value;
	}
 
	//Generated by Object array
	public static class Color{
		public String colorLabel;
		public String colorValue;
 
		public Color(String colorLabel, String colorValue){
			this.colorLabel = colorLabel;
			this.colorValue = colorValue;
		}
 
		public String getColorLabel(){
			return colorLabel;
		}
 
		public String getColorValue(){
			return colorValue;
		}
 
	}
 
	public Color[] color3List;
 
	public Color[] getFavColor3Value() {
 
		color3List = new Color[3];
		color3List[0] = new Color("Color3 - Red", "Red");
		color3List[1] = new Color("Color3 - Green", "Green");
		color3List[2] = new Color("Color3 - Blue", "Blue");
 
		return color3List;
	}
 
}

2. JSF Page

A JSF page to demonstrate the use “h:selectOneRadio” tag.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:body>
 
    	<h1>JSF 2 radio button example</h1>
    	<h:form>
 
	        1. Hard-coded with "f:selectItem" : 
   		<h:selectOneRadio value="#{user.favColor1}">
   			<f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
   			<f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
   			<f:selectItem itemValue="Blue" itemLabel="Color1 - Blue" />
   		</h:selectOneRadio>
 
   		<br />
 
	        2. Generated by Map :
   		<h:selectOneRadio value="#{user.favColor2}">
   			<f:selectItems value="#{user.favColor2Value}" />
   		</h:selectOneRadio>
 
	        <br />
 
	         3. Generated by Object array and iterate with var :
   		<h:selectOneRadio value="#{user.favColor3}">
   			<f:selectItems value="#{user.favColor3Value}" var="c"
   			itemLabel="#{c.colorLabel}" itemValue="#{c.colorValue}" />
   		</h:selectOneRadio>
 
	        <br />
 
    	        <h:commandButton value="Submit" action="result" />
		<h:commandButton value="Reset" type="reset" />
 
    	</h:form>
    </h:body>
</html>
result.xhtml…
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      >
    <h:body>
 
    	<h1>JSF 2 radio button example</h1>
 
    	<h2>result.xhtml</h2>
 
    	<ol>
    		<li>user.favColor1 : #{user.favColor1}</li>
    		<li>user.favColor2 : #{user.favColor2}</li>
    		<li>user.favColor3 : #{user.favColor3}</li>
    	</ol>
    </h:body>
</html>

3. Demo

jsf2-radio-button-example-1
When “submit” button is clicked, link to “result.xhtml” and display the submitted radio button values.
jsf2-radio-button-example-2

How to select radio button value by default?

In JSF, the radio button values of “f:selectItems” tag is selected if it matched to the “value” of “h:selectOneRadio” tag. In above example, if you set favColor2 to “Red” :
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
	public String[] favColor = "Red";
 
	//...
The “favColor2″ radio button, “Red” option is selected by default.

Download Source Code

Download It – JSF-2-RadioButtons-Example.zip (10KB)
 
Read More

Thursday, 26 September 2013

How to update row in JSF Datatable

// siddhu vydyabhushana // 7 comments
This example is enhancing the previous JSF 2 dataTable example, by adding a “update” function to update row in dataTable.

Update Concept

The overall concept is quite simple :
1. Add a “ediatble” property to keep track the row edit status.
//...
public class Order{
 
	String orderNo;
	String productName;
	BigDecimal price;
	int qty;
 
	boolean editable;
 
	public boolean isEditable() {
		return editable;
	}
	public void setEditable(boolean editable) {
		this.editable = editable;
	}
2. Assign a “Edit” link to the end of each row, if clicked, set “ediatble” = true. In JSF 2.0, you can provide the parameter values in the method expression directly, see the edit action below :
//...
<h:dataTable value="#{order.orderList}" var="o">
 
<h:column>
 
    	<f:facet name="header">Action</f:facet>
 
    	<h:commandLink value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}" />
 
</h:column>
//...
public String editAction(Order order) {
 
	order.setEditable(true);
	return null;
}
3. In JSF page, if “ediatble” = true, display the input text box for edit; Otherwise just display the normal output text. A simple trick to simulate the update effect :)
//...
<h:dataTable value="#{order.orderList}" var="o">
 
<h:column>
 
    <f:facet name="header">Order No</f:facet>
 
    <h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />
 
    <h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />
 
</h:column>
4. Finally, provide a button to save your changes. When you make changes in the input text box and save it, all values will bind to the associated backing bean automatically.
//...
<h:commandButton value="Save Changes" action="#{order.saveAction}" />
</h:column>

Example

A JSF 2.0 example to implement the above concept to update row in dataTable.

1. Managed Bean

A managed bean named “order”, self-explanatory.
package com.mkyong;
 
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{
 
	private static final long serialVersionUID = 1L;
 
	private static final ArrayList<Order> orderList = 
		new ArrayList<Order>(Arrays.asList(
 
		new Order("A0001", "Intel CPU", 
				new BigDecimal("700.00"), 1),
		new Order("A0002", "Harddisk 10TB", 
				new BigDecimal("500.00"), 2),
		new Order("A0003", "Dell Laptop", 
				new BigDecimal("11600.00"), 8),
		new Order("A0004", "Samsung LCD", 
				new BigDecimal("5200.00"), 3),
		new Order("A0005", "A4Tech Mouse", 
				new BigDecimal("100.00"), 10)
	));
 
	public ArrayList<Order> getOrderList() {
		return orderList;
	}
 
	public String saveAction() {
 
		//get all existing value but set "editable" to false 
		for (Order order : orderList){
			order.setEditable(false);
		}
		//return to current page
		return null;
 
	}
 
	public String editAction(Order order) {
 
		order.setEditable(true);
		return null;
	}
 
	public static class Order{
 
		String orderNo;
		String productName;
		BigDecimal price;
		int qty;
		boolean editable;
 
		public Order(String orderNo, String productName, BigDecimal price, int qty) {
			this.orderNo = orderNo;
			this.productName = productName;
			this.price = price;
			this.qty = qty;
		}
 
		//getter and setter methods
	}
}

2. JSF page

JSF page to display the data with dataTable tag, and create a “edit” link to update the row record.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
    	<h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
 
    	<h1>JSF 2 dataTable example</h1>
    	<h:form>
    	   <h:dataTable value="#{order.orderList}" var="o"
    		styleClass="order-table"
    		headerClass="order-table-header"
    		rowClasses="order-table-odd-row,order-table-even-row"
    	   >
 
    	     <h:column>
 
                <f:facet name="header">Order No</f:facet>
 
    		<h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />
 
    		<h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />
 
    	     </h:column>
 
    	     <h:column>
 
    		<f:facet name="header">Product Name</f:facet>
 
    		<h:inputText value="#{o.productName}" size="20" rendered="#{o.editable}" />
 
    		<h:outputText value="#{o.productName}" rendered="#{not o.editable}" />
 
    	     </h:column>
 
    	     <h:column>
 
    		<f:facet name="header">Price</f:facet>
 
    		<h:inputText value="#{o.price}" size="10" rendered="#{o.editable}" />
 
    		<h:outputText value="#{o.price}" rendered="#{not o.editable}" />
 
    	     </h:column>
 
    	     <h:column>
 
    		<f:facet name="header">Quantity</f:facet>
 
    		<h:inputText value="#{o.qty}" size="5" rendered="#{o.editable}" />
 
    		<h:outputText value="#{o.qty}" rendered="#{not o.editable}" />
 
    	     </h:column>
 
    	     <h:column>
 
    		<f:facet name="header">Action</f:facet>
 
    		<h:commandLink value="Edit" action="#{order.editAction(o)}" 
                                       rendered="#{not o.editable}" />
 
    	     </h:column>
 
    	  </h:dataTable>
 
    	  <h:commandButton value="Save Changes" action="#{order.saveAction}" />
 
      </h:form>
    </h:body>	
</html>

3. Demo

From top to bottom, shows a row record being updated.
jsf2-dataTable-Update-Example-1
jsf2-dataTable-Update-Example-2
jsf2-dataTable-Update-Example-3
jsf2-dataTable-Update-Example-4

Download Source Code

Download It – JSF-2-DataTable-Update-Example.zip (10KB)
Read More

How to display datatable row number in JSF

// siddhu vydyabhushana // 9 comments
JSF dataTable does not contains any method to display the currently selected row numbers. However, you can hack it with javax.faces.model.DataModel class, which has a getRowIndex() method to return the currently selected row number.

JSF + DataModel

Here’s a JSF 2.0 example to show you how to use DataModel to return the currently selected row number.

1. Managed Bean

A managed bean named “person”, and show the use of DataModel to hold a list of the person object.
package com.mkyong;
 
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.model.ArrayDataModel;
import javax.faces.model.DataModel;
 
@ManagedBean(name="person")
@SessionScoped
public class PersonBean implements Serializable{
 
	private static final long serialVersionUID = 1L;
 
	private static final Person[] personList = new Person[]{
 
		new Person("Person", "A", 10),
		new Person("Person", "B", 20),
		new Person("Person", "C", 30),
		new Person("Person", "D", 40),
		new Person("Person", "E", 50)
 
	};
 
	/* To get the row numbers, use dataModel instead
	public Person[] getPersonList() {
 
		return personList;
 
	}
	*/
 
	private DataModel<Person> person = new ArrayDataModel<Person>(personList);
 
	public DataModel<Person> getPersonList() {
 
		return person;
 
	}
 
	public static class Person{
 
		String firstName;
		String lastName;
		int age;
 
		public Person(String firstName, String lastName, int age) {
			super();
			this.firstName = firstName;
			this.lastName = lastName;
			this.age = age;
		}
 
		//getter and setter methods 
	}
}

2. JSF Page

JSP page to show the use of DataModel “rowIndex” to return 0-indexed of the currently selected row number.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
    	<h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
 
    	<h1>Display dataTable row numbers in JSF</h1>
 
    	   <h:dataTable value="#{person.personList}" var="p"
    		styleClass="person-table"
    		headerClass="person-table-header"
    		rowClasses="person-table-odd-row,person-table-even-row"
    	   >
 
		<h:column>
 
    			<!-- display currently selected row number -->
    			<f:facet name="header">No</f:facet>
    			#{person.personList.rowIndex + 1}
 
    		</h:column>
 
    		<h:column>
 
    			<f:facet name="header">First Name</f:facet>
    			#{p.firstName}
 
    		</h:column>
 
    		<h:column>
 
    			<f:facet name="header">Last Name</f:facet>
    			#{p.lastName}
 
    		</h:column>
 
    		<h:column>
 
    			<f:facet name="header">Age</f:facet>
    			#{p.age}
 
    		</h:column>
 
    	   </h:dataTable>
 
    </h:body>
</html>

3. Demo

jsf2-dataTable-RowNumbers-Example

Download Source Code

 
Read More

How to delete row in JSF Datatable

// siddhu vydyabhushana // 6 comments
This example is enhancing the previous JSF 2 dataTable example, by adding a “delete” function to delete the row in dataTable.

Delete Concept

The overall concept is quite simple :
1. Assign a “Delete” link to the end of each row.
//...
<h:dataTable value="#{order.orderList}" var="o">
 
<h:column>
 
    <f:facet name="header">Action</f:facet>
 
    <h:commandLink value="Delete" action="#{order.deleteAction(o)}" />
 
</h:column>
2. If “Delete” link is clicked, pass the current row object into the deleteAction(). In deleteAction() method, just removes the current row object from the “list” and return back to the current page.
public String deleteAction(Order order) {
 
	orderList.remove(order);
	return null;
}

Example

A JSF 2.0 example to implement the above concept to delete row in dataTable.

1. Managed Bean

A managed bean named “order”, self-explanatory.
package com.mkyong;
 
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{
 
	private static final long serialVersionUID = 1L;
 
	private static final ArrayList<Order> orderList = 
		new ArrayList<Order>(Arrays.asList(
 
		new Order("A0001", "Intel CPU", 
				new BigDecimal("700.00"), 1),
		new Order("A0002", "Harddisk 10TB", 
				new BigDecimal("500.00"), 2),
		new Order("A0003", "Dell Laptop", 
				new BigDecimal("11600.00"), 8),
		new Order("A0004", "Samsung LCD", 
				new BigDecimal("5200.00"), 3),
		new Order("A0005", "A4Tech Mouse", 
				new BigDecimal("100.00"), 10)
	));
 
	public ArrayList<Order> getOrderList() {
 
		return orderList;
 
	}
 
	public String deleteAction(Order order) {
 
		orderList.remove(order);
		return null;
	}
 
	public static class Order{
 
		String orderNo;
		String productName;
		BigDecimal price;
		int qty;
 
		public Order(String orderNo, String productName, 
				BigDecimal price, int qty) {
			this.orderNo = orderNo;
			this.productName = productName;
			this.price = price;
			this.qty = qty;
		}
 
		//getter and setter methods
	}
}

2. JSF page

JSF page to display the data with dataTable tag, and create a “delete” link to delete the row record.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
    	<h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
 
    	<h1>JSF 2 dataTable example</h1>
    	<h:form>
    		<h:dataTable value="#{order.orderList}" var="o"
    			styleClass="order-table"
    			headerClass="order-table-header"
    			rowClasses="order-table-odd-row,order-table-even-row"
    		>
 
    		<h:column>
 
    			<f:facet name="header">Order No</f:facet>
    			#{o.orderNo}
 
    		</h:column>
 
    		<h:column>
 
    			<f:facet name="header">Product Name</f:facet>
    			#{o.productName}
 
    		</h:column>
 
    		<h:column>
 
    			<f:facet name="header">Price</f:facet>
    			#{o.price}
 
    		</h:column>
 
    		<h:column>
 
    			<f:facet name="header">Quantity</f:facet>
    			#{o.qty}
 
    		</h:column>
 
    		<h:column>
 
    			<f:facet name="header">Action</f:facet>
 
    			<h:commandLink value="Delete" 
                                action="#{order.deleteAction(o)}" />
 
    		</h:column>
 
    		</h:dataTable>
 
    	</h:form>
    </h:body>
</html>

3. Demo

From top to bottom, shows a row record being deleted.
jsf2-dataTable-Delete-Example-1
jsf2-dataTable-Delete-Example-2

Download Source Code

Download It – JSF-2-DataTable-Delete-Example.zip (10KB)
Read More