Friday, November 5, 2010

ADF UI - Region Interaction: Between two peer region task flows present in a single parent page

Generally, if we want to refresh a field or part of the page, we use ppr (partial page rendering) in ADF. We just specify the id of the component (whose state change should trigger refresh) for the partialTriggers property of the required component to be refreshed. It's that simple. But, when we use task flows as regions in our pages, many times we need to establish communication between the parent page containing the region and the region itself. Similarly if there are two regions in the same jsff and some times we need to refresh one region based on some actin done on another region. Here, in this post I'm going to explain this case.

Sample UseCase:
For example, we have two task flows- one task flow displays the departments in a table and the second task flow shows the employees present in department for which the Deptno is passed as a task flow parameter. Now, the requirement is that based on the department selected in the first region, the second region needs to be refreshed with the employees in that particular selected department provided these two regions are dropped in a single jsf page. Sample example application can be downloaded from here. Here, actually we're establishing a communication between the two regions present in the same jsf page.

Implementation Details:
Before going through the implmentation steps, lets have a quick review of task flow basics.

If you drop a task flow that takes some parameters as a region in a jsff page, the task flow binding will be added in the pagedef file. If you set refresh='ifNeeded' for the task flow binding, the task flow will be re-executed each time when the value for one of the passed parameters got changed. To be clear, here re-execution means the task-flow will re-execute from it's default activity in the task flow diagram.

In other words, if you drop task flow TF that takes parameters param1,param2 in a jsf page abc.jsff, and if you specify refresh='ifNeeded' for the task flow binding in pagdef, and if you give the values for param1 and param2 as #{pageFlowScope.param1} and #{pageFlowScope.param2}, the task flow will be re-executed if any of the pageflowScope param values changed to a different value.

Knowing the above point is very important to implement interaction between two regions.

Implementation Steps:
1. Make two task flows ready -
i. TaskFlow1 - This task flow displays departments table with a button 'Show Employees'.
ii. TaskFlow2 - This task flow takes a parameter deptId and based on the passed deptId, it'll query the employees in the dept and displays them in a table.

TaskFlow2 Diagram:

2. Create a java bean with the property deptId and generate accessors for it. Now, create data control for the bean.

Java bean containing the property 'deptId':
package com.demo.beans; public class SharedBean { private Integer deptId; public void setDeptId(Integer deptId) { this.deptId = deptId; } public Integer getDeptId() { return deptId; } }

3. Now, in the actionListener method for 'Show Employees' button in task flow1, just get the selected deptId and set to the shared bean data control property.

ActionListener method code:
public void buttonClicked(ActionEvent ae) { Row currentDeptRow = (Row)ADFUtil.evaluateEL("#{bindings.DeptVO.currentRow}"); ADFUtil.setEL("#{bindings.deptId.attributeValue}", currentDeptRow.getAttribute("Deptno")); }

4. Drop the two task flows in a single jsff page. It'll ask for the parameter for the TaskFlow2, give the same shared bean data control property 'deptId' as the parameter. Don't forget to set the 'refresh' property for the TaskFlow2 task flow binding to 'ifNeeded'.

Parent jsff page code containing these two regions:
<?xml version='1.0' encoding='windows-1252'?> <jsp:root xmlns:jsp="" version="2.1" xmlns:af="" xmlns:f=""> <af:panelGroupLayout id="pgl1"> <af:showDetailHeader text="Interaction between two peer regions" disclosed="true" id="sdh1"> <af:panelGroupLayout id="pgl3" layout="scroll"> <af:region value="#{bindings.TaskFlow11.regionModel}" id="r1"/> </af:panelGroupLayout> <af:spacer width="10" height="10" id="s1"/> <af:panelGroupLayout id="pgl4" layout="scroll"> <af:region value="#{bindings.TaskFlow21.regionModel}" id="r2"/> </af:panelGroupLayout> </af:showDetailHeader> </af:panelGroupLayout> </jsp:root>

Parent Jsff pagedef file:
<?xml version="1.0" encoding="UTF-8" ?> <pageDefinition xmlns="" version="" id="ParentPagePageDef" Package="com.demo.fragments"> <parameters/> <executables> <variableIterator id="variables"/> <taskFlow id="TaskFlow11" taskFlowId="/com/demo/taskflows/TaskFlow1.xml#TaskFlow1" activation="deferred" xmlns="" Refresh="ifNeeded"/> <taskFlow id="TaskFlow21" taskFlowId="/com/demo/taskflows/TaskFlow2.xml#TaskFlow2" activation="deferred" xmlns="" Refresh="ifNeeded"> <parameters> <parameter id="deptId" value="#{bindings.deptId.attributeValue}"/> </parameters> </taskFlow> <iterator Binds="root" RangeSize="25" DataControl="SharedBean" id="SharedBeanIterator"/> </executables> <bindings> <attributeValues IterBinding="SharedBeanIterator" id="deptId"> <AttrNames> <Item Value="deptId"/> </AttrNames> </attributeValues> </bindings> </pageDefinition>

That's it. Now, when the user selects a dept in TaskFlow1 region and clicks on 'Show Employees', the second task flow will be re-executed as the actionListener method changes value of the input parameter of the TaskFlow2. This triggers re-execution of TaskFlow2 and corresponding employees in selected dept in TaskFlow1 will be displayed in TaskFlow2.

So, here we're establishing communication by using shared bean data control property. Sample Screenshots below:


  1. thanks for the post but i want to understand
    why you made the value that passed to task flow like this
    why you didn't use

    and what is the difference between them

  2. here #{bindings.deptId.attributeValue} actually references the shared bean data control's property. You can see that in the page definition. Here, you cannot use pageFlowScope variables because, pageFlowScope variables persists only for the life span of a particular task flow. As we're trying to communicate with a different task flow which is not a child of the same, we're establishing a communication using shared bean data control property to set and get the deptNo value.

  3. HI, Thanks a lot for your post, it helped us immensely.
    I had a query, in case of multiple parameters to be passed from one taskflow to other, can we use data objects instead ?


Related Posts with Thumbnails