Creating a Train Using an ADF Bounded Task Flow

You will use wizards to quickly create an application and projects, and a blank ADF bounded task flow for each train. The first train you will create consists of four pages (or train stops) that guide an end user to the completion of a task. The second train you will create consists of two pages in a multistep subtask. The second train will be called from 

one of the train stops in the first train sequence.

Creating a Train Using an ADF Bounded Task Flow

You will use wizards to quickly create an application and projects, and a blank ADF bounded task flow for each train. The first train you will create consists of four pages (or train stops) that guide an end user to the completion of a task. The second train you will create consists of two pages in a multistep subtask. The second train will be called from one of the train stops in the first train sequence.

To create a train sequence in a bounded task flow, you will use the task flow diagrammer and Component Palette to draw and connect train stops, call another train, change the train sequence, and add exit points. You will also add control flow rules to define how control flow passes from the called train back to the calling train when the called train flow exits. Next you will create a page template, add the ADF Train component, and bind the component to the train model. Then you will use the template to create JSF page fragments for the train stops. Finally, you will create a JSF page that consumes the first bounded task flow as an ADF region, then run the page.

Purpose	Duration	Application
This tutorial shows you how to create bounded task flows with a train sequence that represents activities in a multistep page flow. 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 JDevelopermywork folder.	40 minutes

Step 1: Create a New Application and Projects

1. From the main menu, choose File > New. In the New Gallery, expand the General category and select Applications. Then in the Items list, select Fusion Web Application (ADF) and click OK.
   
The JDeveloper application is the highest level in the organizational structure. While you are developing your application, it stores information about the objects you are working with. Read more...
2. To follow along with the example, enter TrainWebApp as the application name.
   
The application template you select determines the initial project structure, that is, the named project folders within the application workspace, and the application libraries that will be added. Read more...
3. Accept the defaults and click Finish.
   
   The Application Overview window opens by default in the editor window area when you create a new application. You can optionally close the window, since you will not be using it to create objects for this application.
   
   
All objects that you create within JDeveloper appear in the Application Overview file summary pages, arranged by object type. You can create new files and artifacts, and view them filtered by status and project. Read more...

Step 2: Create a Task Flow for Each Train

1. In the Application Navigator, right-click the ViewController project and choose New > Web Tier > JSF/Facelets > ADF Task Flow, then click OK.
   
ADF task flows provide a modular approach for defining control flow in a Fusion web 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. Read more...
2. In the Create ADF Task Flow dialog, enter or select the following values:

   Field or Option	Value
   File Name	train-flow.xml
   Create as Bounded Task Flow	selected
   Create with Page Fragments	selected
   Create Train	selected

   
   
A train represents a progression of related activities that guides an end user to the completion of a task. Read more...
3. Click OK.
   
   By default JDeveloper displays the new bounded task flow in the diagrammer.
   
   
Only a bounded task flow that specifies the  element in its metadata can be used to define a train task flow. Read more...
4. In the Component Palette, ADF Task Flow page, Components panel, drag and drop  View on the diagrammer, then rename the activity. Do this four times, using the following activity names:
   
   start
addresses
payment
review
   
The red error icons on the diagram indicate that the view activities are not yet associated with any physical page files. Read more...
5. Drag and drop  Task Flow Return on the diagram. Accept the default name oftaskFlowReturn1.
6. In the Component Palette, click  Control Flow Case. On the diagram, click the review icon, then click the taskFlowReturn1 icon. Rename the control flow case element to commit.
   
Like any bounded task flow diagram, you use a task flow return activity to indicate an exit point for the train flow and return control back to the caller. Read more...
7. In the Structure window, expand view - start. Right-click train-stop and choose Insert Inside train-stop > Display Name.
   
   
8. In the Property Inspector, enter Start in the Display Name field.
   
   
9. Repeat the procedure in steps 7 and 8 to add train stop display names to the remaining three view activities, using the following Display Name values:
   
   Addresses
Payment
Review
10. In the Application Navigator, right-click the ViewController project and choose New > Web Tier > JSF/Facelets > ADF Task Flow, then click OK.
11. In the Create ADF Task Flow dialog, enter or select the following values, then click OK.

    Field or Option	Value
    File Name	childtrain-flow.xml
    Create as Bounded Task Flow	selected
    Create with Page Fragments	selected
    Create Train	selected

    
    
The  element is automatically added for you by JDeveloper when you check theCreate Train box in the Create Task Flow dialog. Read more...
12. In the Component Palette, drag and drop  View on the diagrammer, then rename the activity tobilling. Repeat the procedure to add one more view activity, using the name shipping.
    
    
13. Drag and drop  Task Flow Return on the diagram. Change the name to childFlowReturn1.
14. Draw a  Control Flow Case from shipping to childFlowReturn1. Rename the case element todone.
    
    
15. In the Structure window, expand view - billing. Right-click train-stop and choose Insert Inside train-stop > Display Name. In the Property Inspector, enter Billing in the Display Name field.
16. Repeat the procedure in step 15 to add a display name to the remaining view activity, using theDisplay Name value Shipping.
17. Click  Save All to save your work.
When you complete the steps for creating two bounded task flows as trains, the ViewControllerproject in the Application Navigator should look something like this, Read more...

Step 3: Add a Task Flow Call to a Train

1. In the editor window, click the train-flow.xml document tab to bring the diagram forward. (If not already open, double-click train-flow.xml in the Application Navigator to open the diagram.)
2. In the Application Navigator, under Page Flows in the ViewController project, drag childtrain-flowto the diagram and then drop it beneath the addresses icon.
   
A bounded task flow containing a train can use a task flow call activity to invoke a child bounded task flow representing another train. Read more...
3. On the diagram, right-click the review icon and choose Train > Move Backward.
   
A task flow call activity acts like a train stop, executing the default activity in the called task flow first. By default all train stops, including task flow calls acting as train stops, behave as sequential. Read more...
4. Then right-click the payment icon and choose Train > Move Backward.
   
   The diagram should now look like this:
   
   
5. In the Component Palette, click  Control Flow Case. On the diagram, click the childtrain-flowicon, then click the payment icon. Accept the default element name of childFlowReturn1.
   
When you call childtrain-flow in the parent train-flow, you have to manually wire a control flow case to return from the child train. Read more...
6. On the diagram, select the payment icon. In the Property Inspector, Train Stop section, enter falsein the Sequential field.
By default all train stops behave as sequential. In the Property Inspector, you can set theSequential option on the view activity for a train stop to specify whether it has sequential or nonsequential behavior. Read more...
7. In the Structure window, expand task-flow-call - childtrain-flow. Right-click train-stop and chooseInsert Inside train-stop > Display Name.
   
   
8. In the Property Inspector, enter Child train in the Display Name field.
9. Click  Save All to save your work.
In the Structure window of train-flow.xml, the task-flow-call - childtrain-flow element should look like this when all its nodes are expanded: Read more...

Step 4: Create an ADF Page Template

1. In the Application Navigator, right-click the ViewController project and choose New > Web Tier > JSF/Facelets > ADF Page Template, then click OK.
   
If following along with the example, at this point there are no page fragments in the Application Navigator. Read more...
2. In the Create ADF Page Template dialog, enter traintemplate.jsf in the File Name field.
3. Confirm that Facelets is selected as the document type, and Use a Quick Start Layout is not selected.
4. With the Facet Definitions tab in front, click  to add a facet. Enter body in the Name field, then click OK.
   
A page template is a template definition file written in XML. Read more...
5. At the top of the editor window, click the document tab traintemplate.jsf to make sure the visual editor is in focus.
   
   
6. In the Component Palette, ADF Faces page, Layout panel, drag  Decorative Box and drop it on the blank page in the visual editor.
   
   When you drag the component to the visual editor, you should see a target rectangle with the namePage Template Def on the page; this means the component you are dragging will be inserted inside that target.
   
   
7. In the Component Palette, Layout panel, Core Structure section, drag  Facet and drop it into thecenter facet of the decorative box you just added.
8. Choose body from the Facet Name dropdown list, then click OK.
   
   
   
   The body facet, defined in the page template definition, allows page authors to add their own content when they create their pages or page fragments using the page template.
9. Click  Save All to save your work.
   
   The visual editor should look similar to this:
   
   
This is just an example; it is entirely up to you how you want to arrange your template page layout. Read more...

Step 5: Add and Bind a Train Component

1. In the editor window, click the traintemplate.jsf document tab to make sure the template page is in focus. If necessary, click the Design tab at the bottom to use the visual editor.
2. In the Component Palette, ADF Faces page, General Controls panel, Location section, drag Train and drop it into the top facet of the decorative box component.
   
When a task flow consists of a set of pages that end users must visit in a particular order, use the ADF Faces Train component to display a progression of the related activities that guides end users to the completion of the task. Read more...
3. In the Property Inspector of the train component, Common section, choose Expression Builder from the dropdown menu next to the Value field.
   
The ADF Faces Train component enables end users to navigate through the train stops in an order specified in the underlying train model. Read more...
4. Expand ADF Controller Objects | controllerContext | currentViewPort | taskFlowContext. Then select trainModel and click OK.
   
   
5. Click  Save All to save your work.
   
   The visual editor should look similar to this:
   
   
This is just an example; it is entirely up to you how you want to arrange your page layout, and where you want to place the Train component. Read more...

Step 6: Create the Page Fragments for the Views

1. In the editor window, click the train-flow.xml document tab to bring the diagram forward.
If following along with the example, at this point there are no page fragments in the Application Navigator. Read more...
2. On the diagram, double-click a view icon (for example, start) to open the Create ADF Page Fragment dialog.
3. Accept the default file name (for example, start.jsff) and make sure Facelets is the selected document type.
4. On the Page Layout page, select Page Template and then select traintemplate from the dropdown list.
   
   
5. Click Managed Bean and then select Do not Automatically Expose UI Components in a Managed Bean.
In the Create ADF Page Fragment dialog, you can optionally specify whether or not components on the page are exposed in a managed bean, to allow programmatic manipulation of the UI components. Read more...
6. Click OK.
   
   JDeveloper displays the page fragment in the visual editor. The Train component from the page template should be visible on the page.
   
   
7. In the visual editor, add contents to the page by inserting ADF Faces components into the body facet. To follow along with the example, in the Component Palette, ADF Faces page, Layout panel,Interactive Containers and Headers section, drag  Panel Header and drop it into the body facet on the page. Then insert an output text component into the panel header component.
   
After creating a page fragment based on the template, you can add contents specific to the page you are creating by inserting appropriate ADF Faces components into the body facet. Read more...
8. Repeat steps 1 through 7 for each remaining view icon on the train-flow diagram.
After creating all the pages from the train-flow diagram, Read more...
9. In the editor window, click the childtrain-flow.xml tab to bring the diagram forward.
10. Repeat steps 2 through 7 for both view icons on the childtrain-flow diagram to create the page fragments.
11. In the editor window, click the billing.jsff tab to bring the page forward.
12. In the Component Palette, ADF Faces page, General Controls panel, Location section, drag Train Button Bar and drop it into the menuBar facet of the panel header component on the page.
    
    If following along with the example, you would have added the panel header component as described in step 7.
    
    
13. Accept the EL expression of #{controllerContext.currentViewPort.taskFlowContext.trainModel} and click OK.
    
The Train Button Bar component is bound to the same train model as the Train component on the template. Read more...
14. In the editor window, click the shipping.jsff tab to bring the page forward.
15. In the Component Palette, Layout panel, drag  Panel Group Layout and drop it into the menuBarfacet of the panel header component.
16. In the Property Inspector, Common section, select horizontal from the Layout dropdown list.
17. In the Component Palette, General Controls panel, Location section, drag  Train Button Bar and drop it into af:panelGroupLayout - horizontal in the Structure window.
    
    
18. Accept the EL expression of #{controllerContext.currentViewPort.taskFlowContext.trainModel} and click OK.
19. In the Component Palette, General Controls panel, drag  Button and drop it intoaf:panelGroupLayout - horizontal in the Structure window.
20. In the Property Inspector of the button component, Common section, enter Return to parent flow in the Text field. Then select done from the Action dropdown list.
    
At runtime, after users navigate into the child train flow pages, they need a way to navigate back to a parent train page. Read more...
21. Click  Save All to save your work.
    
    The buttons on the shipping.jsff page, which includes a Train Button Bar component with itsBack and Next buttons, should look similar to this:
    
The af:panelGroupLayout component in the Structure window of shipping.jsff should look like this: Read more...

Step 7: Invoke a Train Task Flow from a Region

1. In the Application Navigator, ViewController project, double-click adfc-config under Page Flows to open the default page flow diagram.
   
By default JDeveloper creates an empty unbounded task flow (source file adfc-config.xml) when you create a Fusion web application using the Fusion Web Application template. Read more...
2. In the Component Palette, ADF Task Flow page, Components panel, click  View then click on the diagram to add a page icon. Change the default page name to main.
   
   
3. On the diagram, double-click the page icon you just added to open the Create JSF Page dialog.
4. Select Facelets as the document type and accept the default file name of main.jsf.
   
   
5. On the Page Layout page, select Quick Start Layout, then click Browse.
6. In the Component Gallery, select the Two Column category on the left. Then on the right, select the fourth type and the fifth layout.
   
   
   
   You should see Two Column Left, Header (Stretched) under Options on the right.
   
ADF Faces provides a number of components that you can use to define the overall layout of a page. Read more...
7. Select Apply Themes, then click OK.
   
   The Create JSF Page dialog should now display the quick start layout selection you made:
   
   
8. Click Managed Bean and select Do Not Automatically Expose UI Components in a Managed Bean. Then click OK.
   
   JDeveloper displays the page in the visual editor.
   
When you use a quick start layout option, JDeveloper adds the components necessary to display the layout. Read more...
9. If you wish, you may go directly to step 14 to insert the train flow as a region, then run the page. Otherwise you may continue with the optional layout steps 10 through 13.
10. In the Component Palette, ADF Faces page, Layout panel, Interactive Containers and Headerssection, drag  Panel Accordion and drop it on the start facet in the visual editor. In the Property Inspector, Common section, change DiscloseMany to true.
11. In the Structure window, expand af:panelAccordion. Select the child af:showDetailItem.
    
    
12. In the Property Inspector, Common section, change the Text value to Browse.
13. In the Structure window, right-click af:panelAccordion and choose Insert Inside af:panelAccordion > Show Detail Item to add a second pane. In the Property Inspector, Common section, change theText value to Search.
14. From the Application Navigator, drag the train-flow node under Page Flows and drop it on the centerfacet in the visual editor. From the Create context menu, choose Region.
    
An ADF region is a UI component whose content is based on a bounded task flow. To use a task flow as an ADF region within a page, the task flow must be a bounded task flow that contains at least one view activity or one task flow call activity to the page where you want to render the ADF region. Read more...
15. In the editor window, click the adfc-config.xml tab to bring the diagram forward. Right-click the mainpage icon and choose Run.
    
    If the Create Default Domain dialog displays, enter the default password, for example weblogic1, in the Password and Confirm Password fields, then click OK.
    
    When the application is run and the page is first rendered at runtime, the region's content on the page is that of the first view activity on the train-flow diagram:
    
By default, JDeveloper automatically configures an integrated server named Integrated WebLogic Server that references a user-specific instance of Oracle WebLogic Server bundled with the IDE.Read more...
16. Click the second train stop Addresses to navigate to the next page in the train flow.
    
    While difficult to notice in this simple example, note that navigation to the Addresses view occurs within a region on the page. The content of the region is updated using partial page rendering (PPR).
    
The current stop in the train is indicated by the bold stop icon and display name. Read more...
17. Click the Payment train stop to jump ahead to the third stop without entering the child train flow.
    
    This is possible because you set the third stop as nonsequential.
18. On the Payment page, click Addresses again, then click the Child train stop to enter the child train flow.
    
    You should see the first page of the child train flow. A child train flow has an icon representation of the parent train before and after the child train stops.
    
    
19. Use the Back and Next buttons or the train stops to navigate forward and backward within the child train flow.
20. On the Shipping page, click the button to return to the parent train flow.
    
When you exit the child train flow, you should be returned to the Payment page in the parent train. Read more...

Summary

In this tutorial you created a user interface for navigating end users through a multistep process. You learned how to:

• Use JDeveloper wizards and dialogs to create applications, task flows, page templates, and starter pages
• Define bounded task flows as trains and draw train flows
• Invoke another train using a task flow call activity
• Use task flow return activities to return control flow back to the caller
• Use control flow rules to handle control flow when the called train flow completes execution
• Bind an ADF Train component to a train model
• Add an ADF Region to a page
• Use Integrated WebLogic Server to run a Fusion web application
• http://download.oracle.com/docs/cd/E18941_01/tutorials/jdtut_11r2_44/jdtut_11r2_44.html