Page History

...

Start the eclipse wizard and right click on the Project Explorer and click on the New -> Dynamic Web Project
Enter the project name as EmployeeWEB and click on the Next button.
On the New Dynamic Web Project wizard, check on the Project Facet checkboxes and select the version values as below screen shot, and click on the Next button.
On the Web Module wizard, make sure that Generate Deployment Descriptor is checked as below and click on the Next button.
On the Geronimo Deployment Plan wizard, provide the moduleId values as below screen shot and click on the Next button.
On the JSF Capabilities wizard, check the second radio button and click on the New button by the side of the combo box. This will open Create JSF Implementation Library wizard.
Provide the Library Name as MyJSFLibrary and add the following jars by clicking on the Add button. Finally, click on the Finish button.
- <geronimo_home>\repository\commons-beanutils\commons-beanutils\1.7.0\commons-beanutils-1.7.0.jar
- <geronimo_home>\repository\commons-collections\commons-collections\3.2\commons-collections-3.2.jar
- <geronimo_home>\repository\commons-digester\commons-digester\1.8\commons-digester-1.8.jar
- <geronimo_home>\repository\commons-logging\commons-logging\1.0.4\commons-logging-1.0.4.jar
- <geronimo_home>\repository\org\apache\myfaces\core\myfaces-api\1.2.6\myfaces-api-1.2.6.jar
- <geronimo_home>\repository\org\apache\myfaces\core\myfaces-impl\1.2.6\myfaces-impl-1.2.6.jar
Now, on the JSF Capabilities wizard, add the URL Mapping Patterns as *.jsf and click on the Finish button.
This will create EmployeeWEB application in the Project Explorer as below screen shot.
Right click on the WEB-INF folder and navigate to New -> Folder and create a folder by name tld as given in the screen shot below.
Copy myfaces_core.tld and myfaces_html.tld files into the tld folder. These *.tld files are available in the myfaces-impl-1.2.6.jar file.

We are going to use JPA to connect to EmployeeDB database created in the embedded Derby database. JPA uses persistence.xml file for configuration. Create a META-INF folder in the EmployeeWEB -> build -> classes folder in the Project Explorer. The contents of the persistence.xml are as follows.

Code Block

	XML
borderStyle	solid
title	persistence.xml
borderStyle	solid
	XML

<?xml version="1.0" encoding="UTF-8" ?>
<persistence xmlns="http://java.sun.com/xml/ns/persistence"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/persistence 
 http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd" version="1.0">

 <persistence-unit name="Employee" transaction-type="JTA">  
  <provider>org.apache.openjpa.persistence.PersistenceProviderImpl</provider>
  <non-jta-data-source>EmployeeDS</non-jta-data-source>
 </persistence-unit>
	
</persistence>

...

Right click on the EmployeeWEB and navigate to New -> Class and create Employee.java as given in the below screen shot. Click on the Finish button after providing the values.

The contents of the com.jpa.sample.Employee are as follows. This is the entity class used with JPA for persistence.

Code Block

	JAVA
borderStyle	solid
title	com.jpa.sample.Employee
borderStyle	solid
	JAVA

package com.jpa.sample;

import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "EMPLOYEE")
public class Employee {

 @Id
 public int empNo;
 public String empName;
 public String deptName;
 public String sex;
 public double salary;
 public String band;

 public int getEmpNo() {
  return empNo;
 }

 public void setEmpNo(int empNo) {
  this.empNo = empNo;
 }

 public String getEmpName() {
  return empName;
 } 

 public void setEmpName(String empName) {
  this.empName = empName;
 }

 public String getDeptName() {
  return deptName;
 }

 public void setDeptName(String deptName) {
  this.deptName = deptName;
 }

 public String getSex() {
  return sex;
 }

 public void setSex(String sex) {
  this.sex = sex;
 }

 public double getSalary() {
  return salary;
 }

 public void setSalary(double salary) {
  this.salary = salary;
 }

 public String getBand() {
  return band;
 }

 public void setBand(String band) {
  this.band = band;
 }

}

Similarly, create sample.jsf.Employee. The contents of the class are as follows. This is the managed bean used by JSF.

Code Block

	JAVA
borderStyle	solid
title	sample.jsf.Employee
borderStyle	solid
	JAVA

package sample.jsf;

import java.util.ArrayList;

import javax.faces.event.ActionEvent;
import javax.faces.model.SelectItem;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import javax.transaction.UserTransaction;

public class Employee {

 public int empNo;
 public String empName;
 public String deptName;
 public String sex;
 public double salary;
 public String band;
 ArrayList<SelectItem> deptOptions;

 @PersistenceContext    
 private EntityManager em;

 public Employee(){

  deptOptions = new ArrayList<SelectItem>();
  
  SelectItem option = new SelectItem("Inventory", "Inventory");
  deptOptions.add(option);

  option = new SelectItem("Production", "Production");
  deptOptions.add(option);

  option = new SelectItem("Accounts", "Accounts");
  deptOptions.add(option);

  option = new SelectItem("Finance", "Finance");
  deptOptions.add(option);

  option = new SelectItem("Marketing", "Marketing");
  deptOptions.add(option);

  option = new SelectItem("IncomeTax", "IncomeTax");
  deptOptions.add(option);

  option = new SelectItem("Engineering", "Engineering");
  deptOptions.add(option);

 }

 public int getEmpNo() {
  return empNo;
 }

 public void setEmpNo(int empNo) {
  this.empNo = empNo;
 }

 public String getEmpName() {
  return empName;
 }

 public void setEmpName(String empName) {
  this.empName = empName;
 }

 public String getDeptName() {
  return deptName;
 }

 public void setDeptName(String deptName) {
  this.deptName = deptName;
 }

 public String getSex() {
  return sex;
 }

 public void setSex(String sex) {
  this.sex = sex;
 }

 public double getSalary() {
 return salary;
 }

 public void setSalary(double salary) {
  this.salary = salary;
 }

 public String getBand() {
  return band;
 }

 public void setBand(String band) {
  this.band = band;
 }

 public void addEmployee(ActionEvent event){

  com.jpa.sample.Employee employeeDup = 
    em.find(com.jpa.sample.Employee.class, this.empNo);
  
  if(employeeDup != null)
    throw new IllegalArgumentException
    ("Message : sample.jsf.Employee :
      Employee Already Exits ("+this.empNo+")");

  com.jpa.sample.Employee employee = 
   new com.jpa.sample.Employee();

  employee.setBand(this.band);
  employee.setDeptName(this.deptName);
  employee.setEmpName(this.empName);
  employee.setEmpNo(this.empNo);
  employee.setSalary(this.salary);
  employee.setSex(this.sex);

  try{

   Context ctx = new InitialContext();
   UserTransaction ut = 
       (UserTransaction)ctx.lookup("java:comp/UserTransaction");
   ut.begin();
   em.persist(employee);
   ut.commit();

  }catch (Exception e){
   throw new IllegalArgumentException
    ("Message : sample.jsf.Employee : Exception :"+e);
  }


}

 public void editEmployee(ActionEvent event){

 try{

  Context ctx = new InitialContext();
  UserTransaction ut = (UserTransaction)
         ctx.lookup("java:comp/UserTransaction");
  ut.begin();
  com.jpa.sample.Employee employee = 
    em.find(com.jpa.sample.Employee.class, this.empNo);
  employee.setBand(this.band);
  employee.setDeptName(this.deptName);
  employee.setEmpName(this.empName);
  employee.setEmpNo(this.empNo);
  employee.setSalary(this.salary);
  employee.setSex(this.sex);
  ut.commit();
 }catch (Exception e){
  throw new IllegalArgumentException
  ("Message : sample.jsf.Employee : Exception :"+e);
 }

 }

 public ArrayList<SelectItem> getDeptOptions() {
  return deptOptions;
 }

 public void setDeptOptions(ArrayList<SelectItem> deptOptions) {
  this.deptOptions = deptOptions;
 }

 public void retrieveEmployee(ActionEvent event){

  com.jpa.sample.Employee employeeDup = 
   em.find(com.jpa.sample.Employee.class, this.empNo);

  if(employeeDup == null)
  throw new IllegalArgumentException
   ("Message : sample.jsf.Employee : Employee does not exit ("+this.empNo+")");

  this.setBand(employeeDup.getBand());
  this.setDeptName(employeeDup.getDeptName());
  this.setEmpName(employeeDup.getEmpName());
  this.setEmpNo(employeeDup.getEmpNo());
  this.setSalary(employeeDup.getSalary());
  this.setSex(employeeDup.getSex());

 }

}

...

Right click on the EmployeeWEB project and create index.jsp as follows.

The contents of the index.jsp are as follows.

Code Block

	ActionScript
borderStyle	solid
title	index.jsp
borderStyle	solid
	ActionScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
  <a href="/EmployeeWEB/addEmployee.jsf">
    <font size=4 color='blue'>
      Add employee details
    </font></a> <br/>

  <a href="/EmployeeWEB/RetrieveEmployee.jsf">
  <font size=4 color='blue'>
   Edit employee details
  </font></a> <br/>

</body>
</html>

Similarly, create addEmployee.jsp and the contents are as follows.

Code Block

borderStyle

	ActionScript
borderStyle	solid
title	addEmployee.jsp
	solid	ActionScript

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page language="java" %>

<%@ taglib uri="/WEB-INF/tld/myfaces_html.tld"  prefix="h" %>
<%@ taglib uri="/WEB-INF/tld/myfaces_core.tld"  prefix="f" %>  

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"
 +request.getServerName()+":"+request.getServerPort()+path+"/";
%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 
 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" 
 content="text/html; charset=ISO-8859-1">
<base href="<%=basePath%>">

<script type="text/javascript">

</script>
<title>Add employee details</title>
</head> 
<body>

<f:view> 
 <h:form>

 <h:inputHidden id="id" value="#{Employee.empNo}"/>

 <h:panelGrid columns="2" border="0">

 <h:outputText value="Employee No :" />

 <h:inputText id="empNo" 
  value="#{Employee.empNo}" required="true">
 <f:validateLongRange maximum="100000" minimum="1"/>				     
 </h:inputText>


 <h:outputText value="Employee Name :" />

 <h:inputText id="empName" 
 value="#{Employee.empName}" required="true">
 <f:validateLength maximum="100" minimum="2"/>					     
 </h:inputText>

 <h:outputText value="Department Name :" />

 <h:selectOneMenu id="deptName" value="#{Employee.deptName}" 
  required="true" >
  <f:selectItems value="#{Employee.deptOptions}" />
 </h:selectOneMenu>

 <h:outputText value="Sex :" />

 <h:selectOneRadio id="sex" value="#{Employee.sex}" required="true">
 <f:selectItem id="male" itemLabel="Male" itemValue="male" />
 <f:selectItem id="female" itemLabel="Female" itemValue="female" />
 </h:selectOneRadio>

 <h:outputText value="Salary :" />

 <h:inputText id="salary" 
 value="#{Employee.salary}" required="true">
 <f:validateDoubleRange minimum="1000.00" maximum="10000000.00"/>					     
 </h:inputText>

  <h:outputText value="Employee Band :" />

  <h:selectOneListbox id="band" value="#{Employee.band}" size="3" required="true">
  <f:selectItem id="bandA" itemLabel="Band A" itemValue="A" />
  <f:selectItem id="bandB" itemLabel="Band B" itemValue="B" />
 <f:selectItem id="bandC" itemLabel="Band C" itemValue="C" />
 <f:selectItem id="bandD" itemLabel="Band D" itemValue="D" />
  <f:selectItem id="bandE" itemLabel="Band E" itemValue="E" />
  <f:selectItem id="bandF" itemLabel="Band F" itemValue="F" />
  </h:selectOneListbox>


  </h:panelGrid>

  <h:messages id="errors" 
  style="color:red;font-weight:bold" 
  layout="table" />

  <h:commandButton value="Save" 
   action="saveEmployee" 
   actionListener="#{Employee.addEmployee}" />


  </h:form>

 </f:view>

</body>
</html>

Similarly, create editEmployee.jsp and the contents are as follows.

Code Block

borderStyle

	ActionScript
borderStyle	solid
title	editEmployee.jsp
	solid	ActionScript

<%@ page language="java" contentType="text/html;
 charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page language="java" %>

<%@ taglib uri="/WEB-INF/tld/myfaces_html.tld"  prefix="h" %>
<%@ taglib uri="/WEB-INF/tld/myfaces_core.tld"  prefix="f" %>  

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+
  request.getServerName()+":"+
  request.getServerPort()+path+"/";
%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 
 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" 
 content="text/html; charset=ISO-8859-1">
<base href="<%=basePath%>">
<title>Edit employee details</title>
</head> 
<body>

 <f:view> 
  <h:form>

   <h:inputHidden id="id" value="#{Employee.empNo}"/>

  <h:panelGrid columns="2" border="0">

  <h:outputText value="Employee No :" />

 <h:inputText id="empNo" disabled="true"
  value="#{Employee.empNo}" required="true">
  <f:validateLongRange maximum="100000" minimum="1"/>					     
  </h:inputText>


  <h:outputText value="Employee Name :" />

  <h:inputText id="empName" 
   value="#{Employee.empName}" required="true">
    <f:validateLength maximum="100" minimum="2"/>						     
  </h:inputText>

  <h:outputText value="Department Name :" />

  <h:selectOneMenu id="deptName" value="#{Employee.deptName}" required="true">
   <f:selectItems value="#{Employee.deptOptions}" />
  </h:selectOneMenu>

  <h:outputText value="Sex :" />

  <h:selectOneRadio id="sex" value="#{Employee.sex}" required="true">
   <f:selectItem id="male" itemLabel="Male" itemValue="male" />
   <f:selectItem id="female" itemLabel="Female" itemValue="female" />
  </h:selectOneRadio>

  <h:outputText value="Salary :" />

  <h:inputText id="salary" 
    value="#{Employee.salary}" required="true">
    <f:validateDoubleRange minimum="1000.00" maximum="10000000.00"/>	
  </h:inputText>

   <h:outputText value="Employee Band :" />

  <h:selectOneListbox id="band" value="#{Employee.band}" 
     size="3" required="true">
   <f:selectItem id="bandA" itemLabel="Band A" itemValue="A" />
   <f:selectItem id="bandB" itemLabel="Band B" itemValue="B" />
   <f:selectItem id="bandC" itemLabel="Band C" itemValue="C" />
   <f:selectItem id="bandD" itemLabel="Band D" itemValue="D" />
   <f:selectItem id="bandE" itemLabel="Band E" itemValue="E" />
  <f:selectItem id="bandF" itemLabel="Band F" itemValue="F" />
  </h:selectOneListbox>


  </h:panelGrid>

  <h:messages id="errors" 
    style="color:red;font-weight:bold" 
   layout="table" />

   <h:commandButton value="Save" 
   action="saveEmployee" 
   actionListener="#{Employee.editEmployee}"  />


   </h:form>
  </f:view>
</body>
</html>

Similarly, create RetrieveEmployee.jsp and the contents are as follows.

Code Block

	ActionScript
borderStyle	solid
title	RetrieveEmployee.jsp	borderStyle	solid
	ActionScript

<%@ page language="java" contentType="text/html; 
 charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ page language="java" %>

<%@ taglib uri="/WEB-INF/tld/myfaces_html.tld"  prefix="h" %>
<%@ taglib uri="/WEB-INF/tld/myfaces_core.tld"  prefix="f" %>  

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+
request.getServerName()+":"+request.getServerPort()+path+"/";
%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 
 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
  charset=ISO-8859-1">
<base href="<%=basePath%>">
<title>Add employee details</title>
</head> 
<body>

 <f:view> 
  <h:form>
   <h:panelGrid columns="2" border="0">

  <h:outputText value="Employee No :" />

 <h:inputText id="empNo" 
  value="#{Employee.empNo}">
  </h:inputText>

  </h:panelGrid>

<h:messages id="errors" 
style="color:red;font-weight:bold" 
layout="table" />

<h:commandButton value="Retrieve" 
action="retrieveEmployee" 
actionListener="#{Employee.retrieveEmployee}" />

<h:commandButton value="Cancel" 
action="cancel"/>


  </h:form>
 </f:view>
</body>
</html>

Open the geronimo-web.xml and replace the existing contents with the following contents. We explain the contents later when creating the datasource.

Code Block

	XML
borderStyle	solid
title	geronimo-web.xml	borderStyle	solid
	XML

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://geronimo.apache.org/xml/ns/j2ee/web-2.0.1" 
 xmlns:naming="http://geronimo.apache.org/xml/ns/naming-1.2" 
  xmlns:sec="http://geronimo.apache.org/xml/ns/security-2.0" 
  xmlns:sys="http://geronimo.apache.org/xml/ns/deployment-1.2">
 
  <sys:environment>
   <sys:moduleId>
    <sys:groupId>EmployeeJSF</sys:groupId>
    <sys:artifactId>WEB</sys:artifactId>
    <sys:version>1.0</sys:version>
    <sys:type>car</sys:type>
  </sys:moduleId>

 <sys:dependencies>
  <sys:dependency>
   <sys:groupId>console.dbpool</sys:groupId>
   <sys:artifactId>EmployeeDS</sys:artifactId>
  </sys:dependency>
 </sys:dependencies>

 </sys:environment>

 <context-root>/EmployeeWEB</context-root>
</web-app>

...

Click on the faces-config.xml to open Faces Configuration Editor.
Click on the ManagedBean tab below and Click on the Add button. This will open New Managed Bean Wizard.
Click on the Browse button and search for sample.jsf.Employee class and click on the OK button.
Click on the Next button on the New Managed Bean Wizard. On the next screen, select Scope as request and click on the Next button.
Click on the Next button and finally, click on the Finish button. This will bring up the following screen shot as below.
Click on the Navigation Rule tab and move the mouse over Palette to bring it to the front.
Click on the Page and move the mouse over main area and click once. This will bring up Select JSP File wizard. Select the index.jsp and click on the OK button.
Similarly, add other JSPs also to the main area as follows.
Bring the Palette to the front and click on the Link.
- Place the mouse on addEmployee.jsp on the main area and click once and move it to index.jsp and click once.
- Similarly, click the mouse over RetrieveEmployee.jsp and move the mouse to index.jsp and click once.
- Click the mouse over RtrieveEmployee.jsp and move the mouse over editEmployee.jsp and click once.
- Click the mouse over editEmployee.jsp and move the mouse over RetrieveEmployee.jsp and click once.
  The above actions create navigation rules and look like the screen shot below.
Press the escape button once and click on the link between addEmployee.jsp and index.jsp. On the Properties window at the bottom, go to the From Outcome textbox and provide the value as saveEmployee.
Similarly, Click on the link between RetrieveEmployee.jsp and index.jsp, and on the Properties window at the bottom, go to the From Outcome textbox and provide the value as cancel.
Similarly, Click on the link between RetrieveEmployee.jsp and editEmployee.jsp, and on the Properties window at the bottom, go to the From Outcome textbox and provide the value as retrieveEmployee.
Similarly, Click on the link between editEmployee.jsp and RetrieveEmployee.jsp, and on the Properties window at the bottom, go to the From Outcome textbox and provide the value as saveEmployee.

Click on Source to view the XML content generated out of these navigations rules and configuration. The contents should be as follows.

Code Block

	XML
borderStyle	solid
title	faces-config.xml	borderStyle	solid
	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_1_2.xsd"
 version="1.2">

  <navigation-rule>
   <description>Add Employee</description>
   <from-view-id>/addEmployee.jsp</from-view-id>
   <navigation-case>
    <from-outcome>saveEmployee</from-outcome>
    <to-view-id>/index.jsp</to-view-id>
   </navigation-case>
 </navigation-rule>


  <navigation-rule>
   <description>Retrieve Employee</description>
   <from-view-id>/RetrieveEmployee.jsp</from-view-id>
   <navigation-case>
    <from-outcome>retrieveEmployee</from-outcome>
    <to-view-id>/editEmployee.jsp</to-view-id>
   </navigation-case>
 </navigation-rule>

  <navigation-rule>
    <description>Retrieve Employee</description>
    <from-view-id>/RetrieveEmployee.jsp</from-view-id>
    <navigation-case>
     <from-outcome>cancel</from-outcome>
      <to-view-id>/index.jsp</to-view-id>
     </navigation-case>
 </navigation-rule>

  <navigation-rule>
    <description>Edit Employee</description>
    <from-view-id>/editEmployee.jsp</from-view-id>
    <navigation-case>
      <from-outcome>saveEmployee</from-outcome>
      <to-view-id>/RetrieveEmployee.jsp</to-view-id>
 </navigation-case>
</navigation-rule>


  <managed-bean> 
    <description>
     Employee Bean
   </description>
   <managed-bean-name>Employee</managed-bean-name>
   <managed-bean-class>sample.jsf.Employee</managed-bean-class>
   <managed-bean-scope>request</managed-bean-scope> 
  </managed-bean>


</faces-config>

This finishes the WEB application creation and JSF configuration. Export the EmployeeWEB to a EmployeeWEB.war file.

...

Child pages

Versions Compared

Old Version 19

New Version 20

Key