Showing posts with label datatable. Show all posts
Showing posts with label datatable. Show all posts

Friday 27 September 2013

JSF2 Datatable sorting example

// siddhu vydyabhushana // 2 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

Thursday 26 September 2013

How to update row in JSF Datatable

// siddhu vydyabhushana // 3 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 // 4 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