Explanation: To switch contents displayed in the region dynamically, while dropping task flow onto the page, we select the Dynamic Region for holding the task flow. The af:region components generated in the JSF page remain the same for both the static and dynamic regions. However, when we choose a dynamic region as a container for task flows, the taskFlowId referenced by the corresponding task flow binding will be pointing to an EL expression that evaluates to the task flow ID at runtime.
When you drop a bounded task flow onto a JSF page to create an ADF dynamic region, JDeveloper adds an af:region tag to the page. The af:region tag contains a reference to a task flow binding. The sample of the metadata that JDeveloper adds to the JSF page is shown below:
Requirement: I have a dynamicRegionDemo.jspx page. On that page I will have two sections:
1. left section where we will have three af:button named as Show view1.jsff, Show view2.jsff, and Show view3.jsff.
2. right section which will have display the dynamicRegion based on the af:button clicked.
Solution: For solution to the above requirement follow the steps as shown below
Step 1: Create an Oracle ADF Fusion Web.Name the application as dynamicRegionDemo.
Step 2: Create three bounded task flows: btf1, btf2, and btf3.
Open btf1 and drag and drop view activity form the component palette on the btf1. Name the view activity as view1. Double click on the view1 view activity to create the view1.jsff. Inside view1.jsff drag and drop af:outputText and set the value as value=”view1.jsff”.
Open btf2 and drag and drop view activity form the component palette on the btf2. Name the view activity as view2. Double click on the view2 view activity to create the view2.jsff. Inside view2.jsff drag and drop af:outputText and set the value as value=”view2.jsff”.
Open btf3 and drag and drop view activity form the component palette on the btf3. Name the view activity as view3. Double click on the view3view activity to create the view3.jsff. Inside view3.jsff drag and drop af:outputText and set the value as value=”view3.jsff”.
Step 3: Create dynamicRegionDemo.jspx page. Drag and drop af:panelSplitter. Set splitterPosition=”100″. The af:panelSplitter will have two f:facet named as first and second.
Inside the first facet drag and drop af:panelGroupLayout and set layout=”vertical“. Drag and drop three af:button inside af:panelGroupLayout and named the af:button as “Show view1.jsff”, “Show view2.jsff”, and “Show view3.jsff”.
Step 4: Create MyBean.java class having pageFlowScope. In MyBean.java class create private String currentTaskFlow = “btf1”; and also generate the accessors of currentTaskFlow as shown below:
Step 5: Inside the first button that is drag and drop af:setPropertyListener. When we drag and drop af:setPropertyListener from the component palette we will get the below popup:
Click on the icon beside To and we will get the below popup where we will set the expression as #{pageFlowScope.MyBean.currentTaskFlow}
Set From as btf1 and Type as action and Click OK.
Set the af:setPropertyListener for the other “Show view2.jsff” af:button as to= “#{pageFlowScope.MyBean.currentTaskFlow}” from=“btf2“ and type=“action“.
Also set the af:setPropertyListener for the other “Show view3.jsff” af:button as to=”#{pageFlowScope.MyBean.currentTaskFlow}” from=”btf3″ and type=”action”
Step 6: Drag and drop btf1.xml inside the second facet as a Dynamic Region as shown below:
When we click on Dynamic Region we will get the below popoup where we will select Managed Bean as MyBean and Click on OK.
Then we will get the below popup where we will simply click OK
Thus, the corresponding code gets created in MyBean.java. By default String taskFlowId and its accessors get created. Now we will change the name of the String taskFlowId to view1TaskFlowId. This is just for simplification purposes. Also, we will make the changes for the accessors as well as shown below:
Now we will go to the getDynamicTaskFlowId method and modify the code as shown below:
Similarly, drag and drop the other two bounded task flows that is btf2.xml and btf3.xml as a Dynamic Region as shown below. We can see that it is a throwing error. The reason is we should have only one Dynamic Region, not three.
So I will comment two of the dynamic regions: that is dynamicRegion2 and dynamicRegion3 will be commented as shown below:
Now change the String taskFlowId1 and String taskFlowId and its accessors also.
Step 7: Thus the complete MyBean.java code is shown below:
package com.susanto;
import java.io.Serializable;
import oracle.adf.controller.TaskFlowId;
public class MyBean implements Serializable {
private String currentTaskFlow = "btf1";
private String view1TaskFlowId = "";
private String view2TaskFlowId = "";
private String view3TaskFlowId = "";
public MyBean() {
}
public TaskFlowId getDynamicTaskFlowId() {
if (this.getCurrentTaskFlow().equalsIgnoreCase("btf1")) {
return TaskFlowId.parse(view1TaskFlowId);
} else if (this.getCurrentTaskFlow().equalsIgnoreCase("btf2")) {
return TaskFlowId.parse(view2TaskFlowId);
} else if (this.getCurrentTaskFlow().equalsIgnoreCase("btf3")) {
return TaskFlowId.parse(view3TaskFlowId);
} else
return TaskFlowId.parse(view1TaskFlowId);
}
public void setDynamicTaskFlowId(String taskFlowId) {
this.view1TaskFlowId = taskFlowId;
}
public void setCurrentTaskFlow(String currentTaskFlow) {
this.currentTaskFlow = currentTaskFlow;
}
public String getCurrentTaskFlow() {
return currentTaskFlow;
}
public TaskFlowId getDynamicTaskFlowId1() {
return TaskFlowId.parse(view2TaskFlowId);
}
public void setDynamicTaskFlowId1(String taskFlowId) {
this.view2TaskFlowId = taskFlowId;
}
public TaskFlowId getDynamicTaskFlowId2() {
return TaskFlowId.parse(view3TaskFlowId);
}
public void setDynamicTaskFlowId2(String taskFlowId) {
this.view3TaskFlowId = taskFlowId;
}
}
Step 8: Thus the complete dynamicRegion.jspx code is shown below:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
xmlns:af="">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document title="dynamicRegionDemo.jspx" id="d1">
<af:form id="f1">
<af:panelSplitter id="ps1" splitterPosition="100">
<f:facet name="first">
<af:panelGroupLayout id="pgl1" layout="vertical">
<af:button text="Show view1.jsff" id="b1">
<af:setPropertyListener to="#{pageFlowScope.MyBean.currentTaskFlow}" from="btf1"
type="action"/>
</af:button>
<af:button text="Show view2.jsff" id="b2">
<af:setPropertyListener to="#{pageFlowScope.MyBean.currentTaskFlow}" from="btf2"
type="action"/>
</af:button>
<af:button text="Show view3.jsff" id="b3">
<af:setPropertyListener to="#{pageFlowScope.MyBean.currentTaskFlow}" from="btf3"
type="action"/>
</af:button>
</af:panelGroupLayout>
</f:facet>
<f:facet name="second">
<!--<af:region value="#{bindings.dynamicRegion2.regionModel}" id="r2"/>-->
<!--<af:region value="#{bindings.dynamicRegion3.regionModel}" id="r3"/>-->
<af:region value="#{bindings.dynamicRegion1.regionModel}" id="r1"/>
</f:facet>
</af:panelSplitter>
</af:form>
</af:document>
</f:view>
</jsp:root>
Step 9: Save all and run the application. Thus the ran application is shown below:
Click on the Show view2.jsff button then view1.jsff gets changed to view2.jsff.
Click on the Show view3.jsff button then view2.jsff gets changed to view3.jsff.
Hence, the solution to our requirement.
If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.
Thanks & Regards,
Susanto Paul
798 total views, 2 views today