Sunday, December 9, 2012

Dynamic region in ADF


Requirement : In the same region in UI different page has to be shown based on the link clicked.
Like Page has two links :
Employee Data
Department Data
- when user click on employee data , page with employee data opens up.
- when user click on Departmemnt data , page with department data opens up.


These two opens up in the same region.
ADF supports this with the help of dynamic region and bounded task flows.

Steps to achieve this :
1) Create two bounded task flows with fragments
Employee task flow  : Dynamic-employee-flow
Department task flow : dynamic-department-flow

I just use simple VO based on HR schema to achieve this.

2) Create one dashboard page like companydetails.jspx
- Split the page using panel splitter
- on the first half add two links one for employee details and other for department details.
- you can use images inside the links to give a visual look to the links

3) Drop any of the two task flow created on the second facet of panel splitter
- select dynamic region
- give name for the managed bean like : screenNameBB
- class name : hr.view.backing.screenSelectBean

This will be used to determine which task flow to display.
The bindings will be created like :
<taskFlow id="dynamicRegion1"
              taskFlowId="${backingBeanScope.screenNameBB.dynamicTaskFlowId}"
              activation="deferred"
              xmlns="http://xmlns.oracle.com/adf/controller/binding"/>

4) you will see that there is one method created in the bean class as :
public class screenSelectBean

public TaskFlowId getDynamicTaskFlowId()

This is a simple method that will be invoked at runtime to decide which task-flow to display.

5) We can achieve the dynamic navigation by setting up a managed property at session level on click of each link. For this I just created another managed bean(DisplayManager) which set the propert called displayUI based on click of link.

Like : private String displayUI="EMPLOYEE_DATA"; along with setters and getters. This is the property we will set on click of each link to decide which task flow to display.

6) The screenSelectBean is scoped at backing bean level and should refer this property.
So create a property in screenSelectBean  that can refer the class.
Code will look like :

      private DisplayManager _dispManager; - Reference to session propery for display
      String Employee_flow ="/WEB-INF/Dynamic-employee-flow.xml#Dynamic-employee-flow";
      String Dept_flow =    "/WEB-INF/dynamic-department-flow.xml#dynamic-department-flow";

     public TaskFlowId getDynamicTaskFlowId() {
     String toDisp = _dispManager.getDisplayUI();
     if (toDisp.equals("EMPLOYEE_DATA"))
         return TaskFlowId.parse(Employee_flow);
         else
         return TaskFlowId.parse(dept_flow);
     
      }

 You can have the values saved in Hashmap or Java enumeration to make the application more extensive.


7) Open adf-config , you will see that there is backing bean created with name : screenNameBB
Add another managed bean with scope as session for DisplayManager, Like :

 <managed-bean id="__7">
    <managed-bean-name id="__6">dispUI</managed-bean-name>
    <managed-bean-class id="__8">hr.view.DisplayManager</managed-bean-class>
    <managed-bean-scope id="__5">session</managed-bean-scope>
  </managed-bean>

Create property in screenNameBB to refer this bean for setting name of flow:like
  <managed-property id="__23">
      <property-name id="__25">dispManager</property-name>
      <property-class>hr.view.DisplayManager</property-class>
      <value id="__24">#{dispUI}</value>
    </managed-property>

The property name should match the setter in Bean . like bean should have setdispManager method defined.

8) One last step . Open the companydetails.jspx
Drop setPropertyListener on the link and set appropriate text to decide the correct task flow:

employee Link :

<af:setPropertyListener from="#{'EMPLOYEE_DATA'}" to="#{dispUI.displayUI}" type="action"/>

Department Link :
<af:setPropertyListener from="#{'DEPARTMENT_DATA'}" to="#{dispUI.displayUI}" type="action"/>


UI will look like this in Jdev :



When you run the UI you will see the links will open the different task flow at the same region Area.
We can further improve the performance by enabling partial submit for the link buttons.

Cheers !!

No comments:

Post a Comment