Developing Rich Web Applications

With Oracle ADF Using JDeveloper

This tutorial shows you how to build a rich

Web application that interacts with a
database. You'll be using Oracle JDeveloper
12cVersion 12.2.1.1.0 and the Oracle ADF
framework to build the application, and in the
process you'll work with

Oracle ADF Business Components

Oracle ADF Faces Rich Client Components
Oracle ADF Task Flows.
What you will do?
You Wil create a complete
application including business
services, user interface and page
flows. The focus of the tutorial is to
illustrate the visual and declarative
approach that Oracle ADF provides
for Java EE application development.
While working through the tutorial
notice how ADF saves you from
writing low level code and speeds up
Before starting this tutorial you
should:
Before starting this tutorial you should:Have
access to or have installed Oracle JDeveloper
12.2 You can download it from
Oracle Technology Network. Install it into a
directory of your choice, which, in this tutorial is
referred to as JDEVELOPER_HOME.
Have access to, or have installed an Oracle 11g
database, including the HR schema. (Note that
the schema may be locked for security purposes.
If this is the case you will need to log in
tosqlplususing the system user, and unlock it).
About The Application
The image below shows you an example of the page you'll create.
Purpose of Application
The application that you create
displays information about
departments and employees. You
create several JSF pages that enable
you to query and update the data in
the database. You also create a page
that is used as a display container for
several task flows.
Creating a Fusion Web Application
and Building the Business Service
When you work in JDeveloper, you organize your
work in projects within an application. JDeveloper
provides several template applications that you
can use when creating an application and
projects. The template applications are pre-
configured with a basic set of technologies that
are needed for developing the various types of
applications. You create your working
environment by selecting the template that best
fits your needs and then configure it to add any
additional technologies you plan to use.
First Part of the Application
In the first part of this tutorial you
are going to create a new Fusion Web
application and build reusable
business components that will access
the database.
You'll be using Oracle ADF Business
Components to map Java objects to
existing tables in your database.
Step 1: Create a Fusion Web
Application
1. Start Jdeveloper
2. In the Select Role dialog,
selectStudio Developer (All
Features)and clickOK
3. Click theNew Applicationlink in
the Applications window.
4. In the New Gallery, selectADF
Fusion Web Applicationand
clickOK.
typeHRSystemas the name. If required, you can change
the directory path to create your files in another location.
In the Application Package Prefix field set the value to
bedemoand clickNext
In the Name your project page ensure that the
project name isModel(the default). Notice that
ADF Business Components and Java are listed as
the project features of a Fusion Web application.
The Configure Java settings page allows you to
define a default package, a Java source path and
an output directory. ClickNextto accept the
default values.
In the second Name your project page, ensure
that the Project Name isViewController. Scroll
through the list of project features to see the
types of technologies that can be used with a
Fusion Web application and click Next
In the Configure Java settings page accept the
defaults and clickFinishto create your Fusion
Web application and projects.
The HRSystem application and the two projects are displayed
in the Applications Navigator on the left of the screen. Save
your work.

Notice too, the Checklist on the right side of the screen.

This checklist is displayed by default when a Fusion Web application
is created. It is designed as a guide to lead you through the tasks
involved in building this type of application. The next steps show
you how the checklist might be used while developing an
application.
Step 2: Build the Business
Service
1. In the Check List Overview, click theConnect to a
Databasestep
2. The step expands showing useful information such as
prerequisites required for performing the task and detailed
instructions on how to perform the task. Click theCreate a
Database Connectionbutton
3. Enter the appropriate Oracle JDBC Settings to
point to the right host, port and SID for your
database. Click theTest Connectionbutton to
verify that you can connect successfully. Enter the
database user name and password correctly. Click
ok.
4. Click the down arrow to shrink the Connect to a Database
step.
5. in the Checklist, set the status of theConnect to a
Databasestep toDone
6. Click theBuild Business Servicesstep to expand it, then
click theGo to Substepsbutton
7. In the list of substeps, click theCreate Entity Objects
and Associationssub step.
8. Click theCreate Entity Objects and
Associationsbutton.
in the Select Project for Action dialog, select
theModelproject and clickOK.
10. In the Initialize Business Components Project dialog
select theHRConnconnection if it is not already selected.
ClickOK
11. The Create Business Components from Tables wizard
launches. In the Entity Objects page, click theQuerybutton to
examine the data dictionary and see available tables.
12. Select theDEPARTMENTSandEMPLOYEEStables in the
Available list, and click the right arrow to move your selections
to the Selected list. This step creates updatable entity objects
based on the tables selected.
13. In the Entity-based View Objects page of the wizard,
moveDepartments(HR.DEPARTMENTS)
andEmployees(HR.EMPLOYEES) to the Selected list. This
step creates matching view objects DepartmentsView and
Employees View for performing queries on the entity objects
you just created. Click Next to Continue.
14. in the Query-based View Objects page, click
theQuerybutton and then moveJOBSto the Selected list.
This step creates a read-only view object that queries the Jobs
table. Then clickNextto continue.
15. In the Application Module page, clickFinishto create the
business components in the Model project.
16. In the Checklist, set the status of theCreate Entity
Objects and Associationsstep toDone.
17. Click theClose Step 3button.
18. Click the Back to Checklist link and set the status of
theBuild Business Servicesstep toDone
19. In the Applications Navigator right-
clickAppModuleand selectRunto invoke the application
module tester. This is a small Swing-based application that
allows you to test the ADF Business Components you have just
created.
20. In the Oracle ADF Model Tester window, double-click
theEmpDeptFkLink1node to show the department and
employees data. Navigate between the records using
theNextbutton and notice the automatic master-detail
synchronization.
21. Click theSpecify View Criteriabutton (binocular icon)in
the master toolbar, to enter search criteria for your data.
Specify1700in theLocationIDfield and click theFindbutton
to execute the query.
22. The form now only shows departments in this location. Use
theNextbutton to scroll through the departments at
Location 1700.
23. You need to remove the parameter value of the search
criteria to access all departments again.
24. Close the Oracle ADF Model Tester window, and back in
JDeveloper, click theSave Allicon on the JDeveloper menu
bar, or selectFile > Save Allfrom the menu.
Part 2: Developing the User
Interface
JavaServer Faces (JSF) is a standard Java
EE technology that simplifies Web
development.
In this part of the tutorial you create a JSF
page to access the business components
that you created In the previous part.
You create a form that can be used to
display and modify data. You use a master-
detail relationship to display information
about employees in a department.
To build the page you'll use Oracle ADF Faces Rich Client
components. These components allow you to build an Ajax-
based rich Web UI without writing low-level HTML and
Javascript code. After Development Page will look like the
following Page.
Step 1: Create a JSF Page
1. Right-click theViewControllerproject node in the
Applications window, and selectNew > From Gallery.
The Web part of the application is
developed in a separate project called
the ViewController project, which you
created in the previous part of this
tutorial when you created the Fusion
Web application.

Maintaining a separation between the

Model layer and the user interface by
developing them in separate projects,
makes the business services layer
more reusable.
2. In the New Gallery, navigate toJSF/Faceletsunder
theWeb Tiernode, and choosePagein the Items pane.
ClickOK.
3. In the Create JSF Page dialog, rename the page
toDeptEmpPage.jsf; make sure the Document Type radio
button is set toFacelets, and in the Page Layout tab select
the Reference ADF Page Template radio button and
chooseOracle Three Column Layout.
4. The page displays in the Design Editor. The template has
three columns in it, but you only need two in the page, so
delete the third one.
In the Structure window,expand af:form > af:pageTemplate >
Template facets. Right-click af:facet -endand chooseDelete.
You will notice that the end facet is not deleted from the list of
page template facets. It is however removed from the page
usage.
5. Withaf:pageTemplateselected in the Structure window,
in the Properties window set thestartColumnSizeproperty
to350.
6. In the Components window expand theLayoutgroup of
components and locate thePanel Accordioncomponent in
theInteractive Containers and Headerssection. Drag it
into thestartfacet of your page.
7. Selectaf:showDetailItem(the panel accordion that you
just added to the page in the previous step) in the Structure
window and in the Properties window change its Text property
toDepartments.
8. Right-click the newDepartmentsShow Detail Item, and
chooseInsert after Show Detail Item - Departments >
Show Detail Item. This adds another accordion to your page.
9. Change theTextproperty toMore Info .
This is another way of adding components to a page using
context menus directly inside the Design Editor (instead of
dragging and dropping from the Components window).
10. From theLayoutcomponents, click and drag aPanel
Splittercomponent onto thecenterfacet of your page
11. In the Properties window change
theOrientationproperty of the new splitter tovertical.
13. From the Layout components, drag a Panel Collection
component into the first facet at the top of the splitter on your
page.
It might be easiest to use the Structure window to drop the
component in the correct position
A panel collection is a component that aggregates collection
components like table, treeTable and tree to display
standard/application menus, toolbars and status bar items
13. Using the Structure window, drag aPanel
Tabbedcomponent into thesecondfacet of the splitter on
your page.
14. Double-click the tabDeptEmpPage.jsfat the top of the
page to view it in its entirety. The page should look like the
screen shot below.
15. Click theSave Allicon on the JDeveloper menu bar to
save your work.
Step 2: Bind Data Controls to the
Page
In this step you bind the business
components you created in Part 1 of
this tutorial to the user interface. You
do this with simple drag and drop
operations; behind the scenes the
ADF Model layer takes care of
binding the data for you.
1. In the Design Editor click theDepartmentsaccordion to
expand it.
2. In the Applications Navigator expand theData
Controlsaccordion, and in it
expandAppModuleDataControlto expose the business
services you defined in the first part of this tutorial.
3. Drag theDepartmentsView1data control into
theDepartmentsaccordion in your JSF page. When
prompted to choose the type of component you want to
create, chooseADF Form.
4. In theEdit Form Fieldsdialog, check theRead-Only
FormandRow Navigation Controlscheckbox and clickOK.
5. In the Data Controls accordion
expandDepartmentsView1to expose the fields it contains,
as well as the relatedEmployeesView3control for the
employees in each department. Note that these are the
"detail" employees for the "master" departments - they are
linked and therefore at runtime, the employees you see in this
view object are the ones who belong to the selected (or
viewable) department.
6. Drag theEmployeesView3data control onto thePanel
Collectionthat you created in the first facet of the
PanelSplitter. Create it as anADF Table...