9 total views, 3 views today

ADF Dynamic Region – Example

As it name describes, ADF reloads the region component dynamically at run time. In this section, I have described the ADF Dynamic Region with an example. I have created three bounded task flow(Yellow, Green, and Blue). In one of my JSF page, I want to display these bounded task flow one at a time . In the following example, the red task flow is loaded by default on  the screen; if user clicks on the blue link then ADF reloads the blue task flow, similarly for red and yellow as shown in the below image.

Download the ADF Dynamic Region

 

073016_1422_ADFDynamicR1 ADF Dynamic Region – Example

ADF Dynamic Region – example

ADF Dynamic Region: Example

Let’s begin the ADF Dynamic Region example

1. Create an ADF Fusion web application: Click File, New, Gallery, ADF Fusion Application

2. Create a JSF page under ViewController: Right click on the view controller, Click New, Page, Input name index.jsf

3. Create three bounded task flow: Right click on te WEB-INF, Click New, File, and select ADF task flow. Name it as task-flow-red, task-flow-blue and task-flow-yellow as shown below

073016_1422_ADFDynamicR2 ADF Dynamic Region – Example

4. Open each bounded task flow (blue, red and yellow) and drop a view component

073016_1422_ADFDynamicR3 ADF Dynamic Region – Example

5. Create a jsff page from each view:

  • 073016_1422_ADFDynamicR4 ADF Dynamic Region – Example

6. Open the blue.jsff page and drop an output text component. Value it as Blue and instyleproperty as blue color

7. Open the red.jsff page and drop an output text component. Value it as Red and instyleproperty as red color

8. Open the yellow.jsff page and drop an output text component . Value it as Yellow and inlinestyle property as yellow color

9. Open the index.jsf file, drop a PanelSpliter component (Not a necessary component, just for make the page nice). On the second facet in the panel splitter, drop a bounded task-flow as a Dynamic Region

073016_1422_ADFDynamicR5 ADF Dynamic Region – Example

10. Drop a PanelGroupLayout inside the first facet. Inside the PanelGroupLayout, drop each bounded task flow and select Dynamic Region link

073016_1422_ADFDynamicR6 ADF Dynamic Region – Example

11. The final index.jsf file is like below

 

Test the ADF Dynamic Region

1. Deploy and run the index.jsf file. Click on the link Red; the Red task gets loaded on the page

073016_1422_ADFDynamicR7 ADF Dynamic Region – Example

2. Click the link Blue; The Blue task flow loaded on the screen

073016_1422_ADFDynamicR8 ADF Dynamic Region – Example

3. Click on the link Yellow; the yellow task flow gets loaded on the screen

073016_1422_ADFDynamicR9 ADF Dynamic Region – Example

govindan ADF Dynamic Region – Example
Connect me

Govind

Thank you for visiting my personal blog. Myself Govindan, Software Developer by profession since 2006 and hence I started this blog early in 2016 and ever since I've been writing about technologies experienced and learnings of everyday life.

The views expressed on this blog are my personal views and do not necessarily reflect the views of my employer.

Please feeling free to reach me on any comments and feedbacks you have. Would be more than glad to listen and reply 🙂
govindan ADF Dynamic Region – Example
Connect me
Like us on Facebook.
Connect!