Tuesday, 26 January 2016

Working with af:region in Oracle ADF

Explanation: Bounded task flows built with page fragments are displayed by using an ADF region (af:region) component.

The ADF region is the place holder component that allows the dynamic contents to be included in the parent page. When we run a page with a region, the region component peeks into the underlying oracle.adf.view.rich.model.RegionModel for identifying the view to be displayed and instantiates the view. In general, ADF uses the af:region tag to display bounded task flows built with page fragments.

ADF allows us to embed a region in a page or page fragments. We should note that regions are capable of triggering the navigation of contents in its own display area (view port) without affecting the other regions or parent page. This is the reason why we are able to navigate between pages in bounded task flow added inside the region, keeping the parent view from being affected.

To build an ADF region containing task flow, perform the following steps:
  1. Drag and drop the bounded task flow onto the page. 
  2. In the context-menu select Region. If the task flow that we dropped takes parameters, IDE will display the Edit Task Flow Binding dialog window for specifying the parameter values.
  3. Click on OK to save the changes.

An single JSF page can contain many task flows added as regions and each region may contain different content as shown below:

Requirement: I have a regionDemo.jspx page. On that page I will have three sections displaying Departments, Locations, and Countries informations.

Solution: For demonstration of the above requirement we will use the Departments, Locations, and Countries tables of the HR schema of the Oracle Database.

For solution to the above requirement follow the steps as shown below:

Step 1: Create an Oracle ADF Fusion Web.Name the application as regionDemo.

Step 2: Create an Oracle ADF Business Components from Tables. We will be creating all the three ADF Business Components that is entity objects, view objects and application module for all the three tables: Departments, Locations, and Countries tables

Thus the created ADF Business Components are shown below:
Step 3: Open ViewController project and create three Bounded Task Flows and name it as: countriesBTF, departmentsBTF, and locationsBTF.
Step 4: Open countriesBTF and drag and drop view activity form the component palette on the countriesBTF. Name the view activity as countries. Double click on the countries view activity to create the countries.jsff. Now go to Data Controls à Expand AppModuleDataControl à Select CountriesVO1 à Drag and drop CountriesVO1 on the countries.jsff as an ADF Table.

Open departmentsBTF and drag and drop view activity form the component palette on the departmentsBTF. Name the view activity as departments. Double click on the departments view activity to create the departments.jsff. Now go to Data Controls à Expand AppModuleDataControl à Select DepartmentsVO1 à Drag and drop DepartmentsVO1 on the departments.jsff as an ADF Table.

Open locationsBTF and drag and drop view activity form the component palette on the locationsBTF. Name the view activity as locations. Double click on the locations view activity to create the locations.jsff. Now go to Data Controls à Expand AppModuleDataControl à Select LocationsVO1à Drag and drop LocationsVO1on the locations.jsff as an ADF Table.
Step 5: Create regionDemo.jspx page. Drag and drop af:panelGridLayout inside the regionDemo.jspx. The af:panelGridLayout will have three columns and one row as shown below:
Step 6: Drag and drop three af:panelStretchLayout inside each of the af:gridCell and set the dimensionsFrom="parent".  Each of the af:panelStretchLayout should have two f:facet that is         f:facet name="center" and f:facet name="top".

Also change the width of the first af:gridCell as width="24%" and chnage the width of the third af:gridCell as width="43%".

Drag and drop three af:outputText inside each f:facet name="top" and set the values as Countries Table, Departments Table and Locations Table. Also set the font-size:large;

Drag and drop countriesBTF, departmentsBTF, and locationsBTF inside each of the f:facet name="center" as a ADF region (af:region).
Step 7: Save all and run the application. Thus the ran application is shown below:
ADF Task flow is powerful feature of Oracle ADF which provides a great usability and provides a modular approach defining control flow in the application and Page fragments gave us re-usability.

Hence, the solution to our requirement.


Thanks & Regards,

Susanto Paul