ADF Task Flow interaction with WebCenter Composer

When You use JDeveloper 11g and ADF you probably made some independent Task Flows. To use these Task Flows you must add them as regions in your JSPX page or in an UIShell template page. The second step is  to provide the right input parameters or use contextual Events so the Task Flows will display the right data. For events you need to publish events from the Task Flows and in the JSPX page you need to subscribe to these events and invoke a ADF Method Action in a other Task Flow.
With WebCenter Composer you can do this at runtime, and change this for example in production without to program any code. In this blog I will show you how you can achieve this.
I made two TF and the first will have an input parameter and this value will be displayed in a view. This TF will also publish a simple event with a string payload and a complex event with a Map payload. The Second TF has two ADF Method Actions which can be used for the simple and complex event.
In the customizable WebCenter page you can add these Task Flows from the catalog, provide the input parameter for the First TF and intercepts the events and invoke the Method Actions of the Second TF.
Here is a screenshot of the final Webcenter page.

First step, Making the ADF Task Flow Fragments with input parameter and contextual events
Create Fusion Web Application and add the first ADF Task Flow. This must be a bounded TF with Page Fragments.

Add an input parameter to this TF.

Add a view and create the page fragment. In the view you will display the input parameter.

For the contextual Events you can use this Java Class and you need to generate a Data Control on this java class so you can use this in ADF.

package nl.whitehorses.webcenter.taskflows.view;

import java.util.HashMap;
import java.util.Map;

public class Events {
    public Events() {
        super();
    }

    public String fireEvents(String parameter) {
        System.out.println("fire event with parameter: " + parameter);
        return parameter;
    }

    public Map<String, Object> fireComplexEvent() {
        System.out.println("fire complex event ");
        Map<String, Object> eventData = new HashMap<String, Object>();
        eventData.put("text1", "hello");
        eventData.put("text2", "hello2");
        return eventData;
    }


    public String captureEvents(String parameter) {
        System.out.println("capture event with parameter: " + parameter);
        return parameter;
    }

    public String captureComplexEvents(Object parameter) {
        System.out.println("capture complex event");
        Map<String, Object> eventData = (Map<String, Object>)parameter;
        return (String)eventData.get("text1") + " / " +
            (String)eventData.get("text2");
    }

}

Generate a Data Control.

Open the Data Controls window so you can drag the methods on the page.

First drag the parameter of the fireEvents method on the page as an inputtext component, after this drag the fireEvents method on the page (a Button ). Do the same with the fireComplexEvent method ( Only a button, no parameters. ) JDeveloper will also add the Method Actions of the Data Control to the page definition.

Select the first button and go to the property window, to add a new Event on this button.

Do the same for the other button. JDeveloper will add an event to the Method actions in the page definitions.

Create the second bounded Task Flow with page fragment, add a view and create the page fragment. In this fragment you need to drag the return values of the captureEvents and captureComplexEvents methods. No need to provide the input parameters. The event handler will do this for you.

This is the layout of the Second TF.

Last step in this project to make an ADF Library Deployment.

And deploy the ADF library to a jar.

Second Step, The WebCenter Project
For this step you need to have the WebCenter plugin ( Add this from the JDeveloper Update ).
Create a WebCenter project

Create an JSPX page where you will add the customizable page, panel and link component.

The customizable webcenter components are located in the Oracle Composer section.

The page looks like this.

The last step before you can run this WebCenter application is to add the Task Flows to the Composer Catalog so you can use this at Runtime.

Add an File Location in your Resource Pallette to your ADF library folder.

Select the first TF and use the right button to generate a catalog reference.

Open the default-catalog.xml in the mds folder located at the application home folder.

Add the catalog reference to this file and do the same for the second TF.

Add the ADF library to the WebCenter project.

Third Step, configure the WebCenter page.
Run the WebCenter application and press the edit button. This will open the design view.

Select the Task Flows from the catalog and add them to the page.

It will look like this and press the small edit button of the first TF.

Add an value to the input parameter

Close the dialog and press the edit button of the Second TF. Here you select the events of the First TF and select the Method actions of the Second TF. Go to the Events Tab and select the simpleEvent and the captureEvents Action. Enable this and use ${payLoad} as parameter value.

 

Do the same for the complex event and leave the Edit mode. You will see this as result.

That's all.

Here you can download the two applications.