In this tutorial, you use Oracle JDeveloper 11.1.2 to define the page flow of an application using task flows. You will be creating an application to search for and update employee records in a database. We will implement a three-step process using a bounded task flow (a way to encapsulated a reusable portion of an application) and a UI component called a train. First we’ll implement a search capability, then forward the user to some search results, allowing them to select an employee from the results. When they select an employee, we’ll give them a UI called an ADF Form to edit the employee’s record. Then we’ll give them the ability to either submit the changes or cancel, which on the back end will either commit or rollback the changes to the database. Finally we’ll implement a simple login scenario using a router for validation of a password.
show more or lessRead more...
Purpose Duration Application
This tutorial shows you how to develop a user interface using ADF Task Flows. You define the page sequence and routing, and security of the application. To see the complete application you will create, click the Download button to download a zip of the final application, and then unzip it in your JDeveloper mywork folder. 2 to 2.5 hours Download taskflow.zip
Step 1: Create a New Fusion Application and Business Components

When you work in JDeveloper, you organize your work in projects within an application. JDeveloper provides several templates that you can use to create an Application and projects. The templates are pre configured with a basic set of technologies that are needed for developing various types of applications, and you create your working environment by selecting the template that fits your needs. You can then configure it to add any other technologies you plan to use.

In the first section you are going to create a new Application using the Fusion technology and build reusable business components that will access the database. To create the application and the model components, perform the following steps:

  1. In the Applications Navigator, click New Application. Another option is to use the File->New... menu option to create a new application.

    new application in navigator
  2. In the New Gallery, select the Fusion Web Application (ADF) option. This option creates a data bound ADF web application. The application consists of two projects, one for the data model (ADF-Business Components) and the other for the view controller components (ADF Faces and ADF Task Flows).

    new gallery - fusion web app selected
  3. In the Create Fusion Web Application dialog box, specify the Application Name to be TaskFlow. Notice that the directory changes to match the new name. You can change the C:\JDeveloper\mywork part of the path to create your files in another location.

    In the Application Package Prefix field set the value to be demo. In the Application Templates choose the Fusion Web Application (ADF) and click Finish.

    application name


    The Overview pane displays a Checklist you can refer to as a guide for developing a Fusion Web Application.

    The Checklist is displayed by default when a Fusion Web application is created.

    overview page

  4. Examine the Application Navigator and you'll see two new projects now. The default naming rules for these projects are Model for one and ViewController for the other.

    naviagtor showing all the created files
  5. We start creating the model components using the CheckList Overview. Click the Connect to a Database step.

    You use the Initialize Business Components Project dialog to select a design time application resource connection to use while working on your business components in this data model project or to create a new application resource connection by copying an existing IDE-level connection. Show more or lessRead more...

    quick start checklist - database connection
  6. The step expands showing useful information such as prerequisites required for performing this task. Click the Create a Database Connection button.

    create database connection
  7. Specify the following properties for the new connection you are creating:

    Enter the Oracle JDBC Settings properly to point to the right host, port and SID for your database. Click the Test Connection button and verify that you got success.

    Once done, click the OK button.

    Property Value
    Connection Name HRConn
    Username hr
    Password hr
    database connection creation page
  8. In the Checklist pane, set the status of the Connect to a Database step to Done.

    confirm db connection created
  9. Click the Build Business Services step to expand it, then click the Go to Sub steps button.

    build service checklist
  10. In the sub task list, click the Create Entity Objects and Associations sub task.

    create entity objects - checklist

    Then click the Create Entity Objects and Associations button.

    An entity object is the ADF Business Components component that represents a row in the specified data source and controls modifying its associated attributes. Show more or lessRead more...

    create entity objects and assoications - checklist
  11. In the Select Project for Action dialog, select the Model project.

    Click OK.

    select project for services
  12. In the Initialize Business Components Project dialog the HRConn connection should be selected. Then click OK.

    define connection for services
  13. In the Entity Objects page, click the Query button to examine the data dictionary and see available tables.

    select entities to create
  14. Select the EMPLOYEES table in the Available list, and click the right arrow right arrow to move your selections to the Selected list. This step creates updatable Entity Objects based on the tables you chose.s

    Then click Next to continue.

    employee entity selected
  15. In the Updatable View Objects dialog, move Employees (HR.EMPLOYEES) to the Selected list. This step creates matching view objects to perform queries on the entity object you created before.

    Then click Next to continue.

    create views - employees view selected
  16. In the Read Only View Objects dialog, Click Next to continue.

    A view object is an Oracle Application Development Framework (Oracle ADF) component that encapsulates a SQL query and simplifies working with its result. Show more or lessRead more...
  17. In the Application Module dialog, click Finish to create the business components in the Model project.

    An application module is an ADF Business Components component that encapsulates the business service methods and UI-aware data model for a logical unit of work related to an end-user task. Show more or lessRead more...
    specify application module to use
  18. In the Checklist, set the status of the Create Entity Objects and Associations step to Done. Then click the Close Step 3 button.

    Note: Since steps 3.2, 3.3 and 3.4 have also been completed, we could as well set their status to done, but we'll do it at a higher level.

    close checklist for services
  19. Set the status of the Build Business Services step to Done.

    set services to be complete
  20. The work on the model project is performed. Expanding the Model project, the Application Navigator should look like the following:

    naviagtor showing service files created
  21. Click the Save All save all icon on the JDeveloper menu bar, or select File | Save All from the menu.

    Next we'll work on the ViewController project.


Step 2: Create a Bounded Task Flow

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

    ADF task flows provide a modular approach for defining control flow in an application. Show more or lessRead more...

  1. In the Application Navigator, right click the ViewController node and select New from context menu.

    An ADF bounded task flow is used to encapsulate a reusable portion of an application. Show more or lessRead more...

    invoking the New gallery from application navigator
  2. In the New Gallery, click the Web Tier | JSF/Facelets node and select ADF Task Flow.

    new gallery with adf task flow selected
  3. In the Create Task Flow dialog, type emp-update-flow as the File Name. Select the following checkboxes.

    Then click OK.

    Property Value
    Create as Bounded Task Flow Checked
    Create with Page Fragments Checked
    Create Train Checked
    namning the task flow
  4. A new empty task flow diagram displays and a new entry is created in the Application Navigator.

    navigator and blank task flow diagram
  5. Select the View component View icon from the Component Palette and drag and drop it onto the diagram surface.

    The primary type of task flow activity is a view, which displays a JSF page or page fragment. Show more or lessRead more...

    creating a new view on the diagram

  6. Change the default name to intro.

    view on the diagramrenaming view to 'intro'

  7. Create a new view View icon on the diagram next to the intro one.

    creating second view on diagram

    Rename it search.

    renaming view to search

  8. Create a third view view icon on the diagram.

    create a third view on diagram

    Rename it update. Your diagram should look similar to the image below.

    renaming third flow 'update'
  9. Save all your work.

Step 3: Build the Task Flow Pages

The intro page is the entry point of this task flow and you'll see how to create a train within the pages. To do this, perform the following steps:

  1. On the emp-update-flow diagram, double click the intro view component to create the page.

    double click the intro page

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

    create new jsf page fragment
  2. The page design pane opens up. From the Component Palette, in the ADF Faces Common Components group, select the Train component train and drop it onto the page design surface.

    A train represents a progression of related activities that guides an end user to the completion of a task. Show more or lessRead more...

    page in designer adding a train

    In the Bind Train dialog, click OK to accept the default value.


    setting the value of the train

  3. Select the Train Button Bar component train button bar and drop it underneath the Train component.

    adding a train button bar

    In the Bind trainButtonBar dialog, click OK to accept the default value.

    binding the train button bar

  4. From the Component Palette, in the ADF Faces General Components group, select the Output Text component output text and drop it underneath the Train Button Bar.

    adding an outpur test

    Open the Property Inspector if not already there (View | Property Inspector or use the key combination [Ctrl] + [Shift] + [I]), and enter Welcome to the Employee updater in the value field.

    setting value of output text

    The page should look like this:

    design view of page

  5. Save all your work and then click the emp-update-flow tab to reopen the task flow diagram.

    reopen task flow page

  6. Double click the search view component to create the search page.

    double click search page

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

    create new jsf page fragment

  8. The page design pane opens up. From the Component Palette, in the ADF Faces Common Components group, select the Train component train and drop it onto the page design surface.

    adding train to page

    In the Bind Train dialog, click OK to accept the default value.

    bind train pane

  9. Select the Train Button Bar component train button bar and drop it underneath the Train component.

    add train button to page

    In the Bind trainButtonBar dialog, click OK to accept the default value.

    bind train button bar pane

  10. Save all your work, and then click the emp-update-flow tab to reopen the task flow diagram.

    select task flow diagram again

  11. Double click the update view component to create the update page.

    double click update page

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

    create jsf page fragment

  13. The page design pane opens up. From the Component Palette, in the ADF Faces Common Components group, select the Train component train and drop it onto the page design surface.

    add train to page

    In the Bind Train dialog, click OK to accept the default value.

    bind train

  14. Select the Train Button Bar component train button bar and drop it underneath the Train component.

    add train button bar

    In the Bind trainButtonBar dialog, click OK to accept the default value.

    bind train button bar


  15. Click the Save All save all icon to save the application.

Step 4: Bind the Task Flow Pages to Data Controls

The search and update pages need to bind data control components. The search page for querying employees on any column criteria and the update page for displaying and updating an employee's salary. To do so, perform the following steps:

  1. Click the search tab to reopen the page.

    reopn search page
  2. In the Application Naviator o pen the Data Controls accordion and expand the following nodes AppModuleDataControl | EmployeesView1 | Named Criteria and drag and drop the All Queriable Attributes on the page.

    A data control is essentially a bridge that makes data from a source, available to the user interface, in an ADF Fusion Web Application. Show more or lessRead more...

    data controls with all querable attributes

    From the pop up menu, select Create | Quick Query --> ADF Quick Query with Table option.

    A quick query search form is intended to be used in situations where a single search will suffice or as a starting point to evolve into a full query search. Show more or lessRead more...


  3. In the Edit Table Columns dialog, select the Single Row Selection and Enable Sorting options.

    Then click OK.

    edit table columns
  4. The page should look like the following:

    page in design view
  5. Click the update tab to open the page.

    reopen update page
  6. From the Data Controls pane, select AppModuleDataControl | EmployeesView1 then drag and drop it onto the update page.

    data control
  7. From the pop up menu select Create | Form --> ADF Form option.

    Dropping an object as a form from the Data Controls panel has the same effect as dropping a single attribute, except. Show more or lessRead more...

    menu create form - adf  form
  8. the Edit Form Fields select the last 3 rows (CommissionPctManagerID and DepartmentId) and click the Delete button delete icon to discard the fields. Then select the Include Submit Button option and click OK.

    edit form field pane
  9. In the Component Palette, select the Button icon button and drag and drop it next to the Submit button.

    update page in design view
  10. In the Property Inspector, type Cancel in the Text field for the button.

    button - text value
  11. The page should look like the following:

    page in design view
  12. Click the Save All save all icon to save the application.

Step 5: Set the Transaction Control for the Task Flow

To end a transaction, you can either use a return activity or you can use a button bound to an operation action. If possible, use a task flow return activity. Using a task flow return activity will commit all the data used in views on the ADF task flow. It also makes it easier to see where your application is doing commits and rollbacks, and is therefore easier to maintain. To implement return activities for transaction controls, perform the following steps:

  1. Click the emp-update-flow tab to reopen the task flow diagram.

    task flow diagram reopened
  2. Click the Overview tab and then select the Behavior tab.

    overview tab and behavior selected
  3. In the Transaction group, set the following properties from the list: Always Begin New Transaction.

    A transaction is a persisted collection of work that can be committed or rolled back together as a group. Show more or lessRead more...

    This way, each individual employee update is seen as a single row granularity transaction.

    transaction area highlighted
  4. Back in the diagram, select the Task Flow Return component task flow returnand drop it underneath the update view.

    adding a tast flow return to the diagram

    Rename it commit.

    rename it commit
  5. Select again the Task Flow Return component task flow returnand drop it underneath the update view. Rename it rollback. .

    rollback rask flow added
  6. Select the Control Flow Case component control flow case from the Component Palette and clicking in the update view, drag and drop it into the commit return.

    add control flow to commit to return

    Rename it commit.

    rename flow to commit
  7. Select the Control Flow Case component control flow case from the Component Palette and clicking in the update view, drag and drop it into the rollback return. Then rename it rollback.

    adding flow to rollback return
  8. The task flow diagram should look like the following:

    completed diagram
  9. Select the commit return component and in the property inspector, in the Behavior tab, for the End Transaction field, select commit, from the list of values.

    select commit returnset end transaction to commit
  10. Repeat the same operation selecting the rollback return and select rollback from the list for the End Transaction field.

    rollback return set to rollback
  11. Click the Save All save all icon icon to save the application.

  12. Click the update tab to open the update page design, and select the Submit button.

    update page, submit button selected

    In the Property Inspector, in the Action field, select commit from the list.

    action for button set to commit
  13. Select the Cancel button.

    cancel button on update page selected

    In the Property Inspector, in the Action field, select rollback from the list.

    action property set to rollback
  14. Click the Save All save all icon to save the application.

Step 6: Define a Second Task Flow

We want to restrict the access to the application through a login process. We create a login page, a router, an error page and the previously created task flow. To create this task flow, perform the following steps:

A typical application is a combination of an unbounded and one or more bounded task flows. Show more or lessRead more...
  1. In the Application Navigator, right click the ViewController node and select New from context.

    navigaor and context menu for new
  2. In the New Gallery, click the Web Tier | JSF node and select ADF Task Flow. Then click OK.

    new gallery selecting the adf task flow
  3. In the Create Task Flow dialog, type security-flow as the File Name. Select the the Create as Bounded Task Flow and Create with Page Fragments checkboxes.

    Click OK.

    create task flow details
  4. A new empty task flow diagram displays and a new entry is created in the Application Navigator.

    naviagtor and design page
  5. Select the View component view icon from the Component Palette and drag and drop it onto the diagram surface.

    task flow

    Rename the view login.

    renamed view to login
  6. Select the Router component router icon and drop it next to the login view.

    You can use a router activity to declaratively route control to activities based on logic specified in an EL expression. Show more or lessRead more...

    adding router to task flow
  7. Select the emp-update-flow in the Application Navigator then drag and drop it on the diagram below the router.


    emp flow added to security flow

  8. Select the View icon view icon from the component palette then drag and drop it on the diagram surface.

    adding a view to diagram

    Rename the View to error.

    rename view to error
  9. Select the Control Flow Case icon control flow case and clicking in the login view, drag the flow into the router.

    adding control flow case to router
  10. Repeat the previous operation to draw a Control Flow Case control flow case from the router to the error view.

    adding control flow case from router

     Rename the flow to bad.

    rename flow to bad
  11. Repeat the previous operation to draw a Control Flow Case control flow case from the router to the emp-update-flow view.

    Rename it to good.

    add another flow to emp task flow named good
  12. Repeat the previous operation to draw a Control Flow Case control flow case from the error view to the login view.

    Rename the flow login. Your diagram should look like the following:

    alt text
  13. The second task flow is complete. Click the Save All save all icon to save the application.

Step 7: Define Task Flow Components and Router Rules

We create a login page with a password field, then we create a backing bean for the password value. Then the router, depending on the password value, leads to an error page or to the emp-update flow. To create the pages and implement the router rules, perform the following steps:

  1. In the diagram, double click the login view icon to create the page. In the Create New JSF Page Fragment, click OK to accept default values.

    login page creating pane
  2. In the Component Palette, drag and drop an Input Text icon onto the login page.

    adding input text

    Enter password as the label.

    setting the lable to password
  3. In the Advanced tab, next to the Binding field, select Edit from the drop down list.

    update the binding property

    In the Edit Property dialog, click the New button to create a Managed Bean to hold the password value.

    creating a backing bean


    Managed beans are Java classes that you register with the application using various configuration files. Show more or lessRead more...

    In the Create Managed Bean dialog, enter the following values:

    Property Value
    Bean Name backing_login
    Class Name backing_login
    Package backing
    Extends java.lang.Object
    Scope request
    Generate Class If It Does Not Exist (checked)
    edit binding pane

    Click OK.

  4. Back in the Edit Property, click the New button next to the Property field.

    create a new backing bean property

    In the Create Property dialog, enter password as the Property Name.

    naming the property 'password'
  5. The Advanced node, in the Property Inspector, for the input text component should look like the following:

    input text in the property inspector

    Notice that for a realistic password field, you would also set the Advanced | Visible property to false to hide the typed password value.

  6. Drag and drop a Button component button underneath the password field.


    adding a button to the page

    Change the Text property to login.

    set the button text to login

  7. Click the security-flow tab to open the task flow diagram and add a Control Flow from the error page to the login page and name it login.
    Then select the router.

    security flow task flow diagram
  8. In the Property Inspector for the router, select bad from the drop down list as the default outcome.
    In the Cases click the Add button plus symbol to create a condition.

    default outcome for router set to bad
  9. In the Expression field select the Expression Builder option from the list.

    select expression builder in cases property

    Expand the following nodes ADF Managed Beans | backing_login | password and select the value variable, then select the '==' operand and type 'oracle'.

    setting the EL expression

    Click OK.

    In this example we have coded oracle as a hard coded value for the password.

  10. Back in the Property Inspector, select good as the outcome, so that if the password entered is equal to oracle, the flow takes you through the 'good' flow to the emp-update flow, otherwise to the error page.

    seting the case outcome value
  11. Now we need to create a parameter to work the managed property value. In the security-flow diagram, click the Overview tab and then the Parameters tab.

    A called ADF bounded task flow can accept input parameters and can pass return values to the caller upon exit. Show more or lessRead more...

    selecting the parameter tab
  12. In the Input Parameter Definitions, click the Add button green plus sign.

    input parameter definitions

  13. Set the parameter to the values from the table below, then save all your work.

    Property Value
    Name username
    Class java.lang.String
    Value (auto populated)
    Required (Checked)
    input parameter definition completed
  14. Click the login.jsff tab to open the page,and drag and drop an Output Text component above the password input text.

    adding a output text to the login page

  15. In the Property Inspector, select the Expression Builder... option from the Value field list.

    In JSF, you use a simple expression language (called EL) to bind to the information you want to present and/or modify. Show more or lessRead more...

    expression build for output text item
  16. In the Expression Builder make sure to clear out the expression field, then expand ADF Managed Beans | pageFlowScope and select username.

    Then click OK.

    setting EL to username
  17. Click the security-flow tab to open the task flow diagram and double click the error view to create the page.

    open the error page

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

    error page with blank template
  18. From the Component Palette, drag and drop an Output Text output text icon onto the page.

    adding an output text to the error page

    In the Property Inspector, enter Error, wrong password in the Value field.

    set the value to wrong password
  19. In the Design, press Enter to add a new row and drag and drop a Button component button icon underneath the error text.

    add new button to page

    In the Property Inspector, change the Text field to Retry, and from the list, select login as the action.

    rename button to retry
  20. Click the Save All save all icon icon to save the application.

Step 8: Create the JSP Page and Binding the Task Flow as a Region to the Page

To create JSF Page that uses the task flow, perform the following steps:

  1. Right click the ViewController node in the Application Navigator and select New from context.

    navigator with contect menu
  2. In the New Gallery, select Web Tier JSF as the Category and JSF/Facelets and Page as the Item.

    Then click OK.

    new gallery with jsp page selected
  3. In the Create JSF Page dialog, enter master as the File Name and checking the Page Template option, select the Oracle Three Column Layout.

    Then click OK.

    create master page
  4. Scroll around to see the displayed page in the editor.

    page with 3 coumn template used
  5. From the Component Palette, drag and drop an Output Text component ouyput text icon onto the start facet.

    adding an output component to the first column

    Change the Value field to Welcome in the Property Inspector.

    setting the value of the output text to welcome

  6. In the ViewController | Web Content | WEB-INF node, drag and drop security-flow.xml onto the Facet center.

    Select Region from the menu.

    adding data control to the page



    You can render a bounded task flow in a JSF page or page fragment (.jsff) by using an ADF region. Show more or lessRead more...

    create context menu displayign region

    In the Edit Task Flow Binding, in the Value field, enter #{'Scott'}.

    task flow binding set to #{'Scott'}

  7. The master page should now look like the following:

    master page with all the items displayed

  8. Click the Save All save all icon icon to save the application.

Step 9: Run the Master Page

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

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

    context menu with run selected
  2. The page loads up in your browser displaying the username variable (Scott) and waiting for a password to be typed in.

    master page running in the browser

  3. Try entering a wrong password value (different from oracle).

    jdev entered in password field

    Then click the login button. The router drives you to the error page.

  4. Click the Retry button to logon with the correct password.

    error page displayed

  5. Back in the login page, enter oracle as the password value.

    login page with oracle as password

    Then click login.

  6. The new page appears displaying the train.

    first page of flow

  7. In the new page, click the Next button or the second button on the train.

    alt text

  8. In the second step of the train, in the search page, select LastName.
    Enter A% in the search field to retrieve all employee's name starting with an A.

    searching for any employee who starts with a

    Click the search button.

  9. In the returned list, select one employee of your choice and then click the Next button.
    You can collapse the Search panel, until you are ready to enter new criteria.

    returned employees

  10. In the Edit page for the selected employee, update the salary to the value of your choice, then click Submit.

    edit page for one employee

  11. The application takes you back to the login page.

    login page

  12. Switch back to JDeveloper and open the Database Navigator (if not visible, use View | Database | Database Navigator).

    databse navigator selected in menu

  13. Expand the TaskFlow | HRConn | Tables nodes and double click the Employees table to open it.

  14. Click the Data tab to display employee's values.

    data tab selected

    Click the Sort button.

    sort button selected

  15. To retrieve more easily the information about the employee you're looking for, you can use the Filter field or use a Sort operation. Click the Sort button and in the Sort Columns dialog, move LAST_NAME in the Selected Columns pane.

    Then click OK.

    sort column pane

  16. Locate the employee you've updated the salary to confirm that the update is committed with the new value.

    updated record with new value
  17. You can reiterate this last process to test the Cancel (rollback) action.

    You've successfully completed this tutorial.

Summary
In this tutorial you developed two independent task flows which included views, returns and routers. In the views, you added data bound components and managed transaction control in the task flows. You learned how to: To learn more about task flows, regions and routers, refer to:

Bookmark Print Expand all | Hide all
Back to top

Did you find this page helpful?



Copyright © 2011, Oracle and/or its affiliates. All rights reserved.