Working with bounded Task Flows

 

Working with Bounded Task Flows, Regions and Routers in JDeveloper 11g

Purpose

In this tutorial, you use Oracle JDeveloper 11g to create a task flow that includes views, router and operations components. Then after creating each of the components of the task flow, you bind the task flow as a region of an existing page. 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

50 minutes

Topics

The tutorial covers the following topics:

	Overview
	Scenario
	Prerequisites
	Create a Bounded Task Flow
	Build the BrowseEmployees Page
	Create Other Task Flow Components
	Bind the Task Flow as a Region to the BrowseDepartments Page
	Run the BrowseDepartments 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.

To that predefined application you enhance its functionalities by adding a task flow as a region to the BrowseDepartments page. The task flow includes a BrowseEmployees page and allows to create a new employee or edit an existing employee.

Back to Topic List

Scenario

You create a bounded task flow with various components in it. Using a router, views, and operations, you design the task flow to be able to support browsing, edit and create functionalities. Once the task flow created, you create the individual components of the task flow and finally, you bind the task flow as a region in the BrowseDepartments page.

Back to Topic List

Prerequisites

In case you've already performed the URL_Bookmark hands on, you can continue on using that application and then skip the Prerequisites section and go directly to theCreating a Bounded Task Flow section.

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

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.

1.	Have access to or have installed Oracle JDeveloper 11g Production. You can download it from Oracle Technology Network.
2.	Have access to or have installed the Oracle Sample Schemas, included with the Oracle 10g or Oracle 11g database. The tutorial uses the HR schema. Specifically, the pages work with the DEPARTMENT and EMPLOYEES tables. Instructions for installing the HR schema and creating a connection to it in JDeveloper are available online at: http://www.oracle.com/technology/obe/obe11jdev/11/common/connection11g.htm
3.	Start JDeveloper by selecting Start > All Programs > Oracle WebLogic > JDeveloper Studio 11.1.1.0.0
4.	If the Migrate User Settings dialog box opens, click NO. If prompted for a User Role, choose Default. Close the Tip of the Day window.
5.	The JDeveloper IDE should now be displayed.

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:

1.	Download the TaskFlowHandsOn.zip file. Right click the following link and choose Save Target As... from context to download the TaskFlowHandsOn.zipfile on a local directory of your choice.
2.	Unzip the TaskFlowHandsOn.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: empTaskFlowHandsOnTaskFlowHandsOn.jws. Click Open. If you are prompted to migrate the project, click Yes to confirm.
4.	The Application is loaded up in JDeveloper.

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, expand the TaskFlowHandsOn and right click the HRConn entry and select properties from context.

 

3.

In the Edit Database Connection dialog, make sure you have 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

Testing 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 theAppModule node and select Configurations from context.
3.	In the Manage Configurations dialog, select the AppModuleLocal and clickEdit.
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 displays, showing two pages. A BrowseDepartments page and anEditDepartment page.
12.	Close the page flow diagram.

Back to Topic List

Creating a Bounded Task Flow

With the TaskFlowHandsOn application loaded in JDeveloper, you create a bounded task flow diagram including views, router, and operations. To do this, perform the following steps:

1.

In the Application Navigator, right click the ViewController node and select Newfrom context.

 

2.

In the New Gallery, click the Web Tier | JSF node and select ADF Task Flow.

Click OK.

 

3.

In the Create Task Flow dialog, type employees-flow-definition.xml as the File Name. Select the Create as Bounded Task Flow and Create with Page Fragmentscheckboxes.

4.

A new empty task flow diagram displays. Select the View component  from the Component Palette and drag and drop it onto the diagram surface.

5.

Change the default name to BrowseEmployees.

 

6.

Create a new view on the diagram.

Rename it EditEmployees.

7.

Select the Router component  from the Component Palette and drag and drop it onto the diagram surface.

Rename it CreateEdit.

8.

Open the Data Controls accordion and from the AppModuleDataControl | DepartmentsView1 | EmployeesView3 | Operations nodes, select CreateInsert and drop it onto the page.

 

9.

Select the Control Flow Case component  from the Component Palette and clicking in the BrowseEmployees view, drag and drop it into the CreateEditrouter.

Name the control flow createEdit.

10.

Repeat the previous step to create the following control flows:

Source	Target	Name
CreateEdit (Router)	CreateInsert (Operation)	create
CreateEdit (Router)	EditEmployees (View)	edit
CreateEdit (Router)	BrowseEmployees	unknown
CreateInsert (Operation)	EditEmployees (View)	CreateInsert

11.

Your diagram should look similar to that:

12.

From the Data Controls pane, select the Execute operation and drag and drop it onto the diagram.

 

13.

From the Data Controls pane, select the setCurrentRowWithKey operation and drag and drop it onto the diagram.

 

14.

Select the Control Flow Case component  from the Component Palette and create the following control flows:

Source	Target	Name
EditEmployees (View)	Execute (Operation)	execute
Execute (Operation)	SetCurrentRowWithKey (Operation)	Execute
SetCurrentRowWithKey (Operation)	BrowseEmployees (View)	SetCurrentRowWithKey

15.

The full diagram should now look like this:

Back to Topic List

Building the BrowseEmployees Page

The BrowseEmployees page is the entry point of this task flow and you'll see how to link the page to the router component. To do this, perform the following steps:

1.	On the employees-flow-definition diagram double click the BrowseEmployeesview.
2.	In the Create New JSF Page Fragment dialog, click OK to accept default values.
3.	From the Data Controls accordion, select the AppModuleDataControl | DepartmentView1 | EmployeesView3 node then drag and drop it onto the page. From the context menu, select Tables --> ADF Read-only Table.
4.	In the Edit Table Columns, check the Row Selection option, then using theCtrl key, multi select PhoneNumber, JobId, CommissionPct, ManagerId,DepartmentId and click the Delete button . Click OK.
5.	From the Component Palette, in the ADF Faces Common Components group, select the Button component and drop it in the Structure pane under the af:tablenode.
6.	Repeat this last operation dropping a Button below the previous one.
7.	Select the commandButton1 and in the Property Inspector, type Edit Employee in the Text field and select createEdit for the Action property.
8.	Select the commandButton2 and in the Property Inspector, type Create Employee in the Text field and select createEdit for the Action property.
9.	Now, using the Ctrl key, multi select both commanButtons then right click and select Surround With from context.
10.	In the Surround With dialog, choose Panel Group Layout and click OK.
11.	In the Property Inspector, set the Layout property to horizontal.
12.	Now, using the Ctrl key, multi select the af:table and theaf:panelGroupLayout and right click, then select Surround With from context.
13.	In the Surround With dialog, choose Panel Group Layout and click OK.
14.	In the Property Inspector, set the Layout property to scroll.
15.	In the Component Palette, from the ADF Faces | Common Components | Operations, drag and drop the Set Action Listener onto the Edit Employeebutton.
16.	In the Insert Set Action Listener dialog, type #{'edit'} in the From field and #{pageFlowScope.action} in the To field. Use Crtl + C keys to copy the content of the To field in the clipboard to use it later on. Click OK.
17.	In the Component Palette, from the ADF Faces | Common Components | Operations, drag and drop the Set Action Listener onto the Create Employee button.
18.	In the Insert Set Action Listener dialog, type #{'create'} in the Fromfield and paste the content of the clipboard into the To field. Click OK.
19.	Click the save all  icon to save the application. The BrowseEmployees page is now defined.

Back to Topic List

Creating Other Task Flow Components

To create the router and other bounded components, perform the following steps:

1.	Click the employees-flow-definition tab to reopen the task flow diagram.
2.	Double click the CreateEdit router to open its properties.
3.	In the Property Inspector, set the default-outcome to unknown from the drop down list. In case of unexpected event, this will return to the BrowseEmployees page.
4.	To add other cases to the router, in the Cases section, click the Add button  to create a new case condition.
5.	In the expression column, type the following syntax #{pageFlowScope.action eq 'edit'}. For the outcome select edit from the list.
6.	In the Cases section, click the Add button  to create a new case condition. In the expression column, type the following syntax #{pageFlowScope.action eq 'create'}. For the outcome select create from the list. The router will dispatch to the create or edit flow based on the value associated to the button pressed.
7.	Back in the task flow diagram, double click the EditEmployees view icon to create the page.
8.	In the Create New JSF Page Fragment dialog, click OK to accept default values.
9.	From the Data Controls accordion, select EmployeesView3 and drop it onto the empty page. Select Forms --> ADF Form fro context.
10.	In the Edit Form dialog, select the Include Submit Button and click OK.
11.	In the EditEmployees page, select the Submit button and in the Property Inspector, set the Action to execute.
12.	From the Components Palette, drag and drop a Set Action Listener onto theSubmit button.
13.	In the Insert Set Action Listener dialog, select the Expression Buildernext to the From field.
14.	In the Expression Builder dialog, select ADF Bindings | bindings | EmployeesView3Iterator | currentRowKeyString to move it in the Expression pane. Click OK.
15.	Back in the Insert Set Action Listener dialog, type #{pageFlowScope.rowKey} in the To field. Click OK.
16.	Return to the task flow diagram. Right click the SetCurrentRowWithKeyoperation and select Go To Page Definition.
17.	In the Structure pane for the SetCurrentRowWithKey operation expand thebindings | setCurrentRowWithKey nodes and select rowKey. In the Property Inspector type #{pageFlowScope.rowKey} in the NDValue field.
18.	Close the Page Definition tab to return to the task flow diagram.

Back to Topic List

Binding the Task Flow as a Region to the BrowseDepartments Page

The created task flow is now going to be used as a region within the BrowseDepartments page. To do this perform the following steps:

1.	In the Application Navigator, double click the BrowseDepartments.jspx node to open the page in the editor.
2.	Back in the Application Navigator, select the employees-flow-definition.xml. Drag it to the most right part of the BrowseDepartments page and drop it choosing the Region option from context.
3.	In the Structure pane, select the af:region and move it between the mainand af:panelGroupLayout components.
4.	Right click the group component above the region one and select Convertfrom context. In the Convert group dialog, select Panel Group Layout and click OK.
5.	For the Panel Group Layout in the Property Inspector, set the Layout field toscroll.
6.	In the Structure pane, select the panelGroupLayout and move it above theregion component.
7.	The Structure pane should look like this:
8.	Expand the panelGroupLayout | panelCollection component and select thetable one. In the Property Inspector in the Behavior tab set the RowSelection to single.
9.	Right click within the BrowseDepartments page and select Go To Page Definition from context.
10.	In the Structure pane expand the executables node, select the taskFlow - employeesflowdefinition1 and in the Property Inspector set the Refresh field to ifNeeded.
11.	Right click the taskFlow - employeesflowdefinition1 and select Insert inside task flow --> parameters from context.
12.	Right click the parameters node and select Insert inside parameters --> parameter from context.
13.	In the Insert Parameter dialog, type currency in the id field.
14.	The page definition should now look like this:
15.	Having the currency parameter selected, in the Property Inspector click the down arrow next to the value field and select Edit.
16.	In the Edit Property dialog, expand ADF Bindings | bindings | DepartmentsView1Iterator and select currentRowKeyString. Click OK.
17.	In the Application Navigator, double click the BrowseDepartments.jspx node to reopen the Structure pane for the page, select the region component and in the Property Inspector using the Behavior tab, select the Edit option next to the PartialTriggers field:
18.	In the Edit Property dialog, select the panelCollection*, type p1 as the Id and press Return.
19.	In the Edit Property dialog, select the table*, type t1 as the Id and pressReturn. Then select the table* -t1component and using the right arrow button shuttle the selection in the selected pane. Click OK.
20.	The Partial Triggers should now look like this:
21.	Click the save all  icon to save the application.

Back to Topic List

Running the BrowseDepartments Page

Now that the task flow is integrated as a region to the BrowseDepartments page you can run it. To do this, perform the following steps:

1.	In the editor for the BrowseDepartments page, right click and select Run from context.
2.	The page loads up in your browser exposing the list of departments in the upper section and showing the related employees in the bottom part.
3.	Select another department in the list, the related employees are displayed synchronously in the BrowseEmployees region.
4.	Scroll down to the bottom of the page to see the Edit and Create buttons for Employee. Select an employee in the list and click the Edit Employeebutton.
5.	In the Edit Employee section, change a value (e.g. update the salary) and click Submit.
6.	Back to the BrowseEmployees section, click the Create Employee button.
7.	In the Create form, add a new employee and click the Submit button.
8.	Back to the BrowseEmployees section, the new employee is now displayed in the list.
9.	Click on the Edit Employee button for the newly created employee to review its details.
10.	Update some of the properties if you wish and click the Submit button to return to the BrowseEmployees page.
11.	Close the browser window.

Back to Topic List

Summary

In this tutorial, you created a task flow and included views, router, operations into it and added it as a region to an existing page. You learned how to:

	Create a task flow diagram
	Create the components of the task flow
	Bind the task flow to a page

Back to Topic List

 Place the cursor over this icon to hide all screenshots.