ADF DVT Speed Date: Meeting the Gantt Charts

0

Recently the ADF Special Interest Group at AMIS organized an ADF DVT Speed Date. During this speed date, six ADF specialists from our team presented their favorite Data Visualization Component from the DVT library.
In a series of blog posts we share the information with a broader audience. In this post you get introduced to Gantt Charts – which was my own date for this party.

ADF DVT Gantt Chart – Introduction

The probably most distinguishing feature of any Gantt Chart is the horizontal time axis. Gantt Charts are used to present data against time.

image

Gantt Charts were invented in the 1910s by Henry Gantt (hence the name) – although a Polish engineer probably beat him to it but forgot to blog about it (http://en.wikipedia.org/wiki/Gantt_chart). They were used initially for presenting Project Schedules – showing tasks with their start time and end time and their dependencies. The essence of many modern project management tools is in fact a Gantt Chart – frequently an interactive one.

image

ADF DVT provides this project- and task overview in a Gantt format. Two additional Gantt Charts are provided as well:

The first additional Gantt Chart also of course has the time axis. Against this axis, the Resource Utilization chart will present bar charts that visualize metrics per time frame for some resources that are listed top to bottom. It is up to us to determine what these resources are and what the metrics are that are presented for the resources. Examples can range from equipment utilization to weather reports per weather station or consultants’ hour registrations.

image

The second additional Gantt Chart in the DVT library is the Resource Schedule. Is is somewhat similar to the Project Schedule, but it is more generic and can be used in many different situations. It too has the horizontal time scale and it displays a list of resources top to bottom. Resources can be anything with which time based entries can be related – from Conference Rooms to Television Channels, from Kingdoms to Family Members.

image

Note that the Project and Resource Schedule Gantt have support for drag and drop – which means that they are not just read only representations of the data they visualize but they can be used to manipulate that data. Project and scheduling Gantt chart components can be enabled as drag sources as well as drop targets for ADF table or tree table components. A resource utilization Gantt chart component can be enabled only as a drop target.

Component Properties

The three Gantt Charts have a lot in common. They each support click listeners and popups as well as tooltips and a context menu. The Gantt Charts support Time Line Zooming and Scrolling that allow you to zoom in and out and scroll through time. The Gantt Charts have special support to produce the chart as an XSL-FO object, that can easily be turned into PDF and several other formats as well, using for example the Apache FOP project.

You have control over the label and icon placement for the bars in the Gantt Chart as well as over the format – fill color, background image, borders – of the bars.

The Project Gantt has an impressive Legend that can be added to the display:

image

All DVT Gantt Charts can be created based on a Managed Bean Data Model or on a Data Binding of type TreeTable based on a ViewObject or POJO Collection. A simple drag and drop operation from the data control palette will suffice to create a Gantt Chart.

For example the Project Gantt requires a Collection Model that contains tasks. Each task needs to have a label, a start time and an end time. That is the bare minimum for creating the Gantt Chart. In addition, each task can have attributes such as the type, the actual start date and the actual end data, the percent complete and the critical-ness of the task. Tasks can have detail accessors that describe split tasks, dependent tasks, sub tasks and recurring tasks.

image

This Project Gantt when running looks like this:

image

 

The Data Model used for the other two types of Gantt Charts is a little bit different. For the Resource Utilization Chart we need a Collection Model (based on a ViewObject or POJO Collection) of Resource Records. Each Resource needs to have an accessor (child collection or ViewLink to detail ViewObject) to TimeBucket records. These TimeBucket records are the time based registrations of the metric values that the chart should visualize. In this picture, the Time Buckets are taken from a ViewLink accessor – called GanttRugTimebucketsView2 – that contain metrics Available, Setup and Used recorded for the TimeDaily timestamp:

image

The Data Model for the Resource Schedule is similar to this one. It uses a Collection Model of Resources. Each Resource should have a detail collection or a ViewLink Accessor (to a detail ViewObject) that produce the time slot allocations for the resource. The next picture has an example of such a data model:

 

image

This Gantt Chart is about the schedule for presentations at the AMIS Academy, an internal knowledge event at AMIS. The Gantt Chart looks like this:

image

Example

In this example you will see the creation of a Gantt Chart of type Resource Schedule to visualize the allocations of a number of consultants. The chart is based on a simple database with two tables: Consultants and Allocations. In a few rapid steps, you will create the ADF BC for these tables, a simple page with a drag and drop chart and finally a few refinements to make it even better looking.

The first step with this hands-on is to open the JDeveloper application in the zip-file ConsultantAllocationGantt_start.zip that is attached to this blog article.

This application contains two projects – Model and ViewController. In the Model project is the file Gantt_DDL.sql. This file contains the DDL statements two create the two database tables for this hands on. The file also has a number of DML statements to create the data for the tables.

Run this file against the database schema that you use for this hands-on.

Create the ADF BC components for the two tables:

· Entity Objects Consultant and Allocation.

· View Objects ConsultantsView and AllocationsView.

· An Application Module ConsultancyService

· ViewLink from ConsultantsView (source) to AllocationsView (target)

image

Create the page with the initial chart

Open the ViewController project. Create a new page ConsultancyPlanBoard.jspx.

Add any decorations you feel appropriate – such as a header for the page.

Drag the ConsultantsView1 collection from the Data Controls palette and drop it on the page. Select the drop option Gantt | Scheduling.

image

The Scheduling Gantt editor appears.

Select Name as Resource Id. Select the AllocationsView (the accessor created for the ViewLink) as the Tasks Accessor. Select the other values as shown in the screenshot.

image

Click on OK. This completes the initial configuration of the Gantt Chart – except for the attributes that govern the start and end date of the Gantt Chart:

image

Set startTime to 2013-01-01 and endTime to 2013-09-01.

At this point you can run the page and see the Gantt Chart in action.

image

 

Adding some refinements

Some simple refinements that you can quickly add to the Gantt Chart include tooltips and custom formats for colorful allocation types. You need to create a Java Class and configure it as managed bean. In this class, two methods are needed that return the tooltip keys (which attributes will provide values for the tooltips) and the labels associated with these values. The Gantt Chart needs to be configured with the attributes tooltipKeyLabels and tooltipKeys.

Create a class ConsultantsGanttBean in the ViewController project. Create a managed bean consultantsGanttBean in view scope in the adfc-config.xml file.

image

Add the following methods to this class:

public String[] getTooltipKeys() {

return new String[] {“AlloType”, “Description”,”StartDate”, “EndDate”};

}

public String[] getTooltipKeyLabels() {

return new String[] {“Allocation Type”,”Description”, “From”, “Until”};

}

Open the jspx page and select the Gantt Chart component. Add these two attributes:

tooltipKeyLabels=”#{viewScope.consultantsGanttBean.tooltipKeyLabels}”

tooltipKeys=”#{viewScope.consultantsGanttBean.tooltipKeys}”

image

Now you can run the page again. When the page opens, you can see the tooltips when you hover over the allocations bars with your mouse cursor.

image

The next refinement is the use of custom formats – for now custom colors only – for the bars in the chart.

Add a private property theGantt to the class:

private UIGantt theGantt;

and generate the accessors.

Subsequently add the following method:

public static void createNewTask(TaskbarFormatManager taskbarFormatManager,

String taskName) {

TaskbarFormat taskbarFormat = null;

if (taskName.equals(“Vakantie”)) { // magenta

taskbarFormat = new TaskbarFormat(taskName, “#FF00FF”, null, “#FF00FF”,23);

}

else if (taskName.equals(“Bank”)) { //red

taskbarFormat = new TaskbarFormat(taskName, “#FF0000″, null, “#FF0000″,23);

}

else if (taskName.equals(“Ziekte”)) { // aqua

taskbarFormat = new TaskbarFormat(taskName, “#00FFFF”, null, “#00FFFF”,23);

}

else if (taskName.equals(“Training”)) { // yellow

taskbarFormat = new TaskbarFormat(taskName, “#FFFF00″, null, “#FFFF00″,23);

}

else {

//No need to do any things

}

taskbarFormatManager.registerTaskbarFormat(taskName, taskbarFormat);

}

and add these lines to the setTheGantt method:

public void setTheGantt(UIGantt theGantt) {

this.theGantt = theGantt;

createNewTask(theGantt.getTaskbarFormatManager(), “Vakantie”);

createNewTask(theGantt.getTaskbarFormatManager(), “Ziekte”);

createNewTask(theGantt.getTaskbarFormatManager(), “Bank”);

createNewTask(theGantt.getTaskbarFormatManager(), “Training”);

}

When you run the page next, you will see different color for different types of allocations. The value of attribute associated with the Task Type – VO attribute AlloType – is matched with the taskName used for registering the custom TaskbarFormat.

image

 

 

Resources

Download the JDeveloper 11gR1 11.1.1.6 Start Application: ConsultantAllocationGantt_start.zip. Also download the completed application: ConsultantAllocationGantt_complete.zip.

Oracle Documentation on the Gantt Charts – http://docs.oracle.com/cd/E25178_01/web.1111/b31973/dv_gantt.htm

Live ADF Demo – http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/gantt/index.jspx

Slideshare presentation on ADF DVT Gantt Chart – http://www.slideshare.net/lucasjellema/adf-dvt-speed-dating-meeting-the-gantt-charts

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

Leave a Reply