ADF - Contextual Events Sample Application using Row Selection Listener

How we can use contextual events in the ADF Table Row Selection Listener.

About Contextual Events

Contextual events have two parts:

• A publisher (or producer), such as a button that raises a named event, with or without a custom payload
• A handler (or consumer) that listens for a specifically named event or a wildcard event, to process that event

Contextual events are very much useful when two different Application (ADF) are using or Webcenter inter portlet communication. When we are facing difficulty to pass parameters through TaskFlow or beans then contextual events are more useful.

We have two regions (TaskFlows), one with list of employees and second will display the employee details based on the user selection from employees list (we can wright this application without using contextual events also).
For this example i created a sample data model for Oracle HR database.
 

A simple UI application

If we use the ADF commandlink component tag have the feature to raise the contextual events directly.

Producer:
In this example i am going to override the rowselectionlistener and raise the contextual event.

To raise the event we need to create a custom event binding, this will raise the contextual event (Event Producer).

Make sure that we need to add Listener to raise the event(org.apache.myfaces.trinidad.event.SelectionListener) and Events and event with event name.

(Go to the Event binding in the structure window -> Right click-> inside the event bindings -> events.

 Then select the Events ->Right click -> event)

And we need to pass the payload value.

Consumer:

Fist we need to add our event handling method in page bindings.

In this example i added my Application module method directly, But we can create a java class and then convert that class in to data control and use those methods.

Then go to page bindings tab ->contextual events-> subscribers-> add

Provide the Event name and handler classe.
Note: we need to use same event name which we used int he Producer.

Ui screen shots.

Select the employee form the list it will raise the contractual event and employee view region will handle this event.

you can download the sample app.

DashBoard Example with PanelSpringBoard and PanelDrawer

In this example I am going to build Dashboard application with ADF 12c components such as panelSpringBoard, panelDrawer, panelGridLayout and Listviews.

This example is based on the oracle database HR Schema.

Create the model project and build the view objects based on the employees, departments and employee details tables. DashboardModel project should look like below.

Build the DashboardUi project and create the EmployeeDetails taskflow. In employee details we are going to implement the search in panelDrawer component and displaying the employee details in employee details page.

To implement panelDrawer, drag and drop the panelDrawer component from component palette and add showdetailItems inside panelDrawer Component. Add the content inside the showDetailItem component.

Note: The paneldrawer component position values,  “end” is language specific. So if you are from a country with right to left reading then the end actually means what start means in western countries. Use left / right for language independent orientation.

For displaying search results we are using listview and inside listview we are arranging the content nicely using the panelGridLayout component. PanelGridLayout distributes the space perfectly between the columns with percentage values.

Create the DashbaordApp test page to build the panelSpringBoard. Drag and drop the panelSpringBoard component from the component palette to the DashboardAppTestPage.jspx page and add the showDetailItems inside the panelSpringBoard component to display the springboard contents inside springboard.

Add the content regions inside showDetailItems. For demo purpose I have added five showDetailItems and added the EmployeeDetails regions and other Departments regions inside the showDetailItems.

Use the panelSpringBoard property displayMode=”Grid” to display the panelSpringBoard home screen with all show details Icons like below.

Click on EmployeeSearch and other Icons to preview the panelSpringBoard navigation cool look and feel.

You can download the sample App.