In this tutorial, you use Oracle JDeveloper 12.1.3 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 encapsulate 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.

This tutorial describes how to create ADF task flows that enable navigation, encapsulation, reuse, managed bean lifecycles, and transactions within an application. It includes the basic steps for creating a task flow diagram, adding activities and control flows to it, and running the finished task flow.

In this tutorial, you create two bounded task flows with various components in it. Using a router to determine direction, views to see data, and returns to exit flows, you design the task flows to be able to support search and update functions. You bind the view components with data controls. You define a managed bean to handle a typed password . You define the rules for the router where the password is verified allowing you to login to the application. You create a JSF Page and bind the task flow as a region in the JSF page, creating a parameter value for the username.

This screenshot shows an example register user page at runtime


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 taskflowsolution.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 window, click New Application. Another option is to use the File > New... menu option to create a new application.

    This screenshot shows the Applications window buttons with the option to create a new application or open an existing one
  2. In the New Gallery, select the General > Applications category, then the ADF Fusion Web Application 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).

    Then click OK.

    This screenshot shows the Applications category selected in the left pane and the A D F Fusion web application option        selected in the right pane
  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. Leave the rest of the values at their default and click Finish.

    If you decide to look at some of the additional pages in the wizard, you can notice the Model and ViewController package names have "demo" as their prefix.

    This screenshot shows the Application Name selected in the left pane and the option to name the application in the right pane


    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.

    This screenshot shows the various application artifacts that you can select and create in J Developer

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

    This screenshot shows the Applications window with expanded Model and View Controller projects displayed
  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.

    This dialog appears before you create your first business component, you also use it to globally control the SQL flavor that the view objects will use to formulate SQL statements. Although the default for an Oracle database connection is always the Oracle SQL flavor, other SQL flavors you can choose include OLite (for the Oracle Lite database), SQLServer for a Microsoft SQLServer database, DB2 for an IBM DB2 database, and SQL92 for any other supported SQL92- compliant database. Note that you cannot use the Project Properties dialog to change the SQL flavor after you've initialized a data model project, but you can you can override the SQL flavor in the overview editor for the adf-config.xml file. Specifying the database type in the adf-config.xml file supports generating SQL statements during runtime which can require the actual database type.

    This screenshot shows step 2 connect to a database in the quick start checklist
  6. The step expands showing useful information such as prerequisites required for performing this task. Click the Create a Database Connection button.

    This screenshot shows the details of step 2 in the quick start checklist
  7. Specify the following properties for the new connection you are creating:

    Enter the Oracle JDBC Settings properly to point to the correct 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
    This screenshot shows the fields used to create the database connection definition
  8. In the Checklist pane, set the status of the Connect to a Database step to Done.

    This screenshot shows the dropdown menu in step 2 of the checklist with option Done selected
  9. Collapse the database node and click the Build Business Services step to expand it. Then click the Go to Sub steps button.

    This screenshot shows step 3 of the checklist with the Go to sub steps button
  10. In the sub task list, click the Create Entity Objects and Associations sub task.

    This screenshot shows the first sub task of step 3 expanded with text that describes the task

    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.

    Importantly, it allows you to encapsulate domain business logic to ensure that your business policies and rules are consistently validated. Entity objects support numerous declarative business logic features to enforce the validity of your data. You will typically complement declarative validation with additional custom application logic and business rules to cleanly encapsulate a maximum amount of domain business logic into each entity object. Your associated set of entity objects forms a reusable business domain layer that you can exploit in multiple applications. In most cases, an entity is mapped to one database table.


    This screenshot shows the first sub task of step 3 with Create Entity Objects and Associations buttons
  11. In the Select Project for Action dialog, select the Model project.

    Click OK.

    This screenshot shows the dialog with the Model project highlighted in the dropdown project list
  12. In the Initialize Business Components Project dialog the HRConn connection should be selected. Then click OK.

    This screenshot shows the dialog with the details of the the H R Con database connection displayed
  13. In the Entity Objects page of the Create Business Components from Tables wizard, click the Query button to examine the data dictionary and see available tables.

    This screenshot shows step 1 in the wizard with the query button
  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 select.

    Then click Next to continue.

    This screenshot shows step 1 in the wizard with the available tables in the left pane and the selected table employees in     the right pane
  15. In the Entity-based 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.

    Notice how the name changes to EmployesView(Employees). You see the VO name and the reference EO it was created from.

    Then click Next to continue.

    This screenshot shows step 2 in the wizard with the Employees View view object displayed in the selected list on the right
  16. In the Query-based 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.

    There are several types of view objects that you can create in your ADF Business Components project:
    - Read-only view objects when updates to data are not necessary (can also be entity-based)
    - Entity-based view objects when data updates will be performed
    - Static data view objects for data defined by the view object itself
    - Programmatically populated view object.

    An entity-based view object can be configured to support updatable rows when you create view objects that map their attributes to the attributes of one or more existing entity objects. The mapped entity object is saved as an entity usage in the view object definition. In this way, entity-based view objects cooperate automatically with entity objects to enable a fully updateable data model. The entity-based view object queries just the data needed for the client-facing task and relies on its mapped entity objects to automatically validate and save changes made to its view rows. Like the read-only view object, an entity-based view object encapsulates a SQL query, it can be linked into master-detail hierarchies, and it can be used in the data model of your application modules.
  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.

    The application module is the "work unit" container that includes instances of the reusable view objects required for the use case in question, related through metadata to the underlying entity objects in your reusable business domain layer whose information the use case is presenting or modifying.

    This screenshot shows step 4 of the wizard with option to name and add the application module to the project
  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.

    This screenshot shows all the sub tasks of step 3 of the checklist with the first subject marked done
  19. Set the status of the Build Business Services step to Done.

    This screenshot shows the dropdown menu on step 3 of the checklist with the option done selected
  20. The work on the model project is performed. Expanding the Model project, the Applications window should look like the following:

    This screenshot shows the expanded Model project with nodes representing the various business components the wizard creates
  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. >

    Instead of representing an application as a single large JSF page flow, you can break it up into a collection of reusable task flows. Each task flow contains a portion of the application's navigational graph. The nodes in the task flows are activities. An activity node represents a simple logical operation such as displaying a page, executing application logic, or calling another task flow. The transactions between the activities are called control flow cases.

    The two types of ADF task flow are:
    - Unbounded task flow: A set of activities, control flow rules, and managed beans that interact to allow a user to complete a task. An ADF unbounded task flow consists of all activities and control flows in an application that are not included within any bounded task flow.
    - Bounded task flow: A specialized form of task flow that, in contrast to an unbounded task flow, has a single entry point and zero or more exit points. It contains its own set of private control flow rules, activities, and managed beans. An ADF bounded task flow allows reuse, parameters, transaction management, and reentry.

    This screenshot shows the bounded task flow for the secure login process, where activities of the process are nodes in the    task flow diagram

  1. In the Applications window, right click the ViewController node and select New > From Gallery from context menu.

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

    A bounded task flow is similar to a Java method in that it:
    - Has a single entry point
    - May accept input parameters
    - May generate return values
    - Has its own collection of activities and control flow rules
    - Has its own memory scope and managed bean life span (a page flow scope instance)

    An ADF bounded task flow consists of its own set of private control flow rules, activities, and managed beans. A caller requires no internal knowledge of such things as page names, method calls, child bounded task flows, managed beans, and control flow rules within the bounded task flow boundary. Input parameters can be passed into the bounded task flow, and output parameters can be passed out on exit of the bounded task flow. Data controls can be shared between task flows.


    This screenshot shows the right-click menu displayed on the View Controller project, with option New From Gallery selected
  2. In the New Gallery, expand the Web Tier > JSF/Facelets node and select ADF Task Flow.

    This screenshot shows the JSF Facelets category select in the left pane and the A D F task flow option selected in the right
  3. In the Create Task Flow dialog, enter 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
    This screenshot shows the dialog to create the task flow with the name and path specified, and required properties selected
  4. A new empty task flow diagram displays and a new entry is created in the Applications window.

    This screenshot shows the new task flow as a node in the expanded view controller project
  5. Select the View component View icon from the Components window 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.

    A page fragment is a JSF JSP document that is rendered as content in another JSF page. Page fragments are typically used in bounded task flows. The bounded task flow can be added to a page as a region. This allows for reuse of the task flows, and allows a page to include multiple areas, each containing specific flow.

    A view activity is associated in metadata with a physical JSF page or page fragment. The view activity is identified by an id attribute. The page or page fragment name is identified by a <page> element in the task flow metadata. The view activity ID and page name do not have to be the same.


    This screenshot shows an empty task flow diagram surface with an arrow indicating where to drag and drop task flow            components into the diagram surface

  6. Change the default name to intro.

    This screenshot shows the View component as a node in the task flow diagram after the drag and drop operation

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

    This screenshot shows where to drop a second view component from the components window into the diagram surface

    Rename it search.

    This screenshot shows the diagram view node renamed search

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

    This screenshot shows the addition of a third view component

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

    Notice the dotted line between each of the three view. Since we created the task flow with trains, there's an implicit flow between all the views.

    This screenshot shows renaming the third view component as 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.

    This screenshot shows all three view activities again, including the first one for the intro page

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

    This screenshot shows the dialog with the name of the view highlighted and the default create blank page option selected
  2. The page design pane opens up. From the Components window, in the ADF Faces General Controls > Location 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.

    The end user clicks a series of train stops, each stop linking to a particular page.

    An optional Train Button Bar component can be added which contains buttons that provide an additional means to navigate backwards and forwards though the stops. This component can be used in conjunction with the train component to provide multiple ways to navigate through train stops..

    Each bounded task flow can have a single train only. If the bounded task flow logically includes multiple trains, you must add each train to a separate bounded task flow.

    This screenshot shows where to drag and drop a component into the page design surface

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


    This screenshot shows a default e l expression that binds the model to the train component

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

    This screenshot shows where to drag and drop a component into the expanded page structure in the Structure window

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

    This screenshot shows a default e l expression that binds the model to the train button bar component

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

    This screenshot shows the Structure window expanded with the new output text component highlighted at the bottom of the page  structure

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

    This screenshot shows the Value property with the entered output text

    The page should look like this:

    This screenshot shows the page design view with the entered output text

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

    This screenshot shows where to click among the open tabs

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

    This screenshot shows the search view highlighted in the task flow diagram

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

    This screenshot shows the dialog with the name of the page highlighted and the default option create blank page selected

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

    This screenshot shows where to drag and drop the train component from the Components window to the page design surface

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

    This screenshot shows a dialog with the default E L expression that binds the model to the train component

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

    This screenshot shows where to drag and drop a train button bar component into the Structure window, just below the train node

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

    This screenshot shows a dialog with the default E L expression that binds the model to the train button bar component

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

    This screenshot shows the tab to click among the open tabs

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

    This screenshot shows the update view highlighted in the task flow diagram

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

    This screenshot shows the dialog with the name of the view highlighted and the default option create blank page selected

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

    This screenshot shows where to drag and drop the train component from the Components window into the page design surface

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

    This screenshot shows a dialog with the default E L expression that binds the model to the train component

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

    This screenshot shows where to drag and drop a train button bar component into the Structure window, just below the train node

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

    This screenshot shows where to drag and drop a train button bar component into the Structure window, just below the train node


  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.

  2. In the Applications Navigator open 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.

    By default, for all business components, a data control is created to query all of the attributes in the view object.When dropped on a page this data control produces a page where data can be displayed as an output component.

    You can use the objects in the data control to create data bound user interface components. A few of the most commonly used types of data controls include the following:

    ADF Business Components : This type of data control is generated by JDeveloper when you create an application module in your ADF Business Components application.
    JavaBean : This type of data control obtains the structure of the data from POJOs (plain, old Java objects).
    EJB : The EJB data control is essentially the same as the JavaBean data control, except that it uses features inherent in the EJB architecture to obtain the structure of the data.
    Web Service : A Web Service data control obtains the structure of the data from the WSDL for a web service.


    This screenshot shows the expanded App Module Data Control node with a right-click menu displayed on the All Queriable Attributes node

    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.

    Both the query and quick query search forms are ADF Faces components. A quick query search form has one search criteria field with a drop down list of the available searchable attributes from the associated data collection. Typically, the searchable attributes are all the attributes in the associated view object.

    You can exclude attributes by setting the attribute's Display Hint property in the Control Hints page of the Edit Attribute dialog to Hide. The user can search against the selected attribute or search against all the displayed attributes. The search criteria field type will automatically match the type of its corresponding attribute. An Advanced link built into the form offers you the option to create a managed bean to control switching from quick query to advanced mode query search form.

    This screenshot shows a quick query search form with two fields: one for the search criteria field (the attribute City) and one for the search value (with the value Omaha)


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

    Then click OK.

    This screenshot shows the dialog to create a table with the properties selected in the top half and the list of columns to display in the bottom half
  4. The page should look like the following:

    This screenshot shows the page in the page editor with the table displayed but without data
  5. Save your work and then click the update tab to open the page.

  6. From the Data Controls panel, select AppModuleDataControl > EmployeesView1 then drag and drop it onto the update page.

    This screenshot shows the expanded App Module Data Control node with a right-click menu displayed on the Employees View 1 node
  7. From the pop up menu select Create > ADF Form option.

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

    ...multiple attribute bindings and associated UI components are created. The attributes on the UI components (such as value) are bound to properties on that attribute's binding object (such as inputValue) or to the values of control hints set on the corresponding business object.

    When you drag an attribute or an object onto a JSF page and drop it as a UI component, among other things, a page definition file is created for the page (if one does not already exist). Bindings for the iterator and attributes are created and added to the page definition file. Additionally, the necessary JSPX page code for the UI component is added to the JSF page..

  8. In the Create Form dialog, in the Fields list, 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.

    This screenshot shows the dialog to create a form with the properties selected in the top half and the three rows to delete highlighted in the bottom half
  9. In the Components window, select the Button icon button and drag and drop it next to the Submit button.

    This screenshot shows where to drag and drop a button into the page design surface, next to the Submit button
  10. In the Properties window, type Cancel in the Text field for the button.

    This screenshot shows where to enter the button label in the expanded common properties list of the properties window
  11. The page should look like the following:

    This screenshot shows the updated button label in the page 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.

    This screenshot shows the tab to click among the open editor tabs
  2. Click the Overview tab and then select the Behavior tab.

    This screenshot shows the overview page of the task flow editor, with the behavior tab selected in the left pane and the details shown on the right
  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.

    You can use a bounded task flow to represent a transaction and to declaratively manage transaction boundaries. For example a customer registration and a employee registration task flow might be implemented with the use of task flow return activities. A Cancel button would implement a rollback in the task flows. A Save button would then be used for commit functionality.

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

    This screenshot shows the dropdown menu of the Transaction details with the option Always Begin New Transaction selected
  4. Back in the diagram, select the Task Flow Return component task flow returnand drop it underneath the update view.

    This screenshot shows where to drag and drop the task flow return component into the task flow diagram

    Rename it commit.

    This screenshot shows the renamed task flow return with the name highlighted r
  5. Select again the Task Flow Return component task flow returnand drop it underneath the update view. Rename it rollback.

    This screenshot shows a second task flow return added to the task flow diagram
  6. Select the Control Flow Case component control flow case from the Components window and click inside the update view then click inside the commit return.

    This screenshot shows a control flow case line stretching from the update view to the commit return

    Rename it commit.

    This screenshot shows the label of the task flow case renamed to commit
  7. Select the Control Flow Case component control flow case from the Components window and click inside the update then click inside the rollback return. Then rename it rollback.

    This screenshot shows a second line streching from the update view to the rollback return with the case named rollback
  8. The task flow diagram should look like the following:

    This screenshot shows the task flow diagram with three views and two returns connected to the last view in the flow
  9. Select the commit return component and in the Properties window, in the Behavior tab, for the End Transaction field, select commit, from the list of values.

    This screenshot shows where to enter commit in the expanded Behavior tab of the Properties window
  10. Repeat the same operation selecting the rollback return and select rollback from the list for the End Transaction field.

    This screenshot shows where to enter rollback in the expanded Behavior tab of the Properties window
  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.

    This screenshot shows the page design editor for the update page with the submit button selected

    In the Properties window, in the Action field, select commit from the list.

    This screenshot shows where to select commit in the expanded Common tab of the Properties window
  13. Select the Cancel button and in the Properties window, in the Action field, select rollback from the list.

    This screenshot shows where to select rollback in the expanded Common tab of the Properties window
  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.

For example, JDeveloper, by default, creates an empty unbounded task flow (source file name is adfc-config.xml) when you create a Fusion web application using the Fusion Web Application template. At runtime, the Fusion web application can call bounded task flows from activities that you added to this unbounded task flow.

As shown below, the first activity to execute in an application is often a view activity within an ADF unbounded task flow. A view activity represents a JSF page that displays as part of the application. The activity starts with the Home view activity and then calls a bounded task flow. The calltoLogin_taskFlow activity calls a bounded task flow that enables a user to log into the application.

This screenshot is a completed task flow diagram described by the surrounding text

You can also design an application in which all application activities reside within the ADF unbounded flow. This mimics a Struts or JSF application, but doesn't take advantage of ADF bounded task flow functionality. To take full advantage of task flow functionality, use ADF bounded task flows.
  1. In the Applications window, right click the ViewController node and select New > From Gallery  from the context menu.

    This screenshot shows the right-click menu on the View Controller project with New From Gallery highlighted
  2. In the New Gallery, click the Web Tier > JSF / Facelets node and select ADF Task Flow. Then click OK.

    This screenshot shows the JSF Facelets category selected in the left pane and the A D F Task flow option selected in the right
  3. In the Create Task Flow dialog, enter security-flow as the File Name. Select the the Create as Bounded Task Flow and Create with Page Fragments checkboxes.

    Click OK.

    This screenshot shows the dialog with the entered task flow name and the option to create a bounded task flow with page       fragments selected
  4. A new empty task flow diagram displays and a new entry is created in the Applications window.

    This screenshot shows the expanded view controller project in the Applications window with the security-flow node highlighted  in the page flows folder
  5. Select the View component view icon from the Components window and drag and drop it onto the diagram surface and rename the view to login.

    This screenshot shows where to drag and drop the task flow view component into the task flow diagram
  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.

    Each control flow can correspond to a different router case. Each router case contains the following elements, which are used to choose the activity to which control is next routed. The first expression that evaluates to true is used to determine the corresponding outcome.

    expression: An EL expression evaluating to either true or false, for example, #{(pageFlowScope.welcomeUserRegistrationBean.userSelection eq 'Customer')}

    outcome: A value returned by the router activity if the EL expression evaluates to true, for example, newCustomer. If the router outcome matches a from-outcome on a control flow case, control passes to the activity that the control flow case points to.

    If none of the cases for the router activity evaluates to true, or if no cases are specified, the outcome specified in the router default outcome field (if any) is used.


    This screenshot shows where to drag and drop the task flow router component into the task flow diagram
  7. From the Applications window, select the emp-update-flow and then drag and drop it on the diagram below the router.


    This screenshot shows where to drag and drop an existing task flow from the view controller project into the task flow diagram

  8. Select the View icon view icon from the Components window then drag and drop it on the diagram surface and name it error.

    This screenshot shows where to drag and drop the task flow view component into the task flow diagram
  9. Select the Control Flow Case icon control flow case and click inside the login view, then click inside the router.

    This screenshot shows a control flow line stretching from the login view to the routerr
  10. Repeat the previous operation to draw a Control Flow Case control flow case from the router to the error view.

    This screenshot shows a control flow line stretching from the router to the error view

     Rename the flow to bad.

    This screenshot shows the renamed label of the task flow case
  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.

    This screenshot shows a second control flow line stretching from the router to the emp update flow view with the renamed label
  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:

    This screenshot shows a control flow case line stretching from the error view to the login view and the renamed label
  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 ADF Page Fragment, click OK to accept default values.

    This screenshot shows the dialog with the name of the page highlighted, and the default create blank page option selected
  2. In the Components window, drag and drop an Input Text icon onto the login page.

    This screenshot shows where to drag and drop the input text component into the page design surface

    Enter password as the label.

    This screenshot shows where to enter the label in the expanded Common tab of the properties window
  3. In the Advanced tab, next to the Binding field, select Edit from the drop down list.

    This screenshot shows the right-click menu on the Binding icon in the expanded Advanced tab, with the Edit option highlighted

    In the Edit Property dialog, click the New button to create a Managed Bean to hold the password value. If we already had a bean to perform this functionality, we could just select it, and then select an existing method or create a new one.

    This screenshot shows the dialog with the managed bean dropdown list and the New button next to the list


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

    When the JSF application starts up, it parses these configuration files, and the beans listed within them are made available. The managed beans can be referenced in an EL expression, allowing access to the beans' properties and methods. Whenever a managed bean is referenced for the first time and it does not already exist, the Managed Bean Creation Facility instantiates the bean by calling the default constructor method on it. If any properties are also declared, they are populated with the declared default values.

    Use managed beans to store logic that is related to the UI rendering only. All application data and processing should be handled by logic in the business layer of the application. Similar to how you store data-related logic in the database using PL/SQL rather than a Java class, the rule of thumb in a Fusion web application is to store business-related logic in the middle tier. This way, you can expose this logic as business service methods, which can then become accessible to the ADF Model layer and be available for data binding.


    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)
    This screenshot shows the properties of the managed bean with the option Generate Class if it does not exist selected

    Click OK.

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

    This screenshot shows the dialog with the property dropdown list and the New button next to the list

    In the Create Property dialog, enter password as the Property Name. Click OK to create the property and OK again the complete the binding.

    This screenshot shows the dialog with entered name property
  5. The Advanced node, in the Properties window, for the input text component should look like the following:

    This screenshot shows the default expression for the binding property in the expanded Advanced tab of the Properties window

    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.


    This screenshot shows where to drag and drop the button component into the Structure window below the input text component

    Change the Text property to login.

    This screenshot shows where to enter the label in the expanded Common tab in the Properties window

  7. Back on the security-flow, select the router.

    This screenshot shows the router icon selected in the security task flow
  8. In the Properties window for the router, select bad from the drop down list as the default outcome.

    This screenshot shows where to select the default outcome in the expanded General tab of the Properties window
  9. Add an outcome case by clicking the Add button green plus sign in the Cases panel.

  10. In the Expression field select the Expression Builder option from the list.

    This screenshot shows the right-click menu on the case outcome with the expression builder option highlighted in the expanded  General tab of the Properties window

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

    This screenshot shows the password value node highlighted in the bottom pane and value expression entered in the top pane

    Click OK.

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

  11. Back in the Properties window, 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.

    This screenshot shows the case outcome good selected and the new expression entered in the expanded General tab of the        Properties window
  12. 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.

    To pass an input parameter to a bounded task flow, you must specify one or more:
    - Input parameters on the task flow call activity. These specify where the calling task flow will store parameter values.
    - Input parameter definitions on the called bounded task flow. These specify where the called bounded task flow can retrieve parameter values..

    The input parameter name specified for each option will be the same in order to map input parameter values back into the called bounded task flow. The value for each corresponds to the mapping between where the value will be retrieved within the caller and the called task flow. If you don't specify a value for the input parameter, the value defaults to #{pageFlowScope.parmname}, where parmname is the name of your parameter.

    You can specify on the input parameter definition for the called bounded task flow whether an input parameter is required. If a required input parameter is not received, an error occurs (these are flagged at design time as well as at runtime). An input parameter definition that is identified as not required can be ignored during task flow call activity creation. By default, all objects are passed by reference. Task flow call activity input parameters can be passed by reference only if managed bean objects are passed, not individual values. By default, primitive types (for example, int, long, or boolean) are passed by value.


    This screenshot shows the parameters page of the task flow editor with an empty input parameter definition in the top pane    and an empty return value definition in the bottom
  13. In the Input Parameter Definitions, click the Add button green plus sign.

    This screenshot shows the add button in the top pane of the parameters page

  14. 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 true
    This screenshot shows properties entered in the input parameter definitions pane of the parameters page
  15. Click the login.jsff tab to open the page,and drag and drop an Output Text component above the password input text.

    This screenshot shows where to drag and drop an output text component into the Structure window above the input text password  component

  16. In the Properties window, 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.

    Example expressions look like #{userInfoBean.principalName} to reference a particular user's name, or #{userInfoBean.principalName eq 'SKING'} to evaluate whether a user's name is SKING or not. At runtime, a generic expression evaluator returns the String and boolean value of these respective expressions, automating access to the individual objects and their properties without requiring code.

    At runtime, the value of certain JSF UI components is determined by the value attribute. While a component can have static text as its value, typically the value attribute will contain a binding that is an EL expression that the runtime infrastructure evaluates to determine what data to display. For example, an outputText component that displays the name of the currently logged-in user might have its value attribute set to the expression #{userInfoBean.principalName}. Since any attribute of a component can be assigned a value using an EL expression, it's easy to build dynamic, data-driven user interfaces. For example, you could hide a component when a user is not logged in by using a boolean-valued expression like #{userInfoBean.prinicpalName !=null} in the UI component's rendered attribute. If there is no principal name in the current instantiation of the userInfoBean, the rendered attribute evaluates to false and the component disappears from the page.


    This screenshot shows the right-click menu with the Expression Builder option highlighted on the Value icon in the expanded   Common tab of the Properties window
  17. In the Expression Builder make sure to clear out the expression field,select All for the Variables, then expand ADF Managed Beans > pageFlowScope and select username.

    Then click OK.

    This screenshot shows the user name variable selected in the bottom pane and the default expression in the top
  18. Click the security-flow tab to open the task flow diagram and double click the error view to create the page.

    This screenshot shows the task flow diagram with the error view highlighted

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

    This screenshot shows the dialog with the name of the view highlighted and the default create blank page option selected
  19. From the Components window, drag and drop an Output Text output text icon onto the page.

    This screenshot shows where to drag and drop an output text component into the task flow design surface

    In the Properties window, enter Error, wrong password in the Value field.

    This screenshot shows the updated value property in the expanded Common tab of the Properties window
  20. In the Design editor, press Enter to add a new row and drag and drop a Button component button icon underneath the error text. You can also use the Structure window as shown below.

    This screenshot shows where to drag and drop the button component into the Structure window below the error output text

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

    This screenshot shows the updated properties in the expanded Common tab of the properties window
  21. 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 Applications window and select New > From Gallery from the context menu.

    This screenshot shows the right-click menu on the view controller project with the New From Gallery item highlighted
  2. In the New Gallery, select Web Tier as the Category and JSF/Facelets and Page as the Item.

    Then click OK.

    This screenshot shows the JSF Facelets category selected in the left pane and the Page option selected in the right
  3. In the Create JSF Page dialog, enter master as the File Name and checking the Reference ADF Page Template option, select the Oracle Three Column Layout.

    Then click OK.

    This screenshot shows the dialog with the page name entered and options to create a reference A D F page template selected
  4. Scroll around to see the displayed page in the editor.

    This screenshot shows the page design editor with the page template displayed
  5. From the Components window, drag and drop an Output Text component ouyput text icon onto the start facet.

    This screenshot shows where to drag and drop an output text component into the page template

    Change the Value field to Welcome in the Properties window.

    This screenshot shows the updated value property in the expanded Common tab of the Properties window

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

    Select Region from the menu.

    This screenshot shows the task flow selected in the expanded view controller project and a drop menu with the option Region   highlighted in the page template



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

    An ADF region comprises the following:
    - An af:region tag that appears in the page or page fragment where you render the region
    - An instance object that implements RegionModel from the following package: oracle.adf.view.rich.model
    - A task flow binding (task Flow) in the page definition that identifies the bounded task flow to use in the ADF region
    .
    When first rendered, the ADF region's content is that of the first view activity in the bounded task flow. The view activities used in the bounded task flow must be associated with page fragments, not pages. You can pass values to the ADF Region using task flow binding input parameters or contextual events. In addition, you can configure the task flow binding's parametersMap property to determine what input parameters the task flow binding passes from the bounded task flow to the ADF region.

    ADF regions can be configured so that you determine when the region activates or refreshes. You can also configure an ADF region and a bounded task flow so that navigation control stops in the bounded task flow and passes to the page that contains the ADF region. Finally, you can create dynamic regions (ADF dynamic regions) where the task flow binding determines at runtime what bounded task flow renders in the region and configure a dynamic region link so that end users can change the bounded task flow that renders in the ADF dynamic region at runtime..

    This screenshot shows only the drop menu that displays in the page editor with the options region and dynamic region

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

    This screenshot shows the dialog with the value entered for the user name input parameter

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

    This screenshot shows the region in the master page in the page design editor

  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 the context menu.

    This screenshot shows the right-click menu with option run highlighted in the page editor
  2. The page loads in your browser displaying the username variable (Scott) and waiting for a password to be typed in.

    This screenshot shows the master page running in the browser

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

    This screenshot shows oops entered in the 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.

    This screenshot shows the error page in the browser

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

    This screenshot shows the login page with oracle as the password

    Then click login.

  6. The new page appears displaying the train.

    This screenshot shows the first page of the task flow

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

    This screenshot shows the back and next buttons below the train stops in the page

  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.

    This screenshot shows searching for any employee who starts with the letter 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.

    This screenshot shows the returned employees in a region in the same page

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

    This screenshot shows editing the employee salary and the submit button

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

    This screenshot shows the login page

  12. Switch back to JDeveloper and open the Database Navigator (if not visible, use Window > Database > Databases).

    This screenshot shows the Window menu on the toolbar with databases selected

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

    This screenshot shows the database navigator with the employees table highlighted in the expanded tables list

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

    This screenshot shows the data tab selected for the employees table

    Right-click the header for the LAST_Name column and then from the context menu, select Sort.

    This screenshot shows the right-click menu with the Sort option highlighted

  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.

    This screenshot shows the dialog with the available columns on the left and selected columns on the right with one column     selected

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

    This screenshot shows the updated record with new value in the employees table
  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
Copyright © 2017 Oracle and/or its affiliates. All rights reserved.