maandag 21 februari 2011

How to trigger an action on double click of an ADF table row

Technology: ADF11g
Developed in: JDeveloper
Browsers tested: Firefox 3.6.13 and Internet explorer 7 (7.0.6002.18005)
Used database schema: HR
Used tables: EMPLOYEES


In this blog a solution is provided to execute custom code and / or navigation when a user double clicks on a row of an ADF table.

In this example only navigation is executed. A form page is opened for the selected employee in the table.

Overview from page flow:

Model layer

Create an Employee entity object based on the EMPLOYEES table of the HR schema. No customizations are needed for this example.

Create an EmployeesView view object based on the Employee entity. No customizations are mode to this view object.

Create an application module HrAppModule which exposes the EmployeesView.

Task flow

A bounded task flow is created for this example:

The next properties are set:
Property Value
usePageFragments false

Share data controls with calling task flow true

The application also contains an unbounded task flow:

This task flow only starts the bounded task flow and it contains a managed bean:

Managed bean property Value
Name hrBean
Scope Request

This bean class is used in this example to handle the navigation.

EmployeesTable page

The table page is created by drag and drop from the Data Controls. The table is dropped as ADF Read-only table with Row Selection and Sorting checked, all columns are displayed.

The Row Selection property must be checked, this causes the following properties to be set in the table:
Property Value
selectedRowKeys #{bindings.EmployeesView.collectionModel.selectedRow}
selectionListener #{bindings.EmployeesView.collectionModel.makeCurrent}
rowSelection single

Although in the JSPX page the selectedRowKeys and selectionListener statements contains warnings that the references methods cannot be found they can be found runtime.

Underneath the table a Cancel button (af:commandButton) is added which ends the task flow.

af:commandButton property Value
text Cancel
id cancel
action cancel
immediate true

Handle double click

To handle a double click event we need:
  • A listener for double click on the table
  • Javascript method that listens to the double click and sends it to the server
  • Java bean method to execute custom logic or navigation

A listener for double click on the table

The listener is added in the af:table tag (just before </af:table>). A client listener is added which triggers the javascript method and a server listener is added which is triggered from the javascript method and triggers the java bean method.

The af:clientListener contains:
af:clientListener property Value Meaning
type dblClick Executed when a row is double clicked
method handleTableDoubleClick Execute the javascipt method with this name

The af: serverListener contains:

af:serverListener property Value Meaning
type TableDoubleClickEvent The name of the event triggered by the javascript method
method #{} Execute the java bean method select in the HrBean class

Javascript method that listens to the double click and sends it to the server

First a javascript file must be added to the page so it can be found runtime.

Our javascript file is called hr and it’s located in a javaScript folder under public_html.

When you’re not using a page template then the java script reference can be added to the page immediate after the <af:form> tag. When you do use a page reference add the java script reference immediate after the <> tag.

<af:resource type="javascript" source="/javaScript/hr.js"/>

The handleTableDoubleClick method:

function handleTableDoubleClick(event){
var table = event.getSource();
AdfCustomEvent.queue(table, "TableDoubleClickEvent",{}, true);

When the method is called an AdfCustomEvent is triggered for the table that started the clientListener method with name TableDoubleClickEvent (this must equal the type of the serverListener!) the last property ‘true’ is the immediate clause, so whether validations should be executed (false) or not (true).

Java bean method to execute custom logic or navigation

The HrBean class contains a method select which is triggered by the serverListener. In this method navigation is added to the EmployeeForm. This is done by executing the handleNavigation method of the NavigationHandler class, the last parameter of this method should equal the control-flow-case from outcome parameter as defined in the employees-task-flow.

public void select(ClientEvent clientEvent) {
NavigationHandler nh = FacesContext.getCurrentInstance().getApplication().getNavigationHandler();
nh.handleNavigation(FacesContext.getCurrentInstance(), "", "edit");

Class Import
NavigationHandler javax.faces.application.NavigationHandler
FacesContext javax.faces.context.FacesContext

EmployeeForm page

The form page is created by drag and drop from the Data Controls. The form is dropped as ADF Form all attributes are displayed.

To navigate back from the form to the table a rollback button (af:commandButton) is added by drag and drop the Rollback operation from the datacontrol palette as a button.

The submit button is created in the same way but then from the Commit operation.