...
6. 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.
...
10. Copy myfaces_core.tld
and myfaces-html.tld}}
files into the tld folder. These {{*.tld
files are available in the myfaces-api-1.2.2.jar
file.
...
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
|
12. 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.
13. The contents of the com.jpa.sample.Employee.java
are as follows. This is the entity class used with JPA for persistence.
...
<?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>
|
12. 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.
13. The contents of the com.jpa.sample.Employee
are as follows. This is the entity class used with JPA for persistence.
Code Block | ||||
---|---|---|---|---|
|
14. Similarly, create sample.jsf.Employee.java
. The contents of the class are as follows. This is the managed bean used by JSF.
...
15. Right click on the EmployeeWEB project and create index.jsp
as follows.
The contents of the index.jsp
are as follows.
Code Block | ||||||
---|---|---|---|---|---|---|
|
16. Similarly, create addEmployee.jsp
and the contents are as follows.
17. Similarly, create editEmployee.jsp
and the contents are as follows.
18. Similarly, create RetrieveEmployee.jsp
and the contents are as follows.
19. Open the geronimo-web.xml
and replace the existing contents with the following contents. We explain the contents later when creating the datasource.
...
| |
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;
}
}
|
14. Similarly, create sample.jsf.Employee
. The contents of the class are as follows. This is the managed bean used by JSF.
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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());
}
}
|
15. Right click on the EmployeeWEB project and create index.jsp
as follows.
The contents of the index.jsp
are as follows.
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<!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>
|
16. Similarly, create addEmployee.jsp
and the contents are as follows.
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<%@ 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>
|
17. Similarly, create editEmployee.jsp
and the contents are as follows.
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<%@ 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>
|
18. Similarly, create RetrieveEmployee.jsp
and the contents are as follows.
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<%@ 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>
|
19. 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 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>
<dependencies>
<dependency>
<groupId>console.dbpool</groupId>
<artifactId>EmployeeDS</artifactId>
</dependency>
</dependencies>
</sys:environment>
<context-root>/EmployeeWEB</context-root>
</web-app>
|
20. Click on the faces-config.xml
to open Faces Configuration Editor.
21. Click on the ManagedBean tab below and Click on the Add button.
This will open New Managed Bean Wizard.
22. Click on the browse button and search for sample.jsf.Employee
class and click on the OK button.
23. 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.
24. Click on the Next button and finally, click on the Finish button. This will bring up the following screen shot as below.
25. Click on the Navigation Rule tab and move the mouse over Palette to bring it to the front.
26. 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.
27. Similarly, add other JSPs also to the main area as follows.
28. 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 toindex.jsp
and click once.
- Similarly, click the mouse over
RetrieveEmployee.jsp
and move the mouse toindex.jsp
and click once.
- Click the mouse over
RtrieveEmployee.jsp
and
move the mouse overeditEmployee.jsp
and click once.
- Click the mouse over
editEmployee.jsp
and move the
mouse overRetrieveEmployee.jsp
and click once.
The above actions create navigation rules and look like the screen shot below.
29. 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.
30. 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.
32. 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.
33. 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.
34. Click on the Source button to view the XML content generated out of these navigations rules and configuration. The contents should be as follows.
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<?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>
|
20. Click on the faces-config.xml
to open Faces Configuration Editor.
21. Click on the ManagedBean_tab below and Click on the _Add button.
This will open New Managed Bean Wizard.
22. Click on the browse button and search for sample.jsf.Employee
class and click on the OK button.
23. 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.
24. Click on the Next button and finally, click on the Finish button. This will bring up the following screen shot as below.
25. Click on the Navigation Rule tab and move the mouse over Palette to bring it to the front.
26. 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.
27. Similarly, add other JSPs also to the main area as follows.
28. 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 toindex.jsp
and click once.
- Similarly, click the mouse over
RetrieveEmployee.jsp
and move the mouse toindex.jsp
and click once.
- Click the mouse over
RtrieveEmployee.jsp
and move the mouse overeditEmployee.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.
29. Press the escape button once and click on the link between addEmployee.jsp
and index.jsp
.
On the Properties window at the bottom, go the From Outcome textbox
and provide the value as saveEmployee.
30. Similarly, Click on the link between RetrieveEmployee.jsp
and index.jsp
, and on the Properties window at the bottom, go the From Outcome textbox and provide the value as cancel.
32. Similarly, Click on the link between RetrieveEmployee.jsp
and editEmployee.jsp
, and on the Properties window at the bottom, go the From Outcome textbox and provide the value as retrieveEmployee.
33. Similarly, Click on the link between editEmployee.jsp
and RetrieveEmployee.jsp
, and on the Properties window at the bottom, go the From Outcome textbox and provide the value as saveEmployee.
34. Click on the Source button to view the XML content generated out of these navigations rules and configuration. The contents should be as follows.
Code Block | |
---|---|
XML | XML |
borderStyle | solid | title | faces-config.xml
35. This finishes the WEB application creation and JSF configuration. Export the EmployeeWEB to a EmployeeWEB.war
file.
...
1. Open a browser window and hit the URL http://localhost:8080/EmployeeWEB/
. This will bring up the below screen.
...