Post on 11-Mar-2015
Build a Web Application with JDeveloper 11g Using EJB, JPA, and JavaServer Faces
Purpose
In this tutorial, you use Oracle JDeveloper 11g Version 11.1.1.2.0 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, a query/edit page and a search page are included in the
user interface.
Time to Complete
1 hour and thirty minutes
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
Creating a Search 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.
Back to Topic List
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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
1 of 80 12/1/2009 2:00 PM
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 then create a master-detail form for viewing Departments and Employees information. Following this basic
master-detail page creation, you create a query page to find a particular employee, and you then edit the
employee's record. You also create a search page to search for a particular department.
While developing and testing the application, you use JDeveloper's embedded Java EE application server.
Back to Topic List
Scenario
You 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
Departments and related Employees, a Query/Edit JSF page enabling a search for, and update of an employee's
data and a search page that allows input of search criteria to find a particular department.
Back to Topic List
Prerequisites
1. Have access to or have installed Oracle JDeveloper 11g Version 11.1.1.2.0. 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 DEPARTMENTS 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
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
2 of 80 12/1/2009 2:00 PM
3. Start JDeveloper by selecting Start > All Programs > Oracle Fusion Middleware >
JDeveloper Studio 11.1.1.2.0
4. If the Migrate User Settings dialog box opens, click No.
If prompted for a User Role, choose Default Role.
Close the Tip of the Day window.
5. The JDeveloper IDE should now be displayed.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
3 of 80 12/1/2009 2:00 PM
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:
1. Click the Database Navigator tab on the Application Navigator. If the Database Navigator tab
is not visible, choose View > Database > Database Navigator from the JDeveloper main menu.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
4 of 80 12/1/2009 2:00 PM
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)
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
5 of 80 12/1/2009 2:00 PM
Note: It is secure to deploy the password since it gets encrypted.
In the Oracle (JDBC) Settings section, enter the following values:
Driver thin
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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
6 of 80 12/1/2009 2:00 PM
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 Diagrammer
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 Project
Create the Persistence Model
Create the Data Model and test it
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
7 of 80 12/1/2009 2:00 PM
Run the Data Model outside Java EE container
Create ADF data controls from EJB Session
Beans
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 an 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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
8 of 80 12/1/2009 2:00 PM
Click Next.
3. In the Create Project dialog, set Project Name to EJBModel then click Finish.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
9 of 80 12/1/2009 2:00 PM
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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
10 of 80 12/1/2009 2:00 PM
6. Click the Application Navigator tab. You see the application and project you just created.
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.
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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
11 of 80 12/1/2009 2:00 PM
3. In Select EJB Version, select EJB 3.0 -- JPA Entities as the EJB version, then Next.
4. Click Next to skip the persistence unit definition.
5. In the Type of Connection page choose the Online Database Connection option. Then click
Next.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
12 of 80 12/1/2009 2:00 PM
6. In the Database Connection Details page, select HRConn as the connection to use.
Click Next
7. 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
.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
13 of 80 12/1/2009 2:00 PM
Click Next.
8. In this step, make sure the package name is oracle.
Click Next, then Finish.
9. In the Application Navigator one java file is created for Departments and one for Employees.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
14 of 80 12/1/2009 2:00 PM
10.Click the Save All icon to save your work.
11.Right click the EJBModel node in the Application Navigator and select New.
12. In the New Gallery select Business Tier | EJB as the category and double click EJB Diagram
(JPA/EJB 3.0).
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
15 of 80 12/1/2009 2:00 PM
13. In the Create EJB Diagram dialog, change the default name for the diagram (EJB Diagram1) to
EJB3 and verify oracle is the Package name.
Click OK.
On the Associate Diagram With Persistence Unit dialog, click OK to accept the proposed
Persistence Unit EJBModel (EJBModel.jpr).
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
16 of 80 12/1/2009 2:00 PM
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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
17 of 80 12/1/2009 2:00 PM
16.The diagram displays the EJB components that you just created from the Departments and
Employees tables. Reorganize the layout of the diagram to have both entities horizontally aligned.
You can tidy the diagram by selecting relationships and using the Straighten lines option from the
context menu.
17.Click the Save All icon to save your work.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
18 of 80 12/1/2009 2:00 PM
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.
2. Select the Session Bean component then drag and drop it onto the diagram.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
19 of 80 12/1/2009 2:00 PM
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
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
20 of 80 12/1/2009 2:00 PM
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 select the merge, remove and the
getFindAll methods for each entity, then click Next.
5. In the Class Definition step, make sure that the full name for Bean Class is
oracle.HRFacadeBean, and then click Next.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
21 of 80 12/1/2009 2:00 PM
6. In the following step, ensure that both Remote and Local interface implementations are
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:
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
22 of 80 12/1/2009 2:00 PM
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")
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
23 of 80 12/1/2009 2:00 PM
})
Note: Any symbol in Java code beginning with @ is known as an annotation. The use of
annotations allows 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
@JoinColumnSpecifies 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 fromEmployees 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
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
24 of 80 12/1/2009 2:00 PM
descriptors as in earlier versions.
11.Click the Make icon to compile the Employees.java class.
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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
25 of 80 12/1/2009 2:00 PM
13. Expand the Employees node of the dialog. Notice that the new named query
getEmployeesFindByName appears as an exposable method. Select it and click OK.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
26 of 80 12/1/2009 2:00 PM
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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
27 of 80 12/1/2009 2:00 PM
15. Select IntegratedWebLogicServer as the Application Server Connection.
Click OK.
16. Review the code of the HRFacadeClient class and correct the reported error for the
getEmployeesFindByName() method by adding a value parameter "P%" so that it looks
like the following:
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
28 of 80 12/1/2009 2:00 PM
Click the Save All icon to save your work.
17. 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 WebLogicServer is started.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
29 of 80 12/1/2009 2:00 PM
18. Right click HRFacadeClient and select Run from context.
19. The Log window returns the database data based on the three methods the client contains.
20. To better visualize the result of the findByName method, in the HRFacadeClient java class,
comment out the for loop corresponding to the getEmployeesFindAll() method, and
comment out the for loop corresponding to the getDepartmentsFindAll() method. Your
code should look something like this:
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
30 of 80 12/1/2009 2:00 PM
21.Click the Make button to recompile the class, and ensure that no errors are returned.
22. Right click the HRFacadeClient class and select Run from context.
23. The Log window should now display the returned rows retrieved by your ' P%' clause.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
31 of 80 12/1/2009 2:00 PM
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. 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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
32 of 80 12/1/2009 2:00 PM
2. 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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
33 of 80 12/1/2009 2:00 PM
Click Next.
4. All methods should be selected by default. Deselect some of them so that your selection looks
like the following image.
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.getEmployeesFindByName("P%").get(0);
notice that you can use code coach to help you with 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
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
34 of 80 12/1/2009 2:00 PM
Employees a =
javaServiceFacade.getEmployeesFindByName("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.
8. The Log window displays the result of the execution of the class running outside Java EE
container, returning the lastName of the first of the retrieved records (Payam Kaufling).
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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
35 of 80 12/1/2009 2:00 PM
Back to Topic
Back to Topic List
Creating ADF data controls from EJB Session Beans
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
To create ADF data controls from EJB Session Beans, perform the following steps:
1. Right-click the HRFacadeBean node in the Application Navigator and select Create Data
Control from context.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
36 of 80 12/1/2009 2:00 PM
2. In the Choose EJB Interface dialog, select Local, and click OK.
Click the Save All icon to save your work.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
37 of 80 12/1/2009 2:00 PM
3. The Application Navigator should now look like this:
4. 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
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
38 of 80 12/1/2009 2:00 PM
select New Project from context.
2. In the New Gallery, select the Generic Project item.
Click OK.
3. In the Create Project dialog, set Project Name to UserInterface then Finish.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
39 of 80 12/1/2009 2:00 PM
4. In the Application Navigator, right click the UserInterface node and select Project Properties from
context.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
40 of 80 12/1/2009 2:00 PM
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.
Click OK.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
41 of 80 12/1/2009 2:00 PM
The libraries are added to the project.
7.Still in the Project Properties dialog, select the Technology Scope node. In the Project Technologies tab,
select JSF in the Available pane, and using the right arrow button, shuttle it in the Selected pane.
Notice that selecting JSF automatically propagates the required associated technologies (Java - JSP and
Servlets)
Click OK. Then, click the save all icon to save your work.
8.The Application Navigator should now look like this:
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
42 of 80 12/1/2009 2:00 PM
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.
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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
43 of 80 12/1/2009 2:00 PM
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. From the Component Palette, drag and drop another JSF Page below the first one. Rename the
page search.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
44 of 80 12/1/2009 2:00 PM
6. 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.
7. Modify the default label, 'success', by clicking it and typing query over it. Notice that there is a
warning icon above the Navigation Case. This is because you have not yet created the JSF pages
and so indicates that the Navigation Case would be looking for a page that doesn't exist. This
warning goes away when you create the respective pages.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
45 of 80 12/1/2009 2:00 PM
8. 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.
9. 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 theicon for the destination JSF page (browse) for the navigation case.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
46 of 80 12/1/2009 2:00 PM
10. Modify the default label, 'success', by selecting it and typing browse over it.
11. In the same way add navigation cases between the browse and search JSF pages. Name the
one that goes to the search page, search, and the one that returns, browse.
Your diagram should now look something like the image below.
12. 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 Departments
Employees Master Detail page.
1. On the Page Flow diagram, double-click the browse icon to launch the Create JSF JSP wizard.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
47 of 80 12/1/2009 2:00 PM
2. The file name should be browse.jspx. Check the Create as XML Document checkbox, and in the
Initial Page Layout and Content area, click the Quick Start Layout radio button. It is best practice to use
the quick start layouts to avoid display issues. Click Browse to choose a layout.
3. In the Component Gallery accept the default, One Column layout category, and click Apply Themes in the
Options pane. Themes add color styling to some of the components used in the quick start layouts and
create a nicer-looking page.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
48 of 80 12/1/2009 2:00 PM
Click OK to save the layout selection. In the Create JSF Page dialog click OK to create the page.
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 the
department.
4. In the Component Palette, ADF Faces library, select the layout section and drag a Panel Stretch Layout
component onto the page
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
49 of 80 12/1/2009 2:00 PM
5. From the Component Palette, drag a Panel Splitter component onto the middle of the page (the cursor
should be to the left of the center tag).
6. Open the Data Controls accordion and expand the HRFacadeLocal node, then drag and drop the
DepartmentsFindAll node within the first facet.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
50 of 80 12/1/2009 2:00 PM
In the pop up menu, select Forms | ADF Read-only Form
7. In the Edit Form Fields, check the Include Navigation Controls option and delete all columns except the
following:departmentIddepartmentName
locationId
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
51 of 80 12/1/2009 2:00 PM
Click OK.
8. In the Component Palette, Layout group, select Panel Collection and drag and drop it into the second
facet.
9. In the Data Controls, expand the departmentsFindAll node, select the employeesList node and drop it in
the second facet.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
52 of 80 12/1/2009 2:00 PM
In the pop up menu, select Tables | ADF Read-only Table
10. In the Edit Table Columns dialog delete all columns except the following:commissionPct,email,employeeId,firstName,hiredate,jobId,lastName,phoneNumber,
salary,and select Row Selection, Filtering and Sorting options.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
53 of 80 12/1/2009 2:00 PM
Click OK.
The page should now look like this:
11. In the Property Inspector set the Column Selection property of the table to single.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
54 of 80 12/1/2009 2:00 PM
12. In the Structure pane, select the af:panelSplitter pane and in the Property Inspector, set the Orientation to
vertical.
13.Select the af:panelStretchLayout tag and using the Property Inspector, for the Style | Box tabs set the
Width to 600 Pixels and the Height to 400 Pixels.
14.Reduce the height of the Departments block.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
55 of 80 12/1/2009 2:00 PM
15.You want the employees section of this page to refresh when the user navigates between departments. Set
the Partial Page Rendering 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).
16. In the Edit Property dialog, expand facet (first) | panelFormLayout - Departments | facet (footer) |
panelGroupLayout to expose the navigation buttons. Use the shuttle buttons to add all four buttons to the
selected list.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
56 of 80 12/1/2009 2:00 PM
Click OK. Now, when the user clicks any of the 4 buttons, the employees list will refresh to reflect the
employees within the displayed department.
17.From the Component Palette, Common Components, select the Panel Menu Bar component and drop it
onto the Facet Top tag, in the Design view of the page.
18.Click the Menu component then drag and drop it inside the Menu Bar.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
57 of 80 12/1/2009 2:00 PM
19. In the Property Inspector change the Text from menu 1 to Options.
20.Click the Behavior tab and set the Detachable field to true.
21. In the Structure Pane, right click the af:menu tag and from context select Insert Inside af:menu |
MenuItem.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
58 of 80 12/1/2009 2:00 PM
22. In the Property Inspector, using the Common tab, change the Text to Query and from the drop down list
set the Action to query.
23.Repeat step 21 to add another menu item. Using the Property Inspector change the Text of this menu item
to Search and from the drop down list set the Action to search.
24.Click the save all icon to save your work.
Back to Topic List
Creating a Query/Edit Page
In the next few steps, you use ADF Faces to build 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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
59 of 80 12/1/2009 2:00 PM
2. The file name should be query.jspx. Check the Create as XML Document checkbox, and in the Initial
Page Layout and Content area, click the Quick Start Layout radio button. Click Browse to choose a
layout.
3. In the Component Gallery, accept the One Column category and click Apply Themes in the Options pane.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
60 of 80 12/1/2009 2:00 PM
Click OK to save the layout selection. In the Create JSF Page dialog click OK to create the page.
You now have an empty query.jspx page.
4. In the Data Controls accordion, under the HRFacadeLocal node, select the
getEmployeesFindByName(Object) node and drop it onto the page.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
61 of 80 12/1/2009 2:00 PM
From the popup menu, select Parameters | ADF Parameter Form.
5. In the Edit Form Fields click OK to accept the proposed fields.
6. The page design should look like this:
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
62 of 80 12/1/2009 2:00 PM
.
7. In the Data Control accordion, expand the getEmployeesFindByName node and select the Employees
node. Drop it onto the page below the Parameter Form.
From the popup menu, select Forms | ADF Form.
8. In the Edit Form Fields, check both checkboxes (Include Navigation Controls - Include Submit Button)
and delete all columns except the following:commissionPct,email,employeeId,firstName,hiredate,jobId,
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
63 of 80 12/1/2009 2:00 PM
lastName,phoneNumber,salary.
Click OK.
9. The design for the query page should look like this:
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
64 of 80 12/1/2009 2:00 PM
10.This page needs to be updatable; to specify this, select the mergeEmployees(Employees) method in
the Data Controls pane, and drop it onto the Submit button.
In the Edit Action Binding dialog, in the Parameters section, click the down arrow in the Value field and
select Show EL Expression Builder.
11. In the Variables dialog, expand ADF Bindings | Bindings |getEmployeesFindByNameIterator |
currentRow and select dataProvider. Notice that as you select each node in the expression. the editor
adds it to the expression in the top of the window.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
65 of 80 12/1/2009 2:00 PM
Click OK, then click OK again.
12. In the Confirm Component Rebinding dialog, click OK.
13.Back in the design view of the query page, select the mergeEmployees button
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
66 of 80 12/1/2009 2:00 PM
14. 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.
15.Click the save all icon to save your work.
16.Your page should now look like this:
Back to Topic List
Creating a Search Page
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
67 of 80 12/1/2009 2:00 PM
In the next few steps, you use ADF Faces to build a search page using the new ADF query feature.
1.Switch back to the Page Flow diagram (click the faces-config.xml tab), and double-click the search icon to
launch the page wizard.
2.The file name should be search.jspx. Check the Create as XML Document checkbox, and in the
Initial Page Layout and Content area, click the Quick Start Layout radio button. Click Browse to choose a
layout.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
68 of 80 12/1/2009 2:00 PM
3. In the Component Gallery, accept the One Column category and click Apply Themes in the Options pane.
Click OK to save the layout selection. In the Create JSF Page dialog click OK to create the page.
You now have an empty search.jspx page.
4. In the Data Controls accordion, under the HRFacadeLocal node, expand the departmentsFindAll node
and then the Named Criteria node. Select All Queriable Attributes and drag and drop it onto the page.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
69 of 80 12/1/2009 2:00 PM
From the popup menu, select Query | ADF Query Panel with Table.
5. In the Edit Form Fields delete all columns except the following:departmentIddepartmentNamelocationId
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
70 of 80 12/1/2009 2:00 PM
6.The design for the search page should look like this:
.
Running the JSF Pages
Now that you have built your application, you need to test it. JDeveloper makes it easy to test JSF pages 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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
71 of 80 12/1/2009 2:00 PM
2. Your page is loaded in your default browser and should look like the following:
3. Click the Next button to find a department with several employees in its list, for example
department 30. Then click in the firstName column and experiment sorting the names in
ascending/descending order using the up/down arrow icons.
4. Scroll right to select the lastName column header and move it left to position it in the table just
after the firstName column.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
72 of 80 12/1/2009 2:00 PM
5. Select the column headers and reorder the columns in this sequence: employeeId,firstName, lastName, email, jobId, salary, hireDate,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.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
73 of 80 12/1/2009 2:00 PM
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
74 of 80 12/1/2009 2:00 PM
7. The query page opens in the browser. In the queryEmployeesFindByName_p_name field enter
any name or partial name. i.e. A% then click the getEmployeesFindByName button.
8. Experiment with the Navigation buttons if your query retrieved more than one record.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
75 of 80 12/1/2009 2:00 PM
9. Click in the hireDate field to see the Help text describing the date format to use.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
76 of 80 12/1/2009 2:00 PM
10. Increase Alexander's salary to 10000 and click the Save button to commit the change and take
you back to the browse page.
11. Back in the browse page, click the Options menu again, and this time select Search to navigate
to the search page.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
77 of 80 12/1/2009 2:00 PM
12. In the search criteria area, click the Any radio button in the Match field, and type IT in the
departmentName field. Click Search.
13. The search returns four departments that contain IT in their name.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
78 of 80 12/1/2009 2:00 PM
Notice some of the other functionalities of the ADF query feature, including advanced searches
and the ability to save searches.
14. 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/Edit page
Create a Search page
Run the JSF pages
Back to Topic List
Place the cursor over this icon to hide all screenshots.
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
79 of 80 12/1/2009 2:00 PM
Build a Web Application with JDeveloper 11g Using EJB, JPA, and Ja... http://www.oracle.com/technology/obe/obe11jdev/ps1/ejb/ejb.html?_t...
80 of 80 12/1/2009 2:00 PM