Working with Bounded taskflows, regions and routers in JDeveloper 11g
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.
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.
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.
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 the Creating a Bounded Task Flow section.
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.zip file 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:\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, 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 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 displays, showing two pages. A BrowseDepartments
page and an EditDepartment page.
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 New from 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 Fragments checkboxes.
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 CreateEdit router.
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:
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 BrowseEmployees
view.
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 the Ctrl 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:table node.
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 the af: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 Employee button.
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 From field 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.
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 the Submit button.
13.
In the Insert Set Action Listener dialog, select the Expression
Builder next 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 SetCurrentRowWithKey
operation and select Go To Page Definition.
17.
In the Structure pane for the SetCurrentRowWithKeyoperation
expand the bindings | 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.
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 main and af:panelGroupLayout
components.
4.
Right click the group component above the region
one and select Convert from 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 to scroll.
6.
In the Structure pane, select the panelGroupLayout
and move it above the region component.
7.
The Structure pane should look like this:
8.
Expand the panelGroupLayout | panelCollection component
and select the table 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 press Return.
Then select the table* -t1component and using the
right arrow button
shuttle the selection in the selected pane.
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 Employee button.
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.
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:
Bookmark
from
the Component Palette and drag and drop it onto the diagram surface.
from the Component Palette and drag and drop it onto the diagram surface.
from the Component Palette and clicking in the BrowseEmployees
view, drag and drop it into the CreateEdit router.
.
icon to save the application. The BrowseEmployees page is now defined.
to create a new case condition.
shuttle the selection in the selected pane.
