This tutorial shows you how to build a rich Internet application
that interacts with a database. You'll be using Oracle JDeveloper 11g
Version 11.1.1.2.0 and the ADF framework to build the application, and in the
process you'll work with Oracle ADF Business Components, Oracle ADF Faces Rich
Client Components and Oracle ADF Task Flows.
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
This tutorial takes you through a simple scenario of building
a rich internet application that provides a user interface to access database
tables. You'll be using Oracle JDeveloper 11g Version 11.1.1.2.0 and
Oracle ADF 11g to create a complete application including business services,
user interface and page flows.
The focus of this 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
and speeds up your development process.
The application that you create in this tutorial displays
information on department and employees. You will create several JSF pages that
enable you to query and update the data in the database.
Have access to or have installed Oracle JDeveloper
11g Version 11.1.1.2.0. You can download it from Oracle
Technology Network.
2.
This tutorial uses the sample HR schema that comes
with the recent versions of the Oracle database.
For security reasons this schema is usually locked. We'll therefore
unlock the user in the next steps. From a command line invoke sqlplus
and login using the system user; provide the password for the account.
3.
Type the following command in the SQL> prompt alter user HR identified by HR account unlock;
Once the command got executed you can exit sqlplus and the command line
window.
4.
Start JDeveloper using the shortcut your installation
provided.
If you are prompted to migrate from an older version
choose No. When prompted to choose a role - choose
the default role.
Creating a
New Fusion Application and Business Components
When you work in JDeveloper, you organize your work
in projects within an application. JDeveloper provides several templates that
you can use to create an Application and projects. The templates are pre configured
with a basic set of technologies that are needed for developing various types
of applications, and you create your working environment by selecting the template
that fits your needs. You can then configure it to add any other technologies
you plan to use.
In the first section you are going to create a new Application
using the Fusion technology and build reusable business components that will
access the database.
You'll be using the Oracle ADF Business Components technology to map Java objects
to existing tables in your database.
1.
In the Applications Navigator, click New
Application. Another option is to use the File->New... menu
option to create a new application.
2.
In the Create Application dialog
box, specify the Application Name to be HRSystem. Notice
that the directory changes to match the new name. You can change the
C:\JDeveloper\mywork part of the path to create your files in another
location.
In the Application Package Prefix field set the value to be demo.
In the Application Templates choose the Fusion Web Application
(ADF) and click Finish.
The Overview pane displays a Checklist you can refer
to as a guide for developing a Fusion Web Application.
The Checklist is displayed by default when a Fusion Web application
is created.
3.
In the Application Navigator you'll see two new
projects now, one called Model and the other called
ViewController.
4.
In the CheckList Overview, click the Connect
to a Database step.
5.
The step expands showing useful information such
as prerequisites required for performing this task. Click the Create
a Database Connection button.
6.
Specify the following properties for the new connection
you are creating:
Connection Name
HRConn
Username
hr
Password
hr
Enter the Oracle JDBC Settings properly to point to the
right host, port and SID
for your database. Click the Test Connection button and
verify that you got success.
Once done click the OK button.
7.
In the Checklist pane, set the status of the Connect
to a Database step to Done.
8.
Click the Build Business Services
step to expand it, then click the Go to Substeps button.
9.
In the subtask list, click the Create Entity
Objects and Associations subtask.
Then click the Create Entity Objects and Associations
button.
10.
In the Select Project for Action dialog, select
the Model project.
11.
In the Initialize Business Components Project dialog
the HRConn connection should be selected.
Click OK.
12.
In the Entity Objects page, click the Query button
to examine the data dictionary and see available tables.
13.
Select the DEPARTMENTS and EMPLOYEES
tables in theAvailable list, and click the right arrow
to move your
selections to the Selected list. This step creates updateable Entity Objects
based on the tables you chose.
Click Next to continue.
14.
In the Updateable View Objects dialog, move Departments1
(HR.DEPARTMENTS) and Employees1 (HR.EMPLOYEES) to the
Selected list. This step creates matching view objects to perform queries
on the entity object you created before.
Click Next to continue.
15.
In the Read Only View Objects dialog, click the Query
button and then move JOBS to the Selected list. This
step creates a read only view object that queries the Jobs table.
Click Next to continue.
16.
In the Application Module dialog, click Finish to
create the business components in the Model project.
17.
In the Checklist, set the status of the Create Entity Objects
and Associations step to Done.
Then click the Close Step 3 button.
Note: Since steps 3.2, 3.3 and 3.4 have also been completed, we could
as well set their status to done, but we'll do it at a higher level.
18.
Set the status of the Build Business Services step
to Done.
19.
In the Application Navigator Right-click AppModel
and select Run to 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 Business Component Browser window, double click the EmpDeptFkLink1
node to show the department and employees details. Navigate between the
records using the Next button and watch the automatic master details synchronization.
21.
Click the Specify View Criteria (binocular icon) button
in the master toolbar, to enter search criteria for your data. Specify
1700 in the LocationID field and click the Find
button to execute the query.
22.
The form would now only show departments from this location.
Click around the Oracle Business Component Browser to see other data
and functionality offered for you.
23.
Close the Oracle Business Component Browser window, and back in JDeveloper,
click the Save All
icon on the JDeveloper menu bar, or select File | Save All from
the menu.
In this topic you refine your business services by adding validation
rules, formatting and default values.To add validation
rules, perform the following steps:
1.
In the Application Navigator locate the Employees
entity object and double click it to open it for editing.
2.
In the Employees1.xml window, click the Attributes
node and locate the Salary attribute, and click it. Scroll down
in the page to the validation section and click the Add icon
to add a
new Validation rule.
3.
In the Add Validation Rule dialog choose Range
from the Rule Type drop down list. Note the various other types of rules
you can define here. In the Operator drop down keep the Between
value, and type 0 for the minimum value and 99000
for the maximum value fields.
4.
Click the Failure Handling tab to define an error
message that will appear when the validation fails. In the Message
Text field type an error message like "Salary out of
range 0 to 99,000".
Click OK.
5.
Next we'll add a default value to the hired date field - so when
we create a new employee we'll have today's date as the default value.
Back in the Employees.xml window, locate the HireDate
attribute, and click it. If not already there, bring up the properties
window using CTRL+Shift+I.
In the Value section locate the Default Value
Type property and choose Expression, then
set the Default Value property to adf.currentDate.
This will make sure the default value for a new record is set to today's
date.
6.
You can also specify UI Hints for attribute to control how they
will display by default in the forms and pages that will use them. In
our case we'll add a default format mask for the Hired date field you
can also specify labels and tooltip helps here.
In the UI Hints section of the property inspector locate
the Format Type property and select Simple
Date.
Locate the Format property and type MM/dd/yyyy.
7.
You can now run the Application Module Tester again (right click
Run on the AppModule) to check the new validation,
default value for new record and UI hint you added. Click on any of
the EmployeesView in the tester.
8.
Enter an out of range value as salary to check validation
and the error message.
9.
Click the Insert Record button
and see the default value you defined appear for the HireDate
field.
Close the Tester.
10.
Click the Save All
icon on the JDeveloper menu bar, or select File | Save All from
the menu.
JavaServer Faces or JSF for short is a standard Java EE
technology that simplifies Web development.
In this section you create a JSF page to access the business components that
you created in the previous section. You learn how to create a form that can
be used to displays and modify data. You'll also use a master-detail relationship
to display the information about employees in each department. To build the
page you'll be using the Oracle ADF Faces Rich Client Components - these components
allow you to build Ajax-based rich Web UI without writing low level HTML and
Javascript code.
The Web part of the application is developed in a separate project called the
viewcontroller project. This separation between the Model layer and the user
interface makes the business services more reusable.
1.
We'll start by creating a new Web page. Right-click the ViewController
project node in the Application Navigator, and select New....
2.
In the New Gallery window, navigate to the Web Tier
and JSF node, and choose the JSF Page
option.
Click OK.
3.
In the Create JSF Page dialog box, rename the page to DeptEmpPage.jspx,
in the Page Template drop down box select Oracle Three Column
Layout, and make sure the Create as XML Document
is checked.
Click OK.
4.
Your page will be opened in the visual design view. The template
has three columns in it, since we only need two in our page, we'll
delete the third one.
Place your cursor in the right-most section called end
and right click to choose Delete.
5.
Now we are going to add some layout components to our page. In
the component palette window expand the Layout accordion
and click and drag the Panel Accordion component
into the Start area of your page.
6.
Click the ShowDetails1 accordion that was created
and in the Property Inspector change its Text property
to Departments.
7.
Right click the new Departments accordion and
choose Insert After Show Details Item - Departments -> Show
Detail Item. This adds one more accordion to your page.
Change its Text property to More Info.
This was another way to add components to a page using context menus
directly inside the Design view.
8.
From the Layout components, click and drag a
Panel Splitter component onto the Center
area of your page.
9.
In the Property Inspector change the Orientation
property of the new splitter to be Vertical.
10.
From the Layout components, click and drag a
Panel Collection component into the first
area at the top of your splitter on your page.
11.
From the Layout components, click and drag a
Panel Tab component into the second
area at the bottom of your splitter on your page.
12.
Your page should look like the image below.
Click the Save All
icon on the JDeveloper menu bar to save your work.
In the next few steps you are going to bind the business components
you created to your user interface. You'll do this with simple drag and drop operations
- behind the scene the ADF Model layer takes care of this binding for you.
1.
In Page design pane, click the Departments accordion
to expand it.
2.
In the Application Navigator expand the Data Controls
accordion, and in it expand the AppModuleDataControl
to expose the business services you defined in the first part of this
lab.
3.
Drag the DepartmentsView1 data control into the
Departments accordion in your JSF page. When prompted
to choose a component to Create choose Forms->ADF Read-Only
Form.
4.
In the Edit Form fields dialog, check the Include Navigation
Controls check box.
Click OK.
5.
In the Data Controls accordion expand the DepartmentsView1
control to expose the fields it contains as well as the related EmployeesView3
control for the employees in each department.
Note that these are the detail employees for the master departments
- they are linked and therefore the employees you'll see in this view
object will be the ones working in a specific department you are looking
at.
6.
Drag the EmployeesView3 data control into the
Panel Collection on the top right side of your JSF
page.
When prompted to choose a component to Create choose Tables->ADF
Read-Only Table.
7.
In the Edit Table Columns dialog, check the three check boxes for
Row Selection, Sorting,and Filtering.
Click OK.
8.
Drag the EmployeesView3 data control again but
this time into the Tab on the bottom right side of
your JSF page.
When prompted to choose a component to Create choose Form->ADF
Form.
9.
In the Edit Form Fields dialog, check the check boxes for Include
Submit Button. Using your mouse and the Shift
key select the bottom three fields from the list CommissionPCT,
ManagerId, DepartmentID and delete them by pressing the Delete
button
at the top right.
Click OK.
10.
Your JSP should look like this:
10.
Click the Save All
icon on the JDeveloper menu bar to save your work.
Right click in your page and choose Run. This will
compile your project, build it, and launch the integrated WebLogic
Server to run it. Then a Web browser will open up and will display
your page. You can follow the progress of these steps in the log window
in JDeveloper.
11.
Once your page appears in your browser, using the splitter
resize the page area to display the data of the department. Then use
the Next button to scroll through the departments.
Notice that the data for the employees changes accordingly in the
table and the Form beneath it.
12.
Try to update the HireDate field for one of the
employees with an invalid date such as 11/11/123
and notice the error message when you try to leave the field.
Use the Clock Icon next to the field to bring up
a pop-up Calendar and choose a valid date.
13.
Update the Salary field to a value that will break
the validation you created before such as -9 and
click the Submit button to get the error message
you created.
14.
Browse to department 50 and notice that you can
now scroll the data in the employees table.
Click on one of the column header in the table to sort the data in
the table.
15.
Click a column heading in the table and drag it to reposition the
column in the table.
The new column order looks like the following:
16.
In the Filter field above the First Name column type B%
and hit Enter to filter the table to show only employees
whose name begins with B.
17.
Play with the other menu and buttons of the table to see additional
functionality. Once you are done, close the browser
and return to JDeveloper.
In the next few steps you are going to change the table of employees
on our page to add the ability to do column selection and bind the business
components to a graph representation to your user interface. You'll do this
with simple drag and drop operations - behind the scene the ADF Model layer
takes care of this binding for you.
1.
Back in JDeveloper select the Employees Table in the
JSF page design editor or in the structure pane. Set the Column
Selection Property of the table to Single.
2.
Next we'll add a graph representation of the data to our page - this
is done using the ADF Data Visualization set of JSF components.
In the Design Editor click the More Info accordion to
expand it. Then drag the EmployeesView3 data control
into the More Info accordion. When prompted to choose
a component to Create choose Graph....
The graph component is one of the ADF Faces Data Visualization components.
The Graph can be displayed as static PNG image or an interactive Flash
component. You can control these behaviors through the properties of the
graph component.
3.
In the Component Gallery Dialog choose Pie from the
list of graphs on the left and Pie again as a graph type.
Then click the OK button.
4.
In the Create Pie Graph dialog choose Salary for the
pie list and drag and drop LastName for the slices.
Then click the OK button.
5.
Click the Save All
icon on the JDeveloper menu bar to save your work.
6.
Right click within the page and select Run from context.
7.
This time note the additional behaviors for your table that are available
once you choose a column - such as Freeze and Wrap.
8.
Browse to department 30 then, expand the MoreInfo accordion and note the graph and the pop-up it displays
when you hover over it with your mouse.
When done, close the browser and return to JDeveloper.
In this section we'll add a new Business Service to our application
that will display a subset of the fields from the Employees table, along with
the department name from the Departments table. We'll also add calculated fields.
Oracle ADF Business Components allows you to create such complex updateable
components in a declarative way.
1.
In the Application Navigator right click the demo.model
package and choose New View Object.
2.
In the Name dialog update the Name field to be EmpDetails
and keep the default type of Updateable Access Through Entity Objects.
Click the Next button.
3.
In the Entity Objects dialog first select Employees
and shuttle it to the right, and then select the Departments
entity and add it to the right hand selection.
Note that only the Employees entity has the updateable checkbox checked
- the departments entity is used to read data only.
Click Next.
4.
In the Attributes dialog shuttle the following Employees
attributes to the right:
EmployeeId
FirstName
LastName
Salary
HireDate
JobId
And from the Departments entity shuttle the following
attributes to the right:
DepartmentID
DepartmentName
At this stage you can click the Finish button to
complete the view object creation.
5.
Next we are going to see how to add a calculated attribute to
our object - we'll add an attribute that will show the yearly salary.
In the EmpDetails.xml editor switch to the Attributes
section and click the Add button
to add a new attribute.
6.
In the New View Object Attribute dialog update the following fields:
Field
Value
Name
YearlySalary
Type
Number
Value Type
Expression
Value
Salary * 12
Click the OK button.
7.
In the next couple of steps we'll show how to add a list of values
to a field based on a set of values stored in another table. In this
case we'll add a list of values for possible job titles from the jobs
table.
In the EmpDetails.xml editor switch to the View
Accessors section click the Add button
to add
a new view accessor.
8.
In the View Accessors dialog shuttle the JobViews
to the right.
Click the OK button.
9.
In the EmpDetails.xml editor switch to the Attributes
section, select the JobId attribute and in the List
Of Values section click the Add button
.
10.
In the List of Values dialog select JobsView1
for the List Data Source field, and JobId as the
List Attribute.
11.
Still in the List of Values dialog Click the UI Hints
tab and choose Input Text with List of Values as
the Default List Type and then shuttle the Job Title
attribute to the right.
Click the OK button.
12.
Now we need to add the new object that we created to the data
model we exposed to the user interface developers.
In the Application Navigator double click the AppModule
to open it for editing and choose the Data Model
section of the editor.
13.
Click the EmpDetails view object and shuttle
it to the right.
14.
In the Application Navigator Right-click AppModel
and select Run to 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.
15.
Double click the EmpDetails view object to test
the functionality you defined.
16.
Try setting the Salary to -3
and note the error message once you leave the field. Note the date
format for HireDate and the fact that the department
name and the yearly salary are displayed.
Now invoke the list of values for the JobId to choose
a new job.
17.
The selected job gets populated.
18.
Close the Business Components Tester window without
committing the changes and back in JDeveloper, click the Save All
icon on
the JDeveloper menu bar to save your work.
Web applications usually have more than one page in them. In the
next section you are going to add another page to your application and use the
ADF Task Flow to define the navigation rules between the two pages. To add a page flow and navigate between pages, perform the following
steps:
1.
In the Application Navigator under the ViewController
project locate the file adf-config under the page
flows node. Double click it to open it in the editor. This
is where we define navigation in our application.
2.
Drag and drop the DeptEmpPage.jspx file from
the application navigator into the empty adf-config
diagram.
3.
From the Component Palette drag and drop a View
component into the adf-config diagram, and rename it to query.
This is going to be a new JSF page that we'll create in a minute.
4.
From the Component Palette choose a Control Flow Case
and then click on the DeptEmpPage and drag a line
to the query page.
Name this line goQuery.
5.
From the Component Palette choose another Control Flow
Case and then create an opposite flow from the query
page to the DeptEmpPage. Name this flow back. Save your work by pressing the save all button on the JDeveloper toolbar.
6.
Double click the query view in the diagram to
create the new page. Using the Page Template option,
select the Oracle Three Column Layout one in the
Create JSF page dialog.
Click OK.
7.
Expand the Data Controls accordion in the Application Navigator.
Locate the EmpDetails1 data control expand it and
expand the Named Criteria node under it. Select the
All Queriable Attributes and drag it into the center
area of the new query.jspx page.
When prompted to choose a component to Create choose Query
-> ADF Query Panel.
8.
In the Data Controls accordion select the EmpDetails1
data control and drag it into the center area of the page below the
query component.
When prompted to choose a component to Create choose Form->ADF
Form.
In the Edit Forms Details, check both the Include Navigation
Controls and the Include Submit Button.
Click OK.
9.
In the structure pane locate the Submit button,
right click it and choose Insert after af:command:Button -
Submit -> Button.
Using the property inspector change the Text of
the new button to be Back and for the Action
property select back from the drop down list. This
will cause the button to perform the navigation you defined in the
page flow.
10.
Next we'll add transaction operations to the page to allow you
to commit and rollback changes. In the Data Controls Palette expand
the application module level Operations node to locate
the commit and rollback operations. Drag the Commit
operation into the structure pane before the First Button.
When prompted for a drop target choose ADF Button
11.
Repeat the same steps for the Rollback operation.
12.
If you'll maximize the design editor at this stage by double clicking
the Query.jspx tab, your page should look like this:
13.
Switch back to editing the DeptEmpPage.jspx by
clicking on its tab or opening the file from the Application Navigator.
A quick way to navigate to this or any other file is using the global
find box at the top right of JDeveloper and typing the file name there,
t hen just click the file name to open it in the editor.
14.
In the page design, expand the Departments accordion.
From the Component Palette, choose a Button component
and drag it into the Departments accordion between
the First and Previous buttons.
Alternatively you can right click the First button and choose insert
after->button to add the new button.
Using the property inspector change the Text of
the button to be Query and for the Action
property type goQuery or select it from the drop
down list if available. This will cause the button to perform the
navigation you defined in the page flow.
15.
Click the Save All
icon on the JDeveloper menu bar to save your work, and then right
click the DeptEmpPage.jspx page and choose Run.
16.
When the page appears in your browser click
the Query button to navigate to your new page.
17.
In the new Query page, click the magnifying
glass icon next to the JobID field to bring
up a search form.
18.
Search for Jobs whose jobTitle begins with
A%.
Choose the Accountant title
and click OK.
Now click the Search button
in the Query page to return the results in the form below.
19.
You can continue playing with the form saving
your query criteria, creating more complex queries and updating data
for employees. Note how this form displays a view of the data that
matches the definition in the view object you created - including
information for Department name as well as a list of values for the
Job id.
You can also make changes to the data and commit
and rollback your transaction as needed.
In the next section we'll enhance our pages with additional Ajax
functionality leveraging the declarative development offered by the ADF Faces
components.
First we'll add an automatic update of the yearlySalary field based on changes
in the Salary field. Since we don't want to refresh the whole page, we'll use
the partial page refresh capability offered by ADF Faces
To do this we'll define the Salary field to autosubmit, and the yearlySalary
field to depend on the Salary field.
1.
Open the query.jspx file in the design editor
and locate the Salary field and click it. In the
property inspector window set the value of the Id
property to sal.
2.
Still in the Property Inspector under the Behavior
section set the AutoSubmit property to True
.
3.
Using the Structure Panel locate the YearlySalary
field. Another option to get to this field is to double click the
query.jspx tab to maximize the window and then locate the field in
the design editor.
Locate the PartialTriggers property under the Behavior
section and click the arrow to its right to choose Edit.
4.
In the Edit Property dialog locate the Salary
field and shuttle it to the right using the blue arrow.
Click the OK button.
5.
Click the Save All
icon on the JDeveloper menu bar to save your work, and Run
your page.
When the page comes up use the query section to locate employees
whose name begin with A%, then update the Salary
field for one of them.
Notice the immediate change in the YearlySalary
field once you leave the Salary field.
In this section we'll add a drop down menu to a page and use a couple of ADF
Faces operation components to add Javascript based operations to our page that
will export table data into an Excel spreadsheet and to a printable page.
1.
Open the DeptEmpPage.jspx file in the design editor
and click inside the menus place holder space in the
panel collection surrounding the Employees table. Right click to bring
up the context menu and choose Insert Inside Facet - menus
and then Menu.
2.
In the Property Inspector set the Text property
to My Options.
3.
In the Property Inspector under the Behavior section
set the Detachable property to true.
4.
Using the Structure Pane right click the menu component and choose
Insert inside af:menu - My Options and then Menu
Item.
Using the property inspector set the Text property
of the new menu item to Export to Excel.
5.
With the new Export to Excel menu item still selected in the structure
pane, expand the Operations section of the the ADF
Faces components in the component Palette.
Locate the Export Collection Action Listener component
and click it - or drag it onto the Export to Excel
menu option in the structure pane.
6.
In the dialog that pops up click the down arrow next to ExportedId
field and choose Edit.
7.
In the Edit Property dialog navigate the page's structure to locate
the table-t1 in the PanelCollection
and click it.
Click OK.
8.
From the Type drop down list select excelHTML.
Click the OK button.
9.
Let's add another menu option to our menu. In the structure pane
right click the Export to Excel menu component and
from the context menu choose Insert After af:commandMenuItem
- Export to Excel and then Menu Item.
10.
Set the Text property of this new menu option to Printable
Page.
11.
From the Operations section of the component palette click the Show
Printable Page Behavior to add it to your new menu item. You
can also drag and drop it onto the new menu option you created.
12.
Click the Save All
icon on the JDeveloper menu bar to save your work, and choose Run.
13.
When the page comes up bring up your menu and detach it.
14.
Then invoke each one of the menu options you created. For example
Export to Excel.
You may need to accept the download of the file in the browser window
to be able to access the Excel file.
Create Read Only Business
Services, Page Fragments and Regions
In the next two sections we'll create a reusable page fragment
that will allow us to search for employees by their email. We'll then use this
page fragment inside another JSF page.
First we'll create a new ADF Business Components View Object
to provide us with the right query based on a parameter.
1.
In the Application Navigator locate the demo.model package
and right click on it to choose New View Object....
2.
In the Create View Object dialog set the Name property
to EmpByEmail and for view type choose the Read
Only Access through SQL Query radio button.
Click Next.
3.
In step 2 of the Create View Object dialog type the following query
select first_name,last_name
from employees where email=:p_email
The ':' before p_email means that it is a variable that
will be passed to the query.
Click the Test button to verify your query.
Click OK then click Next.
4.
In step 3 of the Create View Object dialog, Click the New
button to define a new bind variable. Set the Name property
to be p_email.
Click the Control Hints tab and set the Label
Text to Email.
5.
Click Next a few more times to accept all the defaults,
until you get to step 8 of the dialog.
Here check the Application Module check box to include
your new view in your data model.
Click the Finish button.
6.
You can now run the Application Module Tester, when you'll double click
the new EmpsByEmail1 view you'll be prompted to insert
a value for the parameter. You can insert SKING press
OK and get the results for this email address.
In this section we'll create a reusable page fragment that
will allow us to search for employees by their email. We'll then use this page
fragment inside another JSF page. The same page fragment can be used in multiple
other pages in our application.
1.
First we'll create a new task flow specific for this page.
In the Application Navigator locate the ViewController
project and right click on it to choose New....
Under the Web Tier -> JSF category choose ADF
Task Flow.
Click OK.
2.
In the Create Task Flow dialog set the File Name
property to search-email-flow.xml.
Verify that the Create As Bounded Task Flow and Create
with Page Fragments options are both checked.
Click OK.
3.
In the diagram editor for the new flow you created, drag a View
component from the component palette onto the empty and rename it to searchEmail.
While we'll only be using a single page in this flow, you can have bounded
task flows with multiple pages and still include them in other JSF pages.
4.
Double click the new searchEmail view components
to create the page for it.
Accept all the defaults in the dialog that appears and make sure the file
name is searchEmail.jsff. This will create the page as
a page fragment that can be included in other JSF pages. Click OK.
5.
An empty design view of the page will appear. Expand the Data
Controls accordion and locate the new view you created. - EmpByEmail1
expand the view and the Operation node underneath it.
We are going to use the ExecuteWithParams operation
to execute the query for this view passing to it the needed parameter.
6.
Drag the ExecuteWithParams operation to your new page,
when prompted to choose to choose a drop option choose Parameters->ADF
Parameter Form....
Accept the defaults presented in the Edit Form Fields dialog and click
OK.
Accept the default values.
Click OK.
7.
In the design editor for the page click the ExecuteWithParams
button and use the property inspector to change the Text
property to Find Details.
8.
From the Data Controls accordion, drag the EmpByEmails1
view onto the page beneath the button. When prompted to choose a drop
option choose From->ADF Read Only Form....
Accept the defaults presented in the Edit Form Fields dialog and click
OK.
The page should look like this:
9.
Now that our new bounded task flow includes a page fragment, we'll
include the complete bounded task flow inside another JSF page.
In the Application Navigator locate the DeptEmpPage.jspx
file and open it in the visual design editor. From the Component Palette's
Layout section drag and drop a Separator component into
the left accordion in the DeptEmpPage.jspx page beneath the Departments
form.
10.
Now we'll add the new flow we created as a region to the existing page.
From the Application Navigator drag and drop the search-email-flow.xml
file into the left accordion in the DeptEmpPage.jspx page beneath the
new separator. When prompted for a drop target choose
to create a Region.
Your page should look like the following:
11.
Save your work by pressing the Save All button and
then Run the updated DeptEmpPage.jspx
page.
In the page that comes up in your browser try the new functionality by
entering an email value in the Email field and pressing
the Find Details button.
Congratulations you have just finished a complete ADF application.
You've used ADF Business Components to create both simple and complex business
services that map to the database. You've used ADF Faces components to create
a rich user interface with built-in Ajax capabilities. And you used the ADF
Task Flows to create page flows and reusable page regions. Notice how little
code you had to write while working with JDeveloper and ADF. This is only the
first step in your road to mastering Oracle ADF, you can get much more information
at http://oracle.com/technology/jdev