<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Building a LOV with ADF UIX</title>
<meta>
</head>
<body>
<h3>Building a List of Values (LOV) with ADF UIX
</h3>
<h4>Purpose </h4>
This tutorial teaches you how to build a UIX page containing a
List of Values (LOV).
<h4>Time to Complete</h4>
Approximately 30 minutes.
<h4>
Topics</h4>
The tutorial contains the following sections:
<table>
<tbody>
<tr>
<td>
</td>
<td>
Overview</td>
</tr>
<tr>
<td>
</td>
<td>
Prerequisites</td>
</tr>
<tr>
<td>
</td>
<td>
Create workspace, projects and ADF Business Services</td>
</tr>
<tr>
<td>
</td>
<td>
Create View Controller components</td>
</tr>
<tr>
<td>
</td>
<td>
Add the LOV functionality</td>
</tr>
<tr>
<td>
</td>
<td>
Apply a filter to the LOV Window</td>
</tr>
<tr>
<td>
</td>
<td>
Summary</td>
</tr>
<tr>
<td>
</td>
<td>
Related Information</td>
</tr>
</tbody>
</table>
<h4>Viewing Screenshots</h4>
Place
the cursor over this icon to load and view all the screenshots for this tutorial.
(Caution: Because this action loads all screenshots simultaneously, response
time may be slow depending on your Internet connection.)
Note: Alternatively, you can place
the cursor over each individual icon in the following steps to load and view
only the screenshot associated with that step.
<h3>
Overview</h3>
The tutorial uses Oracle JDeveloper 10
g to build
an ADF UIX application that contains an LOV. The tutorial demonstrates how easy
it is to create an LOV, and how you can apply a filter to your LOV using Oracle
JDeveloper 10
g.
Back to Topic List
<h4>
Scenario</h4>
The UIX page that you create in this tutorial will display
employees information based on the "Human Resources" data model. After
creating the Business Services layer, You will create a UIX page showing an
employee record with an LOV displaying the Departments information.
Back to Topic List
<h3>
Prerequisites</h3>
Before starting this tutorial, you should have completed the
following:
<table>
<tbody>
<tr>
<td>
1.
</td>
<td>
Install Oracle JDeveloper 10g.
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
Install the sample schemas. This example uses the HR schema
included in the Oracle database. The Sample Schemas installation guide
is part of the Oracle Database documentation set. You may also install
the schemas by following the instructions found in the
Installing
the Sample Schemas and Establishing a Database Connection
OBE.
</td>
</tr>
</tbody>
</table>
Back to Topic List
<h4>
</h4>
<h3>
Create Workspace, Projects
and ADF Business Services</h3>
When you work in JDeveloper, you organize your work in projects
within application workspaces. JDeveloper provides a number of predefined templates
which allow you to create a workspace and projects that are configured for developing
the types of application you are working on. The templates provide the basic
range of technologies that are needed, and you create your working environment
by selecting the one that fits your needs, then configuring it to add any additional
technologies you are going to use. The options that are available to you in
the New Gallery and for some context menu operations depend on your choice of
template for that workspace.
In this tutorial, you are going to choose the basic workspace
and project creation with no predefined technology.
<table>
<tbody>
<tr>
<td>
</td>
<td>
Create a new Workspace with empty projects</td>
</tr>
<tr>
<td>
</td>
<td>
Create the business services</td>
</tr>
</tbody>
</table>
Back to Topic List
<h3>
Create a New Workspace With Empty Projects</h3>
<table>
<tr>
<td>
1.
</td>
<td>
In the application navigator, right-click
Applications
and choose
New Application Workspace from the context
menu.
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
In the
Create Application Workspace dialog,
rename the workspace
Application
to
LOVApplication
.
.(Notice that the directory name changes to match the new name.)
Change the Application Template to Web Application [default]
,
and click
OK.
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
On completion, you should have an application named
LovApplication
and two projects named
Model and
ViewController.
</td>
</tr>
<tr>
<td>
4.
</td>
<td>From the File menu, choose
Save All or click the
icon. </td>
</tr>
</table>
Back to List
<h3>
Create the Business Services</h3>
This section is going to cover how to create the business
services layer using ADF business components.
<table>
<tr>
<td>
1.
</td>
<td>
Select the
Model node in
the application navigator, and right-click to choose
New
to display the New Gallery.
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
In the New Gallery, open the
Business Tier
node, select the
Business Components category and double-click
the
Business Components from Tables item.
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
In the Business Components Project Initialization dialog,
select the connection that you created for the human resources (hr) schema,
for example,
hr_conn, and click
OK.
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
The Create Business Components from Tables wizard appears.
Click
Next on the Welcome page to begin.
</td>
</tr>
<tr>
<td>
5.
</td>
<td>
In Step 1 of 4: Entity Objects page, choose the
HR schema
from the dropdown menu of available database schema objects, then select
the object type of
Tables (if it is not already selected).
Select the
DEPARTMENTS
and
EMPLOYEES tables in
the
Available list and click the Move button
to move those selections to the
Selected list.
Click
Next to continue.
</td>
</tr>
<tr>
<td>
6.
</td>
<td>
In Step 2 of 4: Updateable View Objects page, click the
Move All button
to move
Departments and
Employees views to the
Selected list.
Click
Next to continue.
</td>
</tr>
<tr>
<td>
7.
</td>
<td>
Click
Next on the Read Only View Objects
From Tables page, and in the Application Module page, make no changes
and click
Next.
</td>
</tr>
<tr>
<td>
8.
</td>
<td>
Click
Finish to create the business components
in the
Model project
</td>
</tr>
<tr>
<td>
9.
</td>
<td>
Your project should look like this:
</td>
</tr>
<tr>
<td>
10.
</td>
<td>
From the File menu, choose
Save All or click the
icon.
</td>
</tr>
</table>
Back to List
Back to Topic List
<h3>
Create View Controller Components
</h3>
In these steps you will create a
UIX page to access the business components. The procedure shows how to create
a form that displays data from Employees views using the Data Control Palette.
<table>
<tbody>
<tr>
<td>
</td>
<td>
Create a Struts pageflow diagram
</td>
</tr>
<tr>
<td>
</td>
<td>
Create a UIX Input page
</td>
</tr>
<tr>
<td>
</td>
<td>
Add an Input Form to your page
</td>
</tr>
</tbody>
</table>
Back to Topic List
<h3>
Create a Struts Pageflow Diagram</h3>
<table>
<tr>
<td>
1.
</td>
<td>
Expand the
ViewController > Web
Content > WEB-INF nodes in the application navigator, and
double-click the
struts-config.xml file.
An empty pageflow diagram opens.
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
If the component palette isn't displayed, then open it from the menu
View | Component Palette.
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
In the component palette, select the
Data Page
icon.
Click the pageflow diagram to create the data page.
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
Rename the datapage /dataPage1 to
/EmpWithLOV.
</td>
</tr>
</table>
Back to List
<h3>
Create a UIX Input Page</h3>
<table>
<tbody>
<tr>
<td>
1.
</td>
<td>
Double-click the
/EmpWithLOV
datapage on the pageflow diagram.
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
In the Select or Create Page dialog, leave the
default name (/EmpWithLOV) and select the
UIX option
from the dropdown list. Click
OK
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
The UIX XML page opens in the visual editor.
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
If the Data Control palette is not displayed, open it from
the menu, choose
View | Data
Control
to display it.
</td>
</tr>
<tr>
<td>
5.
</td>
<td>
From the File menu, choose
Save All or click the
icon.
</td>
</tr>
</tbody>
</table>
<div>
Back to List
</div>
<h3>
Add an Input Form to Your Page</h3>
<table>
<tr>
<td>
1.
</td>
<td>
In the data control palette, expand the
AppModuleDataControl
node to display the available data controls -
EmployeesView1
&
DepartmentsView1.
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
Select the
EmployeesView1 node under AppModuleDataControl
and look at the different options available in the Drag and Drop as dropdown
list.
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
Select
Input Form (With Navigation) from the dropdown
list:.
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
Drag and drop the
EmployeesView1 node into
the center of your page.
Your page should now contain one input form that can be used to enter
values. Your page should look like this:
</td>
</tr>
<tr>
<td>
5.
</td>
<td>
From the File menu, choose
Save All or click the
icon.
</td>
</tr>
<tbody>
</tbody>
</table>
Back to List
Back to Topic List
<h3>
</h3>
<h3>
Add the LOV Functionality</h3>
We would like to add an LOV to the EmpWithLOV.uix page,
for the Departments field. This field will be used to enter and change the department
for a particular employee.
<table>
<tbody>
<tr>
<td>
</td>
<td>
Add the LOV call in the EmpWithLOV page
</td>
</tr>
<tr>
<td>
</td>
<td>
Create the LOV window
</td>
</tr>
<tr>
<td>
</td>
<td>
Run the data page
</td>
</tr>
</tbody>
</table>
Back to Topic List
<h3>
Add the LOV Call in the EmpWithLOV
Page</h3>
<table>
<tr>
<td>
1.
</td>
<td>
In the EmpWithLOV editor, select the
DepartmentId
row.
.
Remove the current
DepartmentID field in the page.
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
Select the
DepartmentId attribute
in the DataControl palette underneath the EmployeesView1 node and set
the "Drag and Drop As:" type to:
MessageLovInput
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
Drag and drop the
DepartmentId node onto
the page. Your page should look like this:
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
From the File menu, choose
Save All or click the
icon.
</td>
</tr>
</table>
Back to List
<h3>
Create the LOV Window</h3>
When you used the Data Control palette to create your new
MessageLovInput field, JDeveloper created a new UIX page called lovWindow0.uix,
that is pre-wired to your MessageLovInput field. The only thing that you have
to do is to add the data source for the LOV window.
<table>
<tr>
<td>
1.
</td>
<td>
Open the application navigator and double-click the
lovWindow0.uix
node.
The LovWindow0.uix page displays in the editor.
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
In the Data Control palette select the
DepartmentId
attribute underneath the DepartmentsView1 node.
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
In the "Drag and Drop As"
list,
choose
"LOV Table", then Drag and drop the
DepartmentId node on the page.
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
When you drop the
DepartmentId attribute on your page,
you will be prompted with the Select pageflow Data Binding Option dialog.
Keep the default value; this will add a new node in your Struts page flow
that will represent your
lovWindow0.uix page.
</td>
</tr>
<tr>
<td>
5.
</td>
<td>
Your page should look like this:
</td>
</tr>
<tr>
<td>
6.
</td>
<td>
From the File menu, choose
Save All or click the
icon.
</td>
</tr>
</table>
Back to List
<h3>
Run the Data Page</h3>
<table>
<tr>
<td>
1.
</td>
<td>
Open the Struts
pageflow diagram.
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
Right-click the
EmpWithLOV data page, and
select the
Run option from the context menu.
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
The UIX page opens in your browser.
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
Click the
flash light icon located next
to the Department field to open the LOV window.
</td>
</tr>
<tr>
<td>
5.
</td>
<td>
Select a department by clicking on one of the radio buttons.
To return to the main page, click on the
Select button.
</td>
</tr>
<tr>
<td>
6.
</td>
<td>
The EmpWithLOV page should reflect the change of the department number,
and the selected value will be returned to the Department Id field.
</td>
</tr>
<tr>
<td>
7.
</td>
<td>
Close the browser window and return to JDeveloper.
</td>
</tr>
</table>
Back to List
Back to Topic List
<h3>
</h3>
<h3>
Apply a Filter
to the LOV Window</h3>
As you will have noticed, the LOV window contains
a Search field. This Search field is not wired up by default and in this session
we will add some components in order to make this work.
In the listOfValues components, there are several named
children (slots) that can be used, and one of them is particularly designed
to hold a dropdown list - filterChoice. In ADF UIX terminology, we call dropdown
lists "choice" components.
<table>
<tbody>
<tr>
<td>
</td>
<td>
Add a Dropdown list to the search area
</td>
</tr>
<tr>
<td>
</td>
<td>
Modify the lovFilter event handler
</td>
</tr>
</tbody>
</table>
Back to Topic List
<h3>
Add a Dropdown List to the Search
Area</h3>
First we need to add a dropdown list, so that the user can
decide what search criteria to use.
<table>
<tbody>
<tr>
<td>
1.
</td>
<td>
In the application navigator, double-click the
lovWindow0.uix
node to open it in the visual editor.
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
In the structure window, click the
UI
tab, then expand the nodes and select the
filterChoice
entry.
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
Right-click on the
filterChoice slot
and select "
Show filterChoice Named Child".
This will display the empty named child (slot) in the visual editor.
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
From the component palette click the
messageChoice
component to add it into the empty
filterChoice slot.
.
</td>
</tr>
<tr>
<td>
5 .
</td>
<td>
In the property inspector, remove the prompt from the
messageChoice component by deleting the prompt text.
Change the name property to:
filterBy
</td>
</tr>
<tr>
<td>
6.
</td>
<td>
In the Structure pane, right-click on the
messageChoice
component and insert an
option components
</td>
</tr>
<tr>
<td>
7.
</td>
<td>
In the property inspector, set the text property on the
option component to:
Department_Id.
</td>
</tr>
<tr>
<td>
8.
</td>
<td>
In the structure pane, right-click on the
messageChoice
component and insert an
option components.
</td>
</tr>
<tr>
<td>
9.
</td>
<td>
In the property inspector, set the text property on the
option component to:
Department_Name.
</td>
</tr>
<tr>
<td>
10.
</td>
<td>
The Structure pane should look like this:
</td>
</tr>
<tr>
<td>
11.
</td>
<td>From the File menu, choose
Save All or click the
icon. </td>
</tr>
</tbody>
</table>
Back to List
<h3>
Modify the lovFilter Event Handler</h3>
Now you need to modify the event handler to
make the filtering option work.
<table>
<tbody>
<tr>
<td>
1.
</td>
<td>
In the structure pane, open the
handlers
node and select the event -
lovFilter..
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
Right-click and select
"Insert
inside ..." Select the
invoke element
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
In the dialog that appears, enter "
setWhereClause"
for the Method property.
Note: This will call the setWhereClause method on the ViewObject
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
Select the
Enter Advanced Properties
tab, and set the following properties:
<table>
<tr>
<td><pre>instance
${bindings.DepartmentId.viewObject}
java type
oracle.jbo.ViewObject
Then click
OK.
5 .
Inside the new
invoke element, add a Parameter element by right-clicking the
invoke node in the structure pane and select "
Insert Inside ..."
6.
Right-click the new parameter entry in the structure pane, and select the
parameter option.
7.
In the Insert parameter dialog, set javaType to
string.
8.
Click the
Enter Advanced Properties tab and set the value field to
${empty param.filterBy ? 'DEPARTMENT_ID' : param.filterBy} LIKE '${param.searchText}'
Then click
OK.
9.
Right-click the event -
lovFilter node in the structure pane and add another
invoke element.
10.
In the Insert Invoke dialog, set the method field to
executeQuery
11.
Click the
Enter Advanced Properties tab and set the following properties:
instance
${bindings.DepartmentId.viewObject}
javaType
oracle.jbo.ViewObject
Click
OK.
12.
Your event handler tree in the Structure pane should look like this:
13.
In the structure pane, select the
listOfValues - DepartmentId node.
14.
In the property inspector, set the following properties:
Text property
${param.searchText}
searchAreaMode
filter
15.
Open the
pageflow diagram.
16.
Right-click the
/EmpWithLOV data page and choose
Run from the context menu.
17.
The EmpWithLOV opens in your browser.
Click the
flash light to open the Department LOV.
18.
In the Search By, specify a new Department-Id value then Go.
Experiment with the
Search By Department Name and specify a department value (Administration, Marketing, Purchasing and valid values)
testcontent
Bookmark 
</td>
<td>
icon. </td>
</tr>
</table>
to move those selections to the
Selected list.
to move
Departments and
Employees views to the
Selected list.
icon.
Printer View