Adding a taskflow to the WebCenter Composer catalog.

A cool feature from WebCenter is the fact you’re able to insert small applications (taskflows) in to your webcenter application at runtime. This can be done by exposing an adf taskflow project or application in the default catalog.xml,

First you need to create a webCenter webapplication in there you just create a jspx page. Put a pageCustomizable and a panelCustomizable into your jspx page. These elements are customisable when you put your application in edit mode at runtime. To do so you need to add changeModeLink.

The page could look like this:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:pe="http://xmlns.oracle.com/adf/pageeditor"
          xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1" title="demo">
      <af:form id="f1">
        <af:panelStretchLayout id="psl1">
          <f:facet name="center">
            <af:panelGroupLayout layout="scroll"
                                 xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                                 id="pgl1">
              <af:outputText value="Demo application for showing interaction with webcenter composer." id="ot1"/>
              <pe:changeModeLink id="cml1"/>
              <pe:pageCustomizable id="pageCustomizable1">
                <cust:panelCustomizable id="panelCustomizable1"
                                        layout="scroll"/>
                <f:facet name="editor">
                  <pe:pageEditorPanel id="pep1"/>
                </f:facet>
              </pe:pageCustomizable>
            </af:panelGroupLayout>
          </f:facet>
        </af:panelStretchLayout>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>

Now move on to the application (taskflow) we want to add to the demo page in runtime. For this I’ve just made a simple tasflow with a .jsff and a backing bean. The taskflow needs a name as an input parameter which will be displayed in two ways: 1. Directly from the scope and 2. Through the backing bean which just adds some text.

the taskflow definition looks like:

<?xml version="1.0" encoding="windows-1252" ?>
<adfc-config xmlns="http://xmlns.oracle.com/adf/controller" version="1.2">
  <task-flow-definition id="demo-task-flow">
    <default-activity id="__1">demoJsff</default-activity>
    <input-parameter-definition id="__5">
      <name id="__6">name</name>
      <value>#{pageFlowScope.name}</value>
      <class>java.lang.String</class>
    </input-parameter-definition>
    <managed-bean id="__2">
      <managed-bean-name id="__3">backing</managed-bean-name>
      <managed-bean-class>nl.yenlo.view.backing.DemoJsff</managed-bean-class>
      <managed-bean-scope id="__4">pageFlow</managed-bean-scope>
      <managed-property>
        <property-name>name</property-name>
        <property-class>java.lang.String</property-class>
        <value>#{pageFlowScope.name}</value>
      </managed-property>
    </managed-bean>
    <initializer id="__7">#{pageFlowScope.backing.init}</initializer>
    <view id="demoJsff">
      <page>/demoJsff.jsff</page>
    </view>
    <use-page-fragments/>
  </task-flow-definition>
</adfc-config>

For the backing bean and jsff I would like to refer to the source code of the taskflow application: yenloTaskFlowDemo

To be able to use this in our webcenter application we need to make a AdfLibrary deployment profile.

Now we can go back to our webcenter application to add the taskflow to our catalog.

First we need to add it to the project this can be done by making a file system connection to the deployment folder of the taskflow and just click add to project:

You’ll see the taskflow will be added in your Webcenter service catalog and added as a reference to your project:

Now we can add the taskflow to our catalog.  This is very easy to do because you can right click the taskflow in the Webcenter service catalog and choose “show catalog reference”

Just copy and paste this statement into your default-catalog.xml.

<resource id="demo-task-flow"
          repository="application.classpath"
          path="adflibTaskflowDemo.jar/ADF_TaskFlow/WEB-INF+demo-task-flow.xml#demo-task-flow"/>

The only thing left to do is run the application.

Just click the edit link (bewerken in the screenshot because of my locale) and you’ll see the page in edit mode. Here you can choose to insert content (inhoud toevoegen).

The popup shows the catalog with items you can add. And behold there is our taskflow:

Just click add and close the popup.

Now we need to set the input parameter. Just click on the pencil besides the ‘x’ this will open the component properties dialogue. Here you can fill in the input parameter, name.

Just close the composer and the page is finished and looks something like this:

This was a very simple example how to use taskflow to insert them at runtime into a webcenter application. The source of the webcenter application can be found here: yenloWCDemo