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

Thursday 26 September 2013

How to add row in JSF Table

// siddhu vydyabhushana // 3 comments
This example is enhancing previous delete dataTable row example, by adding a “add” function to add a row in dataTable.
Here’s a JSF 2.0 example to show you how to add a 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;
 
	String orderNo;
	String productName;
	BigDecimal price;
	int qty;
 
	//getter and setter methods
 
	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 addAction() {
 
		Order order = new Order(this.orderNo, this.productName, 
			this.price, this.qty);
 
		orderList.add(order);
		return null;
	}
 
	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 a entry form to key in the order data.
<?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>
 
    		<h3>Enter Order</h3>
    		<table>
    		<tr>
    			<td>Order No :</td>
    			<td><h:inputText size="10" value="#{order.orderNo}" /></td>
    		</tr>
    		<tr>
    			<td>Product Name :</td>
    			<td><h:inputText size="20" value="#{order.productName}" /></td>
    		</tr>
    		<tr>
    			<td>Quantity :</td>
    			<td><h:inputText size="5" value="#{order.price}" /></td>
    		</tr>
    		<tr>
    			<td>Price :</td>
    			<td><h:inputText size="10" value="#{order.qty}" /></td>
    		</tr>
    		</table>
 
    		<h:commandButton value="Add" action="#{order.addAction}" />
 
    	</h:form>
    </h:body>
</html>

3. Demo

From top to bottom, shows a row record being added.
jsf2-dataTable-Add-Example-1
jsf2-dataTable-Add-Example-2
jsf2-dataTable-Add-Example-3

Download Source Code

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

Wednesday 25 September 2013

JSF Dropdown Example

// siddhu vydyabhushana // 3 comments
In JSF, <h:selectOneMenu /> tag is used to render a dropdown box – HTML select element with “size=1” attribute.
//JSF...
<h:selectOneMenu value="#{user.favCoffee1}">
   	<f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" />
   	<f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" />
   	<f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" />
</h:selectOneMenu>
 
//HTML output...
<select name="j_idt6:j_idt8" size="1">	
	<option value="Cream Latte">Coffee3 - Cream Latte</option> 
	<option value="Extreme Mocha">Coffee3 - Extreme Mocha</option> 
	<option value="Buena Vista">Coffee3 - Buena Vista</option> 
</select>

h:selectOneMenu example

A JSF 2.0 example to show the use of “h:selectOneMenu” tag to render a dropdow box, and populate the data in 3 different ways :
  1. Hardcoded value 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 “var” attribute.

1. Backing Bean

A backing bean to hold and generate data for the dropdown box values.
package com.mkyong;
 
import java.io.Serializable;
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 implements Serializable{
 
	public String favCoffee1;
	public String favCoffee2;
	public String favCoffee3;
 
	public String getFavCoffee1() {
		return favCoffee1;
	}
 
	public void setFavCoffee1(String favCoffee1) {
		this.favCoffee1 = favCoffee1;
	}
 
	public String getFavCoffee2() {
		return favCoffee2;
	}
 
	public void setFavCoffee2(String favCoffee2) {
		this.favCoffee2 = favCoffee2;
	}
 
	public String getFavCoffee3() {
		return favCoffee3;
	}
 
	public void setFavCoffee3(String favCoffee3) {
		this.favCoffee3 = favCoffee3;
	}
 
	//Generated by Map
	private static Map<String,Object> coffee2Value;
	static{
		coffee2Value = new LinkedHashMap<String,Object>();
		coffee2Value.put("Coffee2 - Cream Latte", "Cream Latte"); //label, value
		coffee2Value.put("Coffee2 - Extreme Mocha", "Extreme Mocha");
		coffee2Value.put("Coffee2 - Buena Vista", "Buena Vista");
	}
 
	public Map<String,Object> getFavCoffee2Value() {
		return coffee2Value;
	}
 
	//Generated by Object array
	public static class Coffee{
		public String coffeeLabel;
		public String coffeeValue;
 
		public Coffee(String coffeeLabel, String coffeeValue){
			this.coffeeLabel = coffeeLabel;
			this.coffeeValue = coffeeValue;
		}
 
		public String getCoffeeLabel(){
			return coffeeLabel;
		}
 
		public String getCoffeeValue(){
			return coffeeValue;
		}
 
	}
 
	public Coffee[] coffee3List;
 
	public Coffee[] getFavCoffee3Value() {
 
		coffee3List = new Coffee[3];
		coffee3List[0] = new Coffee("Coffee3 - Cream Latte", "Cream Latte");
		coffee3List[1] = new Coffee("Coffee3 - Extreme Mocha", "Extreme Mocha");
		coffee3List[2] = new Coffee("Coffee3 - Buena Vista", "Buena Vista");
 
		return coffee3List;
 
	}
 
}

2. JSF Page

A JSF page to demonstrate the use “h:selectOneMenu” 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 dropdown box example</h1>
    	<h:form>
 
	    1. Hard-coded with "f:selectItem" : 
   		<h:selectOneMenu value="#{user.favCoffee1}">
   			<f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" />
   			<f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" />
   			<f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" />
   		</h:selectOneMenu>
 
		<br /><br />
 
	    2. Generated by Map :
   		<h:selectOneMenu value="#{user.favCoffee2}">
   			<f:selectItems value="#{user.favCoffee2Value}" />
   		</h:selectOneMenu>
 
	        <br /><br />
 
	    3. Generated by Object array and iterate with var :
   		<h:selectOneMenu value="#{user.favCoffee3}">
   			<f:selectItems value="#{user.favCoffee3Value}" var="c"
   			itemLabel="#{c.coffeeLabel}" itemValue="#{c.coffeeValue}" />
   		</h:selectOneMenu>
 
	        <br /><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 dropdown box example</h1>
 
    	<h2>result.xhtml</h2>
 
    	<ol>
    		<li>user.favCoffee1 : #{user.favCoffee1}</li>
    		<li>user.favCoffee2 : #{user.favCoffee2}</li>
    		<li>user.favCoffee3 : #{user.favCoffee3}</li>
    	</ol>
    </h:body>
 
</html>

3. Demo

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

How to pre-select a dropdown box value?

The value of “f:selectItems” tag is selected if it matched to the “value” of “h:selectOneMenu” tag. In above example, if you set “favCoffee1″ property to “Extreme Mocha” :
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
	public String favCoffee1 = "Extreme Mocha";
 
	//...
The “favCoffee1″ dropdown box, values “Extreme Mocha” is selected by default.

Download Source Code

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

JSF2 Listbox Example

// siddhu vydyabhushana // 1 comment
In JSF, <h:selectOneListbox /> tag is used to render a single select listbox – HTML select element with “size” attribute.
//JSF...
<h:selectOneListbox value="#{user.favYear1}">
   	<f:selectItem itemValue="2000" itemLabel="Year1 - 2000" />
   	<f:selectItem itemValue="2010" itemLabel="Year1 - 2010" />
   	<f:selectItem itemValue="2020" itemLabel="Year1 - 2020" />
</h:selectOneListbox>
 
//HTML output...
<select name="j_idt6:j_idt8" size="3">	
	<option value="2000">Year1 - 2000</option> 
	<option value="2010">Year1 - 2010</option> 
	<option value="2020">Year1 - 2020</option> 
</select>

h:selectOneListbox example

A JSF 2.0 example to show the use of “h:selectOneListbox” tag to render a single select listbox, and populate the data in 3 different ways :
  1. Hardcoded value 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 “var” attribute.

1. Backing Bean

A backing bean to hold and generate data for listbox values.
package com.mkyong;
 
import java.io.Serializable;
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 implements Serializable{
 
	public String favYear1;
	public String favYear2;
	public String favYear3;
 
	//getter and setter methods
 
	//Generated by Map
	private static Map<String,Object> year2Value;
	static{
		year2Value = new LinkedHashMap<String,Object>();
		year2Value.put("Year2 - 2000", "2000"); //label, value
		year2Value.put("Year2 - 2010", "2010");
		year2Value.put("Year2 - 2020", "2020");
	}
 
	public Map<String,Object> getFavYear2Value() {
		return year2Value;
	}
 
	//Generated by Object array
	public static class Year{
		public String yearLabel;
		public String yearValue;
 
		public Year(String yearLabel, String yearValue){
			this.yearLabel = yearLabel;
			this.yearValue = yearValue;
		}
 
		public String getYearLabel(){
			return yearLabel;
		}
 
		public String getYearValue(){
			return yearValue;
		}
 
	}
 
	public Year[] year3List;
 
	public Year[] getFavYear3Value() {
 
		year3List = new Year[3];
		year3List[0] = new Year("Year3 - 2000", "2000");
		year3List[1] = new Year("Year3 - 2010", "2010");
		year3List[2] = new Year("Year3 - 2020", "2020");
 
		return year3List;
	}
 
}

2. JSF Page

A JSF page to demonstrate the use “h:selectOneListbox” 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 listbox example</h1>
    	<h:form>
 
	        1. Hard-coded with "f:selectItem" : 
   		<h:selectOneListbox value="#{user.favYear1}">
   			<f:selectItem itemValue="2000" itemLabel="Year1 - 2000" />
   			<f:selectItem itemValue="2010" itemLabel="Year1 - 2010" />
   			<f:selectItem itemValue="2020" itemLabel="Year1 - 2020" />
   		</h:selectOneListbox>
 
   		<br />
 
	        2. Generated by Map :
   		<h:selectOneListbox value="#{user.favYear2}">
   			<f:selectItems value="#{user.favYear2Value}" />
   		</h:selectOneListbox>
 
	        <br />
 
	        3. Generated by Object array and iterate with var :
   		<h:selectOneListbox value="#{user.favYear3}">
   			<f:selectItems value="#{user.favYear3Value}" var="y"
   			itemLabel="#{y.yearLabel}" itemValue="#{y.yearValue}" />
   		</h:selectOneListbox>
 
	        <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 listbox example</h1>
 
    	<h2>result.xhtml</h2>
 
    	<ol>
    		<li>user.favYear1 : #{user.favYear1}</li>
    		<li>user.favYear2 : #{user.favYear2}</li>
    		<li>user.favYear3 : #{user.favYear3}</li>
    	</ol>
    </h:body>
 
</html>

3. Demo

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

How to pre-select a listbox value?

The value of “f:selectItems” tag is selected if it matched to the “value” of “h:selectOneListbox” tag. In above example, if you set favYear1 property to “2010″ :
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
	public String favYear1 = "2010";
 
	//...
The “favYear1″ listbox, value “2010″ is selected by default.

Download Source Code

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

Conditional Navigation rule in JSF2.0

// siddhu vydyabhushana // 4 comments
JSF 2 comes with a very flexible conditional navigation rule to solve the complex page navigation flow, see the following conditional navigation rule example :

1. JSF Page

A simple JSF page, with a button to move from this page to the payment page.
start.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>
    	<h2>This is start.xhtml</h2>
	<h:form>
    	   <h:commandButton action="payment" value="Payment" />
	</h:form>
    </h:body>
</html>

2. Managed Bean

A managed bean to provide sample data to perform the conditional checking in the navigation rule.
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped; 
import java.io.Serializable;
 
@ManagedBean
@SessionScoped
public class PaymentController implements Serializable {
 
	private static final long serialVersionUID = 1L;
 
	public boolean registerCompleted = true;
	public int orderQty = 99;
 
	//getter and setter methods
}

3. Conditional Navigation Rule

Normally, you declared the simple navigation rule in the “faces-config.xml” like this :
<navigation-rule>
	<from-view-id>start.xhtml</from-view-id>
	<navigation-case>
		<from-outcome>payment</from-outcome>
		<to-view-id>payment.xhtml</to-view-id>
	</navigation-case>
</navigation-rule>
With JSF 2, you can add some conditional checking before it move to the payment page, see following :
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
    version="2.0">
 
	<navigation-rule>
		<from-view-id>start.xhtml</from-view-id>
		<navigation-case>
			<from-outcome>payment</from-outcome>
			<if>#{paymentController.orderQty &lt; 100}</if>
			<to-view-id>ordermore.xhtml</to-view-id>
		</navigation-case>
		<navigation-case>
			<from-outcome>payment</from-outcome>
			<if>#{paymentController.registerCompleted}</if>
			<to-view-id>payment.xhtml</to-view-id>
		</navigation-case>
		<navigation-case>
			<from-outcome>payment</from-outcome>
			<to-view-id>register.xhtml</to-view-id>
		</navigation-case>
	</navigation-rule>
 
</faces-config>
This is equal to the following Java code :
if (from-view-id == "start.xhtml"){
 
   if(from-outcome == "payment"){
 
      if(paymentController.orderQty < 100){
	  return "ordermore";
      }else if(paymentController.registerCompleted){
	  return "payment";
      }else{
	  return "register";
      }
 
   }
 
}
The code should be self explanatory enough.
Note
In the conditional navigation rule, the sequence of the navigation rule does affect the navigation flow, always put the highest checking priority in the top.

4. Testing

Different data sets for testing :
Example 1
public class PaymentController implements Serializable {
 
	public boolean registerCompleted = true;
	public int orderQty = 99;
	...
When the button is clicked, it hits the “paymentController.orderQty < 100” criteria and move to the “ordermore.xhtml” page.
Example 2
public class PaymentController implements Serializable {
 
	public boolean registerCompleted = true;
	public int orderQty = 200;
	...
When the button is clicked, it hits the “paymentController.registerCompleted” criteria and move to the “payment.xhtml” page.
Example 3
public class PaymentController implements Serializable {
 
	public boolean registerCompleted = false;
	public int orderQty = 200;
	...
When the button is clicked, it failed all the checking criteria and move to the “register.xhtml” page.

Suggestion

In JSF 2.0, there is no “else” tag in the conditional navigation rule, wish JSF team can include the “else” tag in the future release. For example,
   <navigation-rule>
	<from-view-id>start.xhtml</from-view-id>
	<navigation-case>
		<from-outcome>payment</from-outcome>
		<if>#{paymentController.orderQty &lt; 100}</if>
			<to-view-id>ordermore.xhtml</to-view-id>
		<else if>#{paymentController.registerCompleted}</else if>
			<to-view-id>payment.xhtml</to-view-id>
		<else>
			<to-view-id>register.xhtml</to-view-id>
	</navigation-case>
   </navigation-rule>
Moreover, It should include the multiple conditional checking as well, like this
   <navigation-rule>
	<from-view-id>start.xhtml</from-view-id>
	<navigation-case>
		<from-outcome>payment</from-outcome>
		<if>#{paymentController.orderQty &lt; 100} && #{paymentController.xxx}</if>
			<to-view-id>ordermore.xhtml</to-view-id>
		<else if>#{paymentController.registerCompleted}</else if>
			<to-view-id>payment.xhtml</to-view-id>
		<else>
			<to-view-id>register.xhtml</to-view-id>
	</navigation-case>
   </navigation-rule>
Thought…
JSF 2 conditional navigation rule, … quite similar with the Spring Web Flow, right? :)

Download Source Code

 
Read More

How to run JSF2.0 on Eclipse IDE

// siddhu vydyabhushana // Leave a Comment
In Eclipse Ganymede (v3.4) or Galileo (v3.5), it supports until JSF 1.2 only. For JSF 2.0, upgrade your Eclipse to version Helios (v3.6) onward, it has full support of Java EE 6 support, including JSF 2.0.
Here’s a quick guide to show you how to enable JSF 2.0 features like code assist and visual JSF component editor in Eclipse IDE.
Tools Used
  1. Eclipse 3.6
  2. JSF 2.0.x

1. Eclipse Project Facets

To support JSF 2.0, you need to configure Eclipse project to support Web Tools Platform (WTP).
Steps to enable the Web Tools Platform (WTP) :
  1. Right click on the project, choose “properties” –> “Project Facets“.
  2. Check “Dynamic Web Module“, select version 2.5.
  3. Check “Java“, choose version 1.6.
  4. Check “JavaServer Faces“, choose version 2.0.
    eclipse-jsf-support
  5. Click on the “further configuration…” link below to do the JSF configuration.
  6. Create an user library and include the JSF 2.0 API and implementation libraries, jsf-api-xxx.jar and jsf-impl-xxx.jar.
    P.S You can get the JSF jars official JSF website.

    2. Demo

    Now, Eclipse IDE is supporting the JSF 2.0 capabilities. Try it, in .xhtml file, click on the “Ctrl + Space“, it will prompts all available JSF 2.0 tags (code assist) automatically.
    Furthermore, it add JSF 2.0 visual components to the web page editor as well, see figure below :
    eclipse-jsf-support
    eclipse-jsf-support
Read More