Build a Bookmarkable Edit Page with JDeveloper 11g
Build a Bookmarkable Edit Page with JDeveloper 11g
Purpose
In this tutorial, you use Oracle JDeveloper 11g to build a
web application that allows the bookmarking of URL. Based on a predefined application,
you implement a functionality that enables to bookmark an edit page from a Browse
/ Edit type of application. The data model uses Business Components. For the
web client, Java Server Faces (JSF) is used. A browse page and an edit page
are included in the user interface.
Place
the cursor over this icon to load and view all the screenshots for this tutorial.
(Caution: This action loads all screenshots simultaneously, so response time
may be slow depending on your Internet connection.)
Note: Alternatively, you can place the cursor over
an individual icon in the following steps to load and view only the screenshot
associated with that step. You can hide an individual screenshot by clicking
it.
Overview
The model is provided by business components, while the view
and controller are provided by Java Server Faces.
The predefined application includes two pages, a Browse page
and an Edit page. The Browse page provides the list of departments and allows
you to select a department from the list to edit the department details. The
Edit page displays the department details.
The problem is that when the edit page is displayed for a
specific department, the URL in the address is still referencing the entry point
of the application (the Browse page). This default behavior stops from being
able to bookmark the Edit page reference.
In order to make the Edit page bookmarkable, you add an
action listener to the Edit button of the Browse page. In the Edit page, you
use a method defined in a managed bean and set the bookmark properties providing
the ability to to bookmark the record information based on the currentRowKeyString
value.
Before you create any component, you
must first open the startup application. To do this, perform the following steps:
1.
Download the URL_Bookmark.zip file. Right click
the following link and choose Save
Target As... from context to download the
URL_Bookmark.zip file on a local directory of
your choice.
2.
Unzip the URL_Bookmark.zip
file on a local directory of your choice (i.e. temp)
3.
From the Application Navigator, click the
Open Application link.
Locate the workspace c:\temp\TaskFlowHandsOn\TaskFlowHandsOn.jws.
Click Open.If you
are prompted to migrate the project, click Yes to confirm.
You need to create a Database Connection
to the HR schema. To do this, perform the following steps:
1.
From the Menu Bar, select View | Database Navigator.
2.
In the Database Navigator, right click TaskFlowHandsOn
and select New Connection from context.
3.
In the Create Database Connection, enter the following values:
Connection Name
HRConn
UserName
hr
Password
hr
Deploy Password
checked
Driver
thin
Host Name
localhost
JDBC Port
1521
SID or Service
Name
ORCL/XE
4.
Click the Test Connection button.
If the database is available and the connection details are correct,
you see Success! in the Status window then click OK.
If an error occurs, verify the settings, make any changes necessary,
and then retest the connection. If you still cannot connect, there may
be a problem with the database, or it may not be running.
5.
In the Application Navigator, expand the Connections and
Database nodes in the Application Resources panel to see the
HR connection you just created. You can expand the HRConn node to view
the database objects.
The startup application uses Departments and Employees entity
objects and their corresponding view objects.
1.
Open the Application Navigator and expand the Model
project nodes. Notice the existing Entities, Views, Links objects and
the AppModule.
The model project contains all the necessary components needed for
the application.
2.
Prior to test the module in the Business Component tester, right
click the AppModule node and select Configurations
from context.
3.
In the Manage Configurations dialog, select the AppModuleLocal
and click Edit.
4.
In the Edit Business Components Configuration dialog, for the AppModuleLocal,
select the Connection Type to JDBC URL and the Connection
Name to HRConn.
Click OK, then OK again.
5.
in the Application Navigator, right-click AppModule
and choose Run.
6.
In the Business Component Configuration dialog, click Connect.
Wait for the Browser window to open.
7.
In the Oracle Business Component Browser, double-click DepartmentsView1.
8.
Use the navigation buttons to browse through the Departments.
9.
Close the Business Component Browser window.
10.
Expand the ViewController project nodes. Double
click Web Content | Page Flows | adfc-config node to
open the page flow diagram.
11.
The page flow display, showing two pages. A BrowseDepartments
page and an EditDepartment page.
12.
Right click the BrowseDepartments page and select
Run from context.
13.
In the Set Run Configuration dialog, click OK to
accept Default.
14.
Examine the URL displayed in the Browser.
15.
Select any department from the list and click the Edit Departments
button.
16.
The corresponding department detail info are displayed.
Notice that the URL in the address field of your browser is the same
as the BrowseDepartments page one, stopping you from being able to bookmark
this specific department details page:
17.
Close you browser window. In the following sections,
you see how to have the edit page keep track of the selected department.
To be able to provide bookmarkable information about the selected
department in the browse page, you add an action listener that holds the referenced
department based on the currentRowKeyString
property. To do this, perform the following steps:
1.
Back into JDeveloper within the page flow, double click the BrowseDepartments
icon to open the page.
2.
The BrowseDepartments page opens in the editor.
3.
Select the Edit Departments button to display its
properties.
4.
The Property Inspector shows an Action mapped to the edit control
flow. We need to create an action listener to the Edit Departments button.
5.
Select the Set Action Listener from the ADF Faces
Operations and drop it onto the Edit Departments button.
6.
In the Insert Set Action Listener dialog, next to the From
field, select Expression Builder from the down arrow.
7.
In the Expression Builder dialog, expand ADF Bindings | bindings
| DepartmentView1Iterator and select currentRowKeyString.
Click OK.
8.
Back to the dialog, type the following in the To field:
#{pageFlowScope.rowKey}.
Select the content of the To field and copy it (Ctrl
+ C) to the clipboard (we will need it later on).
Click OK.
9.
The properties for the Set Action Listener should
look like this:
Pages have bookmark properties allowing you to propagate into
the URL of the linked page the reference of the current row. For this purpose
we use a managed bean holding the current row value. To do this, perform the
following steps:
1.
Open the Diagram view of the page flow and select the EditDepartment
page to view the page properties.
2.
In the Property Inspector, select the Bookmark tab and set the bookmark
property to true and click the Add
button
to create a bookmark URL parameter.
3.
For the bookmark URL parameter type rowKey as the
name and paste the content of the clipboard in the value field: #{pageFlowScope.rowKey}.
4.
Next to the method field, click the down arrow and select
the Expression Builder option.
5.
In the Expression Builder dialog, expand ADF Managed
Beans | pageFlowScope | BookmarkHandler nodes and select handleBookMarkRequest.
Click OK.
6.
To review the content of the managed bean that was created
in the predefined application, in the Application Navigator, double
click the BookmarkHandler.java to open the java class.
7.
The handleBookMarkRequest method displays
in the editor.
8.
Click the EditDepartment.jspx tab to
open the page in the editor.
9.
Right click in the EditDepartment page
and select Go to Page Definition from context.
10.
Click the EditDepartment.jspx tab to
open the page in the editor.
11.
Using the Structure pane for the page definition, right
click the bindings node and from context select
Insert inside bindings --> Generic Bindings --> action.
12.
In the Create Action Bindings dialog, in the Select an
Iterator field select DepartmentsView1Iterator and
in the Operation choose setCurrentRowWithKey.
In the Parameters section, paste the content of the clipboard in the
value field #{pageFlowScope.rowKey}.
Bookmark
to create a bookmark URL parameter.
icon to save the application.
