You are on page 1of 55

Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 1 of 55

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 are 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.You use the ADF Faces set of JSF-compatible components to build a richer
web interface.

You 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.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 2 of 55

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 then create a master-detail form for viewing Departments and Employees information. Following this basic master-detail
page creation, you create an edit page for the selected employee.

While developing and testing the application, you 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

Back to Topic List

Prerequisites

1. Have access to or have installed Oracle JDeveloper 11g Production. You can download it from
Oracle Technology Network.

2. Have access to or have installed the Oracle Sample Schemas, included with the Oracle 10g or
Oracle 11g database.

The tutorial uses the HR schema. Specifically, the pages work with the DEPARTMENT and
EMPLOYEES tables.

Instructions for installing the HR schema and creating a connection to it in JDeveloper are
available online at:

http://www.oracle.com/technology/obe/obe11jdev/11/common/connection11g.htm

3. Start JDeveloper by selecting Start > All Programs > Oracle WebLogic > JDeveloper Studio
11.1.1.0.0

4. If the Migrate User Settings dialog box opens, click No.

If prompted for a User Role, choose Default.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 3 of 55

Close the Tip of the Day window.

5. The JDeveloper IDE should now be displayed.

Back to Topic List

Creating a Database Connection

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 4 of 55

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:

1. Click the Database Navigator tab on the Application Navigator. If the Database Navigator tab
is not showing, choose View > Database Navigator from the JDeveloper main menu.

2. Right-click the IDE Connections node and choose New Connection from the context menu.

3. In the Create Database Connection Dialog, in the first section enter the following values:

Connection Name HRConn


Connection Type Oracle JDBC
Username hr
Password hr
Save Password (checked)
Deploy Password (checked)

Note: It is secure to deploy the password since it gets encrypted.

In the Oracle (JDBC) Settings section, enter the following values:

Driver thin

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 5 of 55

Host Name localhost


JDBC Port 1521

Choose the solution that applies best to your environment by completing one of the 2 following
lines:

SID orcl
Service Name XE

4. Click Test Connection.

If the database is available and the connection details are correct, you see the word Success!
displayed in the Status window.

If an error occurs, verify the connection settings, make any necessary changes, and then retest
the connection.

If the connection is successful, click OK to complete the connection.

5. The Database Navigator should look like this:

You have just created a connection to the database that will supply data for the application you
build in this tutorial.

The next section uses this connection.

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

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 6 of 55

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, you
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 Generic Application from the Application Template list. This creates an Application and a
single non-configured project.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 7 of 55

Clic Next.

3. In the Create Project dialog, set Project Name to EJBModel then click Finish.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 8 of 55

4. In the Navigator pane, click the Database Navigator 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:

1. In the Application Navigator, right click the EJBModel node and select New from the context
menu.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 9 of 55

2. In the New Gallery select the All Technologies tab, then select Business Tier | EJB as the
category and double click the Entities from Tables item.

3. In the Create Entities from Tables wizard, if necessary, click Next to skip the Welcome page.

4. In Select EJB Version, select EJB 3.0 -- JPA Entities as the EJB version, then Next.

5. In the click Next to skip the persistence unit definition.

6. In the Type of Connection page choose the Online Database Connection option and accept the
default Offline Database name, then Next.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 10 of 55

7. In the Database Connection Details page, select HRConn as the connection to use.

Click Next

8. Click Query to retrieve the available objects for the HR schema. Then select DEPARTMENTS
and EMPLOYEES and shuttle the selection in the selected pane using the right arrow button
.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 11 of 55

Click Next.

9. In this step, make sure the package name is oracle.

Click Next, then Finish.

10. In the Application Navigator one java file is created for Departments and one for Employees.

11. Right click the EJBModel node in the Application Navigator and select New.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 12 of 55

12. In the New Gallery select Business Tier | EJB as the category and double click EJB Diagram
(JPA/EJB 3.0).

13. In the Create EJB Diagram dialog, change the default name for the diagram (EJB Diagram1) to
EJB 3 and verify oracle is the Package name.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 13 of 55

Click OK.

On the Associate Diagram With Persistence Unit dialog, click OK to accept the proposed
Persistence Unit EJBModel (EJBModel.jpr).

14. A new empty diagram opens in the diagram editor.

15. Select the Departments and Employees entities from the Application Navigator then drag and
drop them onto the diagram.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 14 of 55

16. The diagram displays the EJB components that correspond to the Reverse Engineering action you
previously performed on Departments and Employees. Reorganize the layout of the diagram to
have both entities horizontally aligned.

17. Click the save all icon to save your work.

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.

1. In the Component Palette, select the EJB Components library and open the EJB Nodes.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 15 of 55

2. Select the Session Bean component then drag and drop it onto the diagram.

The Create Session Bean Wizard opens. If necessary, click Next on the Welcome step.

3. In the EJB Name and Options step, set the EJB Name to HRFacade and make sure that the following values
are properly set:

Session Type Stateless


Transaction Type Container
Generate Session Facade Method (Checked)
Entity Implementation JPA Entities
Persistence Unit EJBModel

then click Next.

4. In the Session Facade step, any entities in this project appear as a node in the tree control. You can select the
checkbox to include all entity methods this entity exposes, or expand the nodes and select a subset of
methods.
Expand the Employees and Departments nodes and deselect the findAllByRange method for each entity,
then click Next.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 16 of 55

5. In the Class Definition step, make sure that the full name for Bean Class is oracle.HRFacadeBean, and then
click Next.

6. In the following step, have both Remote and Local interface implementation selected. The remote interface
is used for client applications that run in a separate virtual machine, such as Java clients whereas local
interface is used for client applications that run in the same virtual machine, such as Web clients .

Click Next to review the summary of the created classes and then Finish.

7. The Application Navigator should look like this:

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 17 of 55

The session bean is made up of three files: HRFacadeBean - contains the session bean code. HRFacade -
describes the capabilities of the bean for remote clients and HRFacadeLocal describes the capabilities for
the local client.

8. Double click the Employees entity bean on the diagram to open the source code for the class.

9. Named queries enable you to define queries at design time and then use them at run time. The wizard created
one NamedQuery metadata statement in the Employee entity. This query retrieves all rows from the
employees table.

@NamedQueries({
@NamedQuery(name = "Employees.findAll", query = "select o from Employees
o")
})

Note: Any symbol in Java code beginning with @ is known as an annotation. The use of annotations allows

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 18 of 55

you to add metadata to your objects. Examples of annotations follow:

Annotation Description
@Entity Identifies the file as an EJB 3.0 entity
@NamedQuery A query that can be used at run time to retrieve data
@Table Specifies the primary table for the entity
@Id Can define which property is the identifier for the entity
@Column Specifies a mapped column for a persistent property or field
@ManyToOne Specifies a type of foreign key relationship between tables

@JoinColumn Specifies the join column and referenced column for a foreign key
relationship

10. Add a comma at the end of the last @NamedQuery statement, then add a query to the class that retrieves
employees by name.

Add the following statement:

@NamedQuery(name = "Employees.findByName",
query = "select o from Employees o where o.firstName like :p_name")

So that the code looks like the following:

@Entity
@NamedQueries({
@NamedQuery(name = "Employees.findAll", query = "select o from Employees
o")
,
@NamedQuery(name = "Employees.findByName", query = "select o from
Employees o where o.firstName like :p_name")
})

If required, use the ALT + Enter keystroke combination to import the


javax.persistence.NamedQueries library.

Note: What makes these objects different from other Java files are the annotations that identify them as EJB
entities. A key feature of EJB 3.0 and JPA is the ability to create entities that contain object-relational
mappings by using metadata annotations rather than deployment descriptors as in earlier versions.

11. Click the Make icon to compile the Employees.java class.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 19 of 55

Make sure that the Message - Log window does not report any errors.

12. Add the new method to the session bean doing the following:

Right-click the HRFacadeBean node in the Application Navigator and select Edit Session Facade from the
context menu.

13. Expand the Employees node of the dialog. Notice that the new named query Employees.findByName
appears as an exposable method. Select it and click OK.

14. JDeveloper provides a way to test the EJB by creating a sample client. To do so, right click HRFacadeBean
and select New Sample Java Client from the context menu.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 20 of 55

15. Select IntegratedWLSConnection as the Application Server Connection.

Click OK.

16. Review the code of the HRFacadeClient class and correct the reported error for the
queryEmployeesFindByName() method and add a value parameter "P%" so that it looks like the following:

Click the save all icon to save your work.

17. Right click the EJBModel project node in the Applications Navigator and select Project Properties from
context.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 21 of 55

18. In the Project Properties dialog, select the Run/Debug/Profile node and make sure the Run Configuration is
set to Default. (if not, double click the Default option, to open the Edit Run Configuration dialog and click
OK to accept default values)

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 22 of 55

Click OK.

19. Right click the HRFacadeBean in the Application Navigator and select Run from the context menu to
launch the facade bean in the Embedded OC4J sever.

Wait until the Embedded OC4J Server is started.

20. Right click HRFacadeClient and select Run from context.

21. The Log window returns the database data based on the three methods the client contains.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 23 of 55

22. To better visualize the result of the FindByName method, in the HRFacadeClient java class, comment out
the for loop corresponding to the queryEmployeesFindAll() method, and comment out the for loop
corresponding to the queryDepartmentsFindAll() method. Your code should look something like this:

23. Click the Make button to recompile the class, and ensure that no errors are returned.

24. Right click the HRFacadeClient class and select Run from context.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 24 of 55

25. The Log window should now display the returned rows retrieved by your ' P%' clause.

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.

1. Now create a new persistence unit to run the java service outside the Java EE container.

Right-click the META-INF | persistence.xml and select New Java Service Facade from the context
menu.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 25 of 55

2. In the Create Java Service Facade, if necessary, click Next to skip the Welcome page. In the Java Service
Class panel, you can choose to create a new persistence unit (in the next panel) or use an existing unit.
Select Choose a Persistence Unit or Create one in the next Panel, and check the Generate a main()
method checkbox.

Click Next.
3. Name the the Persistence Unit outside. Choose JDBC Connection and make sure the JDBC connection is
set to HRConn.

Click Next.

4. All methods should be selected by default. Deselect some of them so that your selection looks like the
following image. (Remove the "byRange" methods)

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 26 of 55

Click Next then Finish.

5. In the source editor window, for the JavaServiceFacade class, add a new line after the // TODO
comment and enter the following statement:

Employees a = javaServiceFacade.queryEmployeesFindByName("P%").get(0);

notice that you can use code coach to help you typing the syntax (CTRL + space bar)

Type sop and hit CTRL + Enter to insert a System.out.println() statement. Add a.getLastName()
inside the parenthesis so that your class now looks like the following:

// TODO
Employees a = javaServiceFacade.queryEmployeesFindByName("P%").get(0);
System.out.println(a.getLastName());

6. Click the Make button to compile the class and save your work.

7. Right-click the JavaServiceFacade node in the Application Navigator and select Run from context.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 27 of 55

8. The Log window displays the result of the execution of the class running outside Java EE container,
returning the first lastName of the retrieved records.

9. Double-click the META-INF | persistence.xml node to display the contents of the file.

10. Both persistence units are described. The default inside one and the newly-created for outside Java EE run.
Click the Source tab to review details.

11. You now expose the EJB as a data control for the Oracle ADF framework. This simplifies the way that you
bind user interfaces to the EJB. To learn more about the ADF Framework visit:
http://oracle.com/technology/products/adf

Right-click the HRFacadeBean node in the Application Navigator and select Create Data Controls from
context.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 28 of 55

12. In the Choose EJB Interface dialog, select Local, and click OK.

Click the Save All icon to save your work.

13. The Application Navigator should now look like this:

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 29 of 55

14. You can collapse the EJBModel project node.

Back to Topic

Back to Topic List

Create a New Project for the User Interface

It is considered best practice to use projects to separate the model code from the code written for the view For this reason you
created one project for the EJB Components model, and you 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 Generic Project item.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 30 of 55

Click OK.

3. In the Create Project dialog, set Project Name to UserInterface then Finish.

4. In the Application Navigator, right click the UserInterface node and select Project Properties from
context.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 31 of 55

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.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 32 of 55

Click OK.

7. Back in the Project Properties dialog, select the Technology scope node. In the Available technologies list,

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 33 of 55

select JSF 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 now 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.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 34 of 55

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 in the
diagram where you want the page to appear. 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.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 35 of 55

6. Modify the default label, 'success', by clicking it and typing query over it. Notice that there is a warning icon
abouve the Navigation Case. This is because you have not yet created the JSF pages. This shows that the
Navigation Case would be looking for a page that doesn't exist. This warning goes away when you create the
respective pages.

7. JDeveloper gives you three views of the faces-config.xml file. You have already used the diagram view, but the
same information is also accessible through a declarative dialog as well as directly in the source .

Click the Overview tab at the bottom of the screen. Click Navigation Rules in the left-hand table to display
existing Navigation Rules.

Click 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.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 36 of 55

8. Switch back to the diagram view by clicking the Diagram tab, 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 selecting 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 a JavaServer Faces Page using ADF Faces components 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.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 37 of 55

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).

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 38 of 55

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

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 39 of 55

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:

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 40 of 55

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.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 41 of 55

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.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 42 of 55

12. You want the employees section of this page to refresh when the user navigates between departments. You
implement that by adding a Partial Page Rendering trigger to the employees table. PPR triggers are based on
components with names so first, you need to add IDs to the navigation buttons in the department form.

Select the First button and in the Properties Inspector add first as the ID.

Repeat this for the remaining 3 buttons.

Set Previous to previous

Set Next to next

Set Last to last

13. Set the Partial Page Rendereing trigger to fire when the user clicks any of those buttons.

Select the employees table.

In the Properties Inspector, click Edit for the Behavior | PartialTriggers property. (The Edit button is on the far
right of the field).

14. In the Edit Property dialog, expand facet (first) | panelFormLayout - Departments | facet (footer) |

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 43 of 55

panelGroupLayout to expose the navigation buttons.

14. Use the shuttle buttons to add all four buttons to the selected list.

Now, when the user clicks any of the 4 buttons, the employees list will refresh to reflect the employees within
the displayed department.

15. 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.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 44 of 55

16. Click the Menu component then drag and drop it inside the Menu Bar.

17. In the Property Inspector change the Text from menu 1 to Options.

18. Click the Behavior tab and set the Detachable field to true.

19. In the Structure Pane, right click the af:menu tag and from context select Insert Inside af:menu | MenuItem.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 45 of 55

20. In the Property Inspector, using the Common tab, change the Text to Query and from the drop down list set
the Action to query.

21. Click the save all icon to save your work.

Back to Topic List

Creating a Query and Edit Page

In the next few steps, you use ADF Faces to build the a query page to edit Employees.

1. Switch back to the Page Flow diagram (click the faces-config.xml tab), and double-click the query
icon to launch the page wizard.

2. The file name should be query.jspx and Create as XML Document is checked.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 46 of 55

Click OK.

3. A new Design page opens. In Data Controls, under the HRFacadeLocal node, select the
queryEmployeesFindByName(Object) node and drop it onto the page.

From the popup menu, select Parameters | ADF Parameter Form.

4. In the Edit Form Fields click OK to accept the proposed fields.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 47 of 55

5. In the Edit Action Binding dialog click OK. The page design should look like this:

.
6. In the Data Controls, expand the queryEmployeesFindByName node and select the Employees
node. Drop it onto the page below the Parameter Form.

from the popup menu, select Forms | ADF Form.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 48 of 55

7. In the Edit Form Fields, select both checkboxes (Include Navigation Controls - Include Submit
Button)

Click OK.

8. The Design for the query page should look like this:

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 49 of 55

9. This page needs to be updatable; to specify this, select the mergeEntity(Object) method in the
Data Controls pane, and drop it onto the Submit button.

In the Edit Action Binding dialog, click the down arrow and select Show EL Expression Builder.

10. In the Variables dialog, expand ADF Bindings | Bindings |queryEmployeesFindByNameIterator


| currentRow and select dataProvider. As you select each node in the expression. the editor adds
it to the expression in the top of the window.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 50 of 55

Then OK.

Click OK again.

11. In the Confirm Component Rebinding dialog, click OK.

12. Back in the design of the query page, select the mergeEntity button

13. In the Property Inspector, Common tab, set the Text value to Save and in the Button Action
section, set the the Action to browse from the drop down list.

14. Click the save all icon to save your work.

15. Your page should now look like this:

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 51 of 55

Back to Topic List

Running the JSF Pages

Now that you have built your application, you need to test it. JDeveloper makes it easy to test JSF through a built-in
application server. The server is automatically launched when you test a page from within JDeveloper.

The next few steps take you through the testing process.

1. To test the pages, return to the page flow diagram. Right click the browse page icon and select Run from the context
menu.

2. Your page is loaded in your default browser and should look like the following:

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 52 of 55

3. Click the Next button to find a department with several employees in its list. Then click in the firstName column and
experiment ascending/descending sorting on this criteria using the up/down arrow icons.

4. With the lastName column header selected, move it left to position the column in the table just after the firstName
column.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 53 of 55

5. Select the column headers and reorder the columns in this sequence: firstName, lastName, email, salary, hireDate,
employeeId, commissionPct ...

6. On the top left of the page, click Options -->Query and move the menu to another location on your page. Then press the
Query button.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 54 of 55

7. The query page opens in the browser. In the queryEmployeesFindByName_p_name enter any name or partial name. i.e.
A% then click the query button.

8. Experiment with the Navigation buttons if your query retrieved more than one record.

9. Click the Calendar icon to the right of the hireDate field and from the calendar pop up window pick up a new hiredate.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces Page 55 of 55

10. Clicking the Save button commits your changes in the database and drives you back to the browse page.

11. You have successfully completed this OBE. Close the browser window

Back to Topic List

Summary

In this tutorial, you created an end-to-end application using Oracle JDeveloper, EJB 3.0, JPA, and JSF pages. You learned
how to:

Create a Database Connection


Build the Data Model using EJB 3.0 and EJB diagram
Create the Page Flow
Create a Master-Detail JSF Page
Create a Query and Edit Page
Run the JSF Pages

Back to Topic List

Place the cursor over this icon to hide all screenshots.

http://www.oracle.com/technology/obe/obe11jdev/11/ejb/ejb.html?_template=/ocom/print 8/27/2009

You might also like