Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces

Purpose

In this tutorial, you use Oracle JDeveloper 11g to build a web application. To build the data model, you use the EJB diagrammer, utilizing EJB 3.0 and Java Persistence API (JPA). For the web client, JavaServer Faces (JSF) is used. A master-detail page and an edit page will be included in the user interface.

Time to Complete

1 hour

Topics

The tutorial covers the following topics:

	Overview
	Scenario
	Prerequisites
	Creating a Database Connection
	Building the Data Model using EJB 3.0
	Creating a New Project for the User Interface
	Creating the Page Flow
	Creating a Master-Detail JSF Page
	Creating a Query Page
	Running the JSF Pages
	Summary

Viewing Screenshots

Place the cursor over this icon to load and view all the screenshots for this tutorial. (Caution: This action loads all screenshots simultaneously, so response time may be slow depending on your Internet connection.)

Note: Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot associated with that step. You can hide an individual screenshot by clicking it.

Overview

The application reflects the Model-View-Controller architecture. The model is provided by EJB Components, while the view and controller are provided by JavaServer Faces.We will be using the ADF Faces set of JSF-compatible components to build a richer web interface.

You will first build the data model portion of the application. The Java Persistence API (JPA) provides a POJO persistence model for object-relational mapping. The Java Persistence API was developed by the EJB 3.0 software expert group as part of JSR 220, but its use is not limited to EJB software components. It can also be used directly by web applications and application clients, and even outside the Java EE platform, for example, in Java SE applications.

Enterprise JavaBeans (EJB) technology is the server-side component architecture for Java Platform, Enterprise Edition (Java EE) that encapsulates business logic. EJB technology enables rapid and simplified development of distributed, transactional, secure and portable applications based on Java technology.

The Java Persistence API is the standard API for the management of persistence and object/relational mapping. It provides an object/relational mapping facility for application developers using a Java domain model to manage a relational database. The Java Persistence API is part of the Java EE platform. It can also be used in Java SE environments.

In the tutorial, you implement a persistence model by developing Session and Entity beans. These beans use the EJB 3.0 annotations and JPA for model persistence.

• EJB 3.0 entities represent persistent data from the database, such as a row in a customer table or an employee record in an employee table. Entities are also sharable across multiple clients. You use the Entity Manager API to create, update, delete and query the persistence model.
• Session beans perform a distinct, decoupled task such as checking credit history for a customer.

You will then create a master-detail form for viewing Departments and Employees information. Following this basic master-detail page creation, you will create an edit page for the selected employee.

While developing and testing the application, you will use JDeveloper's embedded Java EE application server.

Back to Topic List

Scenario

You need to create persistence objects for the DEPARTMENTS and EMPLOYEES tables. The persistence objects are implemented as Entity Beans. Default getter and setter methods are created for department and employee data. These methods are implemented as part of a session bean. Then you create a Master Detail JSF page based on Department and related Employees, and an Edit JSF page allowing the update of employee's data.

Back to Topic List

Prerequisites

Before starting the tutorial, you should:

Back to Topic List

Creating a Database Connection

Java Database Connectivity (JDBC) is a standard API that is used for connecting a Java application to relational databases. JDeveloper uses a connection navigator to maintain connection information for your application. The connection navigator makes it easy to create, manage, and test database connections.

If you haven't already established a connection to the database, then do so by performing the following steps:

Back to Topic List

Building the Data Model with EJB 3.0 Using the EJB Diagramer

The data model provides data access and validation for an application. The data is always validated by the model, regardless of the client implementation. This cleanly separates the validation and business rules from the user interface.

In the next few steps, you create an application in JDeveloper and create a data model for your application.

	Create a New Application and Projects
	Create the Persistence Model
	Create the Data Model and test it
	Run the Data Model outside Java EE container

Back to Topic List

Create a New Application and Project

In JDeveloper, you always work with projects contained in an application. The application is the highest point in the control structure.

A JDeveloper project is an organization structure used to logically group related files You can add multiple projects to your application to easily organize, access, modify, and reuse your source code. In the Application Navigator, projects are displayed as the second level in the hierarchy, under the application.

It is considered best practice to use projects to separate the model code from the code written for the view. In this tutorial, we will create one project for the EJB Components model, and later on a second one for the JSF views.

Before you create any components, you must first create the application and project. To do this, perform the following steps:

1.	Click the Application tab to go back to the Application Navigator. Click the New Application icon.
2.	In the Create Application dialog box, enter the Application Name HR_EJB_JPA_App. Notice that as you enter the application name, the directory name changes automatically. Enter oracle as the Application Package Prefix. Select the No Template [All Technologies] value from the Application Template drop-down list. Click OK.
3.	In the Create Project dialog, set Project Name to EJBModel then OK.
4.	In the Navigator pane, click the Databases tab.
5.	Select the HRConn connection in the IDE connections list and drag and drop it inside the HR_EJB_JPA_App node to make the connection available for your application.
	Click the Application Navigator tab.

Back to Topic

Back to Topic List

Creating the Persistence Model

In this section of the tutorial, you create the persistence model for departments and employees using EJB 3.0 entity beans.

To create EJB 3.0 entity beans, perform the following steps:

Back to Topic

Back to Topic List

Creating the Data Model and Testing it

A session facade presents client objects with a unified interface to the underlying EJBs (Enterprise JavaBeans). The client interacts only with the facade, which resides on the server and invokes the appropriate EJB methods. As a result, dependencies and communication between clients and EJBs are reduced.
If you are performing remote access without a session facade, numerous remote calls are needed for the clients to access EJB 3.0 entities directly over the network. This results in a large amount of network traffic that negatively affects performance. In addition, without a facade the client depends directly on the implementation of the business objects, so that if the interface of an EJB changes, client objects have to be changed as well.

In this section, you create a session bean that implements a method to find employee and department records.

Back to Topic

Back to Topic List

Running the Java Service outside Java EE container

A persistence unit can be configured to run inside or outside the container. In EJB 3.0, you can run entities in a pure Java SE environment, without using an application server. One reason you might do this is to create a simple Java SE testbed (using JUnit, perhaps) to test your entity behavior without the overhead of deploying/executing in an application server. Another reason is you may want to run a Swing application locally.

In this section, you create a session bean that implements a method to find employee and department records.

Back to Topic

Back to Topic List

Create a New Project for the User Interface

Because it is considered best practice to use projects to separate the model code from the code written for the view, since we've created the project for the EJB Components model, we now create a second one for the JSF views.

To do this, perform the following steps:

1.	On the application name bar, click the Application Menu icon select New Project from context.
2.	In the New Gallery, select the Empty Project item. Click OK.
3.	In the Create Project dialog, set Project Name to UserInterface then OK.
4.	In the Application Navigator, right click the UserInterface node and select Project Properties from context.
5.	In the Project Properties dialog, select the JSP Tag Libraries node. Select Distributed libraries then press the Add button.
6.	In the Tag Libraries list, select ADF Faces Components 11-ji3. Click OK.
7.	Back in the Project Properties dialog, select the Technology scope node. In the Available technologies list, pick the JSF one and using the right arrow button , shuttle it in the Selected Technologies window. Notice that selecting JSF automatically propagates the required associated technologies (Java - JSP and Servlets) Click OK. Click the save all icon to save your work.
8.	The Application Navigator should now look like this:

Back to Topic List

Creating the Page Flow

You are going to use JDeveloper's JSF Navigation Modeler to diagrammatically plan and create your application's pages, and the navigation between them.

1.	In the Application Navigator, double click the UserInterface | Web Content | WEB_INF | faces-config.xml node to open a page flow diagram.
2.	The empty diagram opens. Notice the Component Palette to the right of the diagram editor. You use this to create components for the JSF Navigation Model.
3.	In the JSF Navigation Diagram page of the Component Palette, select JSF Page , and click where you want the page to appear on the diagram. Rename the page browse
4.	From the Component Palette, drag and drop a JSF Page next to the previous one. Rename the page query.
5.	Select JSF Navigation Case in the Component Palette. Click the icon for the source JSF page (browse), and then click the icon for the destination JSF page (query) for the navigation case.
6.	Modify the default label, 'success', by clicking it and typing query over it.
7.	JDeveloper gives you three views of the faces-config.xml file. We used the diagram view, but the same information is also accessible through a declarative dialog as well as the source directly. Click the Overview tab at the bottom of the screen. Click Navigation Rules in the left-hand table to display existing Navigation Rules. Click now the Source tab at the bottom of the screen. The <from-view-id> tag identifies the source page, and the <to-view-id> tag identifies the destination page.
8.	Click the Diagram tab to switch back to the diagram view, and select JSF Navigation Case in the Component Palette. Click the icon for the source JSF page (query), and then click the icon for the destination JSF page (browse) for the navigation case.
9.	Modify the default label, 'success', by clicking it and typing browse over it.
10.	Your diagram should now look something like the image below.
11.	Click the save all icon to save the diagram.

Back to Topic List

Creating a Master-Detail JavaServer Faces Page

In the next few steps, you create an ADF Faces for the Department Employees Master Detail page.

1.	On the Page Flow diagram, double-click the browse icon to launch the Create JSF JSP wizard.
2.	The File name should be browse.jspx, select the Create as XML Document option. Click OK. You now have an empty browse.jspx page. In the next few steps, you add a data-bound ADF Faces component to the page. This component displays a department along with the employees belonging to this department.
3.	From the Component palette, for the ADF Faces library, select the layout section and drag a Panel Stretch Layout component onto the page
4.	From the Component palette, drag a Panel Splitter component on the middle of the page. (the cursor should be on the left of the center tag)
5.	Open the Data Controls component and expand the following nodes HRFacadeLocal | queryDepartmentsFindAll then drag and drop the Departments node within the first facet. In the pop up menu, select Forms | ADF Read-only Form
6.	In the Edit Form Fields, check the Include Navigation Controls option Click OK.
7.	In the Data Controls, expand the Departments node, select the employeesList node and drop it in the second facet. In the pop up menu, select Tables | ADF Read-only Table
8.	In the Edit Table Columns dialog delete all columns except the following ones: commissionPct, email, employeeId, firstName, hiredate, jobId, lastName, phoneNumber, salary, and select Row Selection, and Sorting options. Click OK. The page should now look like this:
9.	In the Structure pane, select the af:panelSplitter pane and in the Property Inspector, set the Orientation to vertical.
10.	Select the af:panelStretchLayout tag and using the Property Inspector, for the Style | Box tabs set the Width to 600 Pixel and the Height to 400 Pixel so that the Employees table appears in the layout editor. Select the af:table tag in the second pane and using the Property Inspector, for the Style | Box tabs set the Width to 100 Pct and the Height to 100 Pct.
11.	Reduce the height of the Department block.
12.	From the Component Palette, in the Common Components, select the Panel Menu Bar component and drop it onto the Facet Top tag, in the Design of the page.
13.	Click the Menu component then drag and drop it inside the Menu Bar.
14.	In the Property Inspector change the Text from menu 1 to Options.
15.	Click the Behavior tab and set the Detachable field to true.
16.	In the Structure Pane, right click the af:menu tag and from context select Insert Inside af:menu | MenuItem.
17.	In the Property Inspector, using the Common tab, change the Text to Query and from the drop down list set the Action to query.
18.	Click the save all icon to save your work.

Back to Topic List

Creating a Query and Edit Page

In the next few ste