Build
the BrowseEmployees Page

Create
Other Task Flow Components

Bind
the Task Flow as a Region to the BrowseDepartments Page

Run
the BrowseDepartments Page

Have access to or have installed Oracle JDeveloper 11g Production. You can download it from Oracle Technology Network.

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

Start JDeveloper by selecting Start > All Programs > Oracle WebLogic > JDeveloper Studio 11.1.1.0.0

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.

The JDeveloper IDE should now be displayed.

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.

Unzip the TaskFlowHandsOn.zip file on a local directory of your choice (i.e. temp)

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.

The Application is loaded up in JDeveloper.

From the Menu Bar, select View | Database Navigator.

In the Database Navigator, expand the TaskFlowHandsOn and right click the HRConn entry and select properties from context.

In the Edit Database Connection dialog, make sure you have the following values:

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.

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.

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.

Prior to test the module in the Business Component tester, right click theAppModule node and select Configurations from context.

In the Manage Configurations dialog, select the AppModuleLocal and clickEdit.

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.

in the Application Navigator, right-click AppModule and choose Run.

In the Business Component Configuration dialog, click Connect.

Wait for the Browser window to open.

In the Oracle Business Component Browser, double-click DepartmentsView1.

Use the navigation buttons to browse through the Departments.

Close the Business Component Browser window.

Expand the ViewController project nodes. Double click Web Content | Page Flows | adfc-config node to open the page flow diagram.

The page flow displays, showing two pages. A BrowseDepartments page and anEditDepartment page.

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

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

Click OK.

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.

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

Change the default name to BrowseEmployees.

Create a new view on the diagram.

Rename it EditEmployees.

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

Rename it CreateEdit.

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.

Repeat the previous step to create the following control flows:

Your diagram should look similar to that:

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

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

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

The full diagram should now look like this:

On the employees-flow-definition diagram double click the BrowseEmployeesview.

In the Create New JSF Page Fragment dialog, click OK to accept default values.

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.

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.

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.

Repeat this last operation dropping a Button below the previous one.

Select the commandButton1 and in the Property Inspector, type Edit Employee in the Text field and select createEdit for the Action property.

Select the commandButton2 and in the Property Inspector, type Create Employee in the Text field and select createEdit for the Action property.

Now, using the Ctrl key, multi select both commanButtons then right click and select Surround With from context.

In the Surround With dialog, choose Panel Group Layout and click OK.

In the Property Inspector, set the Layout property to horizontal.

Now, using the Ctrl key, multi select the af:table and theaf:panelGroupLayout and right click, then select Surround With from context.

In the Surround With dialog, choose Panel Group Layout and click OK.

In the Property Inspector, set the Layout property to scroll.

In the Component Palette, from the ADF Faces | Common Components | Operations, drag and drop the Set Action Listener onto the Edit Employeebutton.

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.

In the Component Palette, from the ADF Faces | Common Components | Operations, drag and drop the Set Action Listener onto the Create Employee button.

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.

Click the save all  icon
to save the application. The BrowseEmployees page is now defined.

Click the employees-flow-definition tab to reopen the task flow diagram.

Double click the CreateEdit router to open its properties.

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.

To add other cases to the router, 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 'edit'}. For the outcome select edit from the list.

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.

Back in the task flow diagram, double click the EditEmployees view icon to create the page.

In the Create New JSF Page Fragment dialog, click OK to accept default values.

From the Data Controls accordion, select EmployeesView3 and drop it onto the empty page. Select Forms --> ADF Form fro context.

In the Edit Form dialog, select the Include Submit Button and click OK.

In the EditEmployees page, select the Submit button and in the Property Inspector, set the Action to execute.

From the Components Palette, drag and drop a Set Action Listener onto theSubmit button.

In the Insert Set Action Listener dialog, select the Expression Buildernext to the From field.

In the Expression Builder dialog, select ADF Bindings | bindings | EmployeesView3Iterator | currentRowKeyString to move it in the Expression pane.

Click OK.

Back in the Insert Set Action Listener dialog, type #{pageFlowScope.rowKey} in the To field.

Click OK.

Return to the task flow diagram. Right click the SetCurrentRowWithKeyoperation and select Go To Page Definition.

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.

In the Application Navigator, double click the BrowseDepartments.jspx node to open the page in the editor.

Drag it to the most right part of the BrowseDepartments page and drop it choosing the Region option from context.

In the Structure pane, select the af:region and move it between the mainand af:panelGroupLayout components.

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.

For the Panel Group Layout in the Property Inspector, set the Layout field toscroll.

In the Structure pane, select the panelGroupLayout and move it above theregion component.

The Structure pane should look like this:

Expand the panelGroupLayout | panelCollection component and select thetable one. In the Property Inspector in the Behavior tab set the RowSelection to single.

Right click within the BrowseDepartments page and select Go To Page Definition from context.

In the Structure pane expand the executables node, select the taskFlow - employeesflowdefinition1 and in the Property Inspector set the Refresh field to ifNeeded.

Right click the taskFlow - employeesflowdefinition1 and select Insert inside task flow --> parameters from context.

Right click the parameters node and select Insert inside parameters --> parameter from context.

In the Insert Parameter dialog, type currency in the id field.

The page definition should now look like this:

Having the currency parameter selected, in the Property Inspector click the down arrow next to the value field and select Edit.

In the Edit Property dialog, expand ADF Bindings | bindings | DepartmentsView1Iterator and select currentRowKeyString.

Click OK.

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:

In the Edit Property dialog, select the panelCollection*, type p1 as the Id and press Return.

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.

The Partial Triggers should now look like this:

In the editor for the BrowseDepartments page, right click and select Run from context.

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.

Select another department in the list, the related employees are displayed synchronously in the BrowseEmployees region.

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.

In the Edit Employee section, change a value (e.g. update the salary) and click Submit.

Back to the BrowseEmployees section, click the Create Employee button.

In the Create form, add a new employee and click the Submit button.

Back to the BrowseEmployees section, the new employee is now displayed in the list.

Click on the Edit Employee button for the newly created employee to review its details.

Update some of the properties if you wish and click the Submit button to return to the BrowseEmployees page.