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.

Time to Complete

20 minutes

Topics

The tutorial covers the following topics:

	Overview
	Scenario
	Prerequisites
	Explore the Stratup Application
	Prepare the Browse Departments Page
	Make the Edit Page Bookmarkable
	Run the Bookmarkable Page
	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.

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.

Back
to Topic List

Scenario

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.

Back
to Topic List

Prerequisites

Before starting any section of the tutorial, you should:

	Download the Required Components and Start JDeveloper 11g
	Upload the Startup Application
	Create a Database Connection

Back
to Topic List

Downloading the Required Components and Start JDeveloper 11g

In the following steps, you download JDeveloper 11g and other files required for this tutorial.

Back
to Topic

Back
to Topic List

Uploading the Starter Application

Before you create any component, you must first open the startup application. To do this, perform the following steps:

Back
to Topic

Back
to Topic List

Creating a Database Connection

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 seeSuccess! 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.

Back
to Topic

Back
to Topic List

Exploring the Startup Application

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 AppModulenode 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 anEditDepartment 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.

Back
to Topic List

Preparing the BrowseDepartments Page

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 theBrowseDepartments 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, selectExpression 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:

Back
to Topic List

Making the Edit Page Bookmarkable

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 selectDepartmentsView1Iterator and in the Operation choose setCurrentRowWithKey. In the Parameters section, paste the content of the clipboard in the value field #{pageFlowScope.rowKey}. Click OK.
13.	Now, the page definition should look like this: and the Structure window...
14.	Click the save all  icon to save the application.

Back
to Topic List

Running the Application and Bookmarking the Edit Page

You now use JDeveloper's JSF Navigation Modeler to diagrammatically plan and create your application's pages, and the navigation between them.

1.	Open the page flow diagram by clicking the adfc-config.xml tab.
2.	Right click the BrowseDepartments page and select Run from context.
3.	The page loads up in your browser. Notice the URL in the address bar.
4.	Select a department from the list and click the Edit Departments button.
5.	The corresponding department details display. Notice the URL now displayed in the address bar.
6.	Using your browser menu bar, bookmark the page. Select a location folder for your bookmark. Close your browser.
7.	Open a new browser window, and select the bookmark you just saved.
8.	The browser returns the page corresponding to the department number you bookmarked.
11.	You can close your browser window.

Back
to Topic List

Summary

In this tutorial, you learned how to:

	Prepare the Browse Department Page
	Make the Edit Page Bookmarkable
	Test the Bookmark Functionality

Back
to Topic List

 Place
the cursor over this icon to hide all screenshots.