Monday, November 22, 2010

An example of clickListener implementation for <dvt:barGraph>

In this post I'm sharing an interactive bar graph example built using <dvt:barGraph> and a clickListener for the graph component. The basic <dvt:barGraph> used in this example is built using the same approach as suggested by Frank in his ADF Code Corner sample #17. So, I'm not repeating those steps(for building graph using ViewObject) in this post.

Use Case

This example displays a bar graph of total salary for each department. Please see the following picture - Departments are plotted on X-axis and Salary on Y-axis


When user clicks on a 'Bar', he/she is presented with popup window to edit the data used for building the Bar. On closing the popup, graph gets refreshed to reflect the modified data


A glance at the implementation


The <dvt:barGraph> supports listener interface for receiving click events on the graph components. This example is built based on this concept. The clickListener gets triggered when user clicks on the bars of the graph, and the listener method implementation for this example in turn displays the 'edit popup' window with data used for building the bar. In a nutshell, the clickListener method used in this example does the following
1. Gets the group attribute(department name) using the ClickEvent payload
2. Fires a query using the department name and populates the VO
3. Displays the data from step 2 in an edit popup window

I'm copying the relevant code snippet below for your reference.

<dvt:barGraph id="barGraph1"
value="#{bindings.DepartmentsView1.graphModel}"
subType="BAR_VERT_CLUST"
clickListener="#{TestBean.clickAction}" ...

/**
* Method to handle ClickEvent on the Graph. This method does the following
*  1. Gets the group attribute
*  2. Fire a query using the group attribute param and populates the VO 
*  3. Displays the data from step 2 in an edit popup window
* @param clickEvent
*/
public void clickAction(ClickEvent clickEvent) {
  ComponentHandle handle = clickEvent.getComponentHandle();
  String deptName = null;
  if (handle instanceof DataComponentHandle) {
    DataComponentHandle dhandle = (DataComponentHandle)handle;
    // Get the group attributes
    Attributes[] groupInfo = dhandle.getGroupAttributes();
    if (groupInfo != null) {
      for (Attributes attrs : groupInfo) {
        deptName =
          (String)attrs.getValue(Attributes.LABEL_VALUE);     
      }
    }
  }
  BindingContext bc = BindingContext.getCurrent();
  DCBindingContainer dcb =
    (DCBindingContainer)bc.getCurrentBindingsEntry();
  OperationBinding opb =
    dcb.getOperationBinding("executeDepartmentViewForName");
  opb.getParamsMap().put("deptName", deptName);
  opb.execute();
  showPopup(clickEvent);

}
Please note that this example has a dialogListener added for the above mentioned edit popup, which is responsible for re-executing the iterator and refreshing the graph component to reflect the changes done by the user.

You can download the sample workspace from here.
[Runs with Oracle JDeveloper 11g R1 PS2 + HR Schema]

5 comments:

Dinesh said...

Hi Jobinesh,

Can you please tell me whether dvt:graph work in Internet Explorer 9 when developed in jdeveloper 11.1.1.4

Thanks,
Dinesh

Anonymous said...

Hi Jobinesh,

Not entirely related to this post but...

Is it possible in ADF Faces DVT to drag the bar chart value up and down to increase/decrease its value?

I somehow need that functionality and I wanted to know if you are aware of this?

Thanks.

vinay.polisetti said...

Hi Jobinesh, Thanks for the post. Can you please also let us know the appropriate import statements.

Thanks

Jobinesh Purushothaman said...

You can find it in the sample attached in this post

Anonymous said...

I want diplay date dynamically in single BarGraph from multplie VO . how can we achiew this.

Regards,
Palanivel