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

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

Summary

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
Class	nl.hr.demo.view.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	#{hrBean.select}	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 <jsp:directive.page> tag.

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

The handleTableDoubleClick method:

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

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
ClientEvent	oracle.adf.view.rich.render.ClientEvent
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.