Skip Headers
Oracle® Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework
11g Release 1 (11.1.1)

Part Number B31973-02
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
View PDF

27 Using ADF Gantt Chart Components

This chapter describes how to use a databound ADF Gantt chart component to display data, and the options for customizing Gantt charts.

This chapter includes the following sections:

For information about the data binding of ADF Gantt chart, see the "Creating Databound ADF Gantt Charts" section in the Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

27.1 Introduction to the ADF Gantt Chart Components

A Gantt chart is a type of horizontal bar graph that you use to plan and track projects. It shows resources or tasks in a time frame with a distinct beginning and end.

27.1.1 Types of Gantt Charts

The ADF Gantt chart provides the following components:

  • Project Gantt chart: A project Gantt chart lists tasks vertically and shows the duration of each task as a bar on a horizontal time line. The project Gantt graphs each task on a separate line as shown in Figure 27-1.

    Figure 27-1 Project Gantt Chart for a Software Application

    Project gantt for a software application.
  • Resource Utilization Gantt chart: A resource utilization Gantt chart shows graphically whether resources are over or under allocated. It shows resources vertically while showing their allocation and, optionally, capacity on the horizontal time axis. Figure 27-2 shows a resource utilization Gantt chart illustrating how many hours are allocated and utilized for a particular developer resource in a given time period.

    Figure 27-2 Resource Utilization Gantt Chart for a Software Application

    Resource utilization Gantt chart..
  • Scheduling Gantt chart: A scheduling Gantt chart is based on manual scheduling boards and shows resources vertically with corresponding activities on the horizontal time axis. Examples of resources include people, machines, or rooms. The scheduling gantt uses a single line to graph all the tasks that are assigned to a resource as shown in Figure 27-3.

    Figure 27-3 Scheduling Gantt Chart for a Software Application

    Scheduling gantt for a software application

27.1.2 Description of Project Gantt Chart Tasks

You define tasks when you complete a Gantt chart data binding dialog. You can consider tasks in the following ways:

  • Tasks and data collections: Tasks, subtasks, and split tasks require separate accessors (or nodes) in a data collection. To create a Gantt chart, only a task accessor is required. Subtasks and split tasks are optional.

  • Task types: All tasks (including subtasks and split tasks) have a task type. The value for task type defaults to Normal. If the data collection for a project Gantt chart contains a column that identifies task type, and if you select this column in the Task Type box of the Gantt chart data binding dialog, then the value for task type is provided by the data.

Figure 27-4 displays a legend that shows the common task types. The following list describes the supported tasks and how they appear in a Gantt chart:

  • Normal: The basic task type. It is a plain horizontal bar that shows the start time, end time, and duration of the task. Each task must have a unique identifier.

  • Summary: The starting and ending time for a group of subtasks. A summary task cannot be moved or extended. Instead, it is the responsibility of the application to execute code to recalculate the start and end time for a summary task when the time of a subtask changes. Summary tasks are available only for the project Gantt chart.

  • Milestone: A milestone marks a specific date in the Gantt chart. For this reason, there is only one time associated with a milestone task. A milestone task cannot be extended but it can be moved. A milestone task is available only for the project Gantt chart.

Figure 27-4 Gantt Chart Legend for Task Types

Gantt legend for task types

27.1.3 Main Functional Parts of a Gantt Chart

A Gantt chart consists of the following functional parts:

  • List region: Displays Gantt chart data attributes in columns. The list region requires a minimum of one column, but you can define attributes for as many columns as desired in either the Project Gantt chart Data Binding dialog or the Scheduling Gantt chart Data Binding dialog as appropriate.

    For example, in Figure 27-1, the list region contains the following columns: Name (of the task), Orig. Est., Curr. Est., Elapsed (days), Remaining (days), and Resources.

  • Chart region: Displays a bar graph of the Gantt chart data along a horizontal time axis. The time axis provides for major and minor settings to allow for zooming. The major setting is for larger time increments and the minor setting is for smaller time increments.

    For example, in Figure 27-1, the chart region graphs tasks on a time axis that shows days within weeks.

  • Information panel: Displays both the information region (which displays text about the selected task, if there is one) and the optional legend (which displays task types) in the area beneath the list region and the chart region. Note that the Gantt chart legend is not present unless you insert the legend child tag inside the parent Gantt chart tag.

  • Toolbar: Lets users perform operations on the Gantt chart. The toolbar is visible in the Gantt chart by default. You can change the visibility of the toolbar by setting the ShowToolbar attribute on the Appearance page of the Property Inspector for the Gantt chart.

    The toolbar consists of the following sections:

    • Menu bar: The left section of the toolbar contains a set of menus for the Gantt chart. Figure 27-5 displays the menu bar, which is visible in the Gantt chart by default. You can change the visibility of the menu bar by setting the ShowMenuBar attribute in the Appearance page of the Property Inspector for the Gantt chart. You can customize menu items by using the menubar facet.

      Note:

      The View menu items do not require that you write application code to make them functional. However, you must provide application code for any items that you want to use on the other menus.

      Figure 27-5 Sample Menu Bar for a Gantt Chart

      Sample menubar for a gantt.
    • Toolbar buttons: The right section of the toolbar displays a set of action buttons for working with the Gantt chart.Figure 27-6 shows a sample toolbar for a Gantt chart.

      Figure 27-6 Sample Toolbar for a Gantt Chart

      Sample toolbar for a gantt

    You can customize toolbar buttons by using the toolbar facet.

  • Printing service: The Gantt chart provides printing capability in conjunction with XML Publisher by generating PDF files. For more information, see Section 27.6, "Printing a Gantt Chart".

27.1.4 Relationship Between the Gantt Chart List Region and the Chart Region

The ADF Gantt chart contains a list region on the left side of a splitter and a chart region on the right side of the splitter. The list region shows one or more columns of Gantt chart data attributes. The chart region displays the various kinds of tasks that are planned.

Both the list region and the chart region share the same data and selection model. Scrolling and expanding or collapsing of rows is synchronized between the two regions. The use of the splitter gives you the option to focus on one region of the Gantt chart. For example, to view only the chart region, you can collapse the splitter over the list region.

27.2 Understanding Data Requirements for the Gantt Chart

The data model for a Gantt chart can be either a tree (hierarchical) model or a collection model that contains a row set or flat list of objects. For more information, see the "Creating Databound ADF Gantt Charts" section in the Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

When you bind a Gantt chart to a data control, you specify how the collection in the data control maps to the node definitions of the Gantt chart.

27.2.1 Data for a Project Gantt Chart

The following node definitions are available in a project Gantt chart:

  • Task node: Represents a collection of tasks. The task node definition has the following types of optional accessors:

    • subTask accessor (Available only for project Gantt chart)

    • splitTask accessor

  • Split task node: Represents a collection of split tasks. A split task node does not have accessors.

  • Dependency node: Represents a collection of dependencies for a task. A dependency node definition does not have accessors.

  • Recurring Task node: Represents a collection of recurring tasks. A recurring task node definition does not have accessors.

27.2.2 Data for a Resource Utilization Gantt Chart

The following node definitions are available in a Resource Utilization Gantt chart:

  • Resource node: Represents a collection of resources. The resource node definition has an optional subResources accessor that returns a collection of subresources for the current resource.

  • Time Bucket node: Represents a collection of time slots with metrics defined.

27.2.3 Data for a Scheduling Gantt Chart

The scheduling Gantt chart has a Resource node definition. The Resource node has the following types of accessors:

  • subResources: Returns a collection of subresources for the current resource. This accessor is optional.

  • tasks: Returns a collection of tasks for the current resource. This accessor is required. Tasks can also include a splitTask accessor.

27.2.4 How to Display Data in a Hierarchical List or a Flat List

If a Gantt chart is using a hierarchical data model, then you have the option of displaying Gantt chart data in a collapsed form or in an expanded form.

To control the display of Gantt chart data in a list:

  1. From the View menu, select List Pane.

  2. From the ensuing menu, select either Show As List (for an expanded list) or Show As Hierarchy (for a collapsed list).

27.3 Navigating in a Gantt Chart

You can browse through the Gantt chart regions using scrolling or you can access specific dates in the chart region. You can also control whether columns in the list region are visible.

27.3.1 Scrolling the List Region or the Chart Region

The Gantt chart design lets you perform horizontal scrolling of the list region and the chart region independently. This is especially helpful when you want to hold specific task or resource information constant in the list region while scrolling through multiple time periods of information in the chart region.

27.3.2 How to Navigate to a Specific Date in a Gantt Chart

You can move the chart region of the Gantt chart rapidly to a specific date.

To navigate to a specific date in a Gantt chart:

  1. From the View menu, select Go to Date.

  2. In the ensuing Go to Date dialog, specify the desired date by clicking the Select Date icon and indicating the date in the calendar.

  3. Click OK.

The display of the chart region of the Gantt chart begins at the date you requested.

27.3.3 How to Control the Visibility of Columns in the List Region

By default, all the columns that you define when you create a databound Gantt chart are visible in the list region. You can selectively cause one or more of these columns to be invisible.

To control the display of columns in the list region of a Gantt chart:

  1. From the View menu, choose List Pane.

  2. From the ensuing context menu, choose Columns.

  3. In the Columns menu, deselect any column that you want to be invisible in the list region of the Gantt chart. You can also select any column that you want to make visible in the list region.

    Note:

    You must keep at least one column visible in the list region.

27.4 Zooming on the Gantt Chart Time Axis

Every Gantt chart is created with a major time axis and a minor time axis. Each time axis has a facet that identifies the level of the axis as major or minor.

The default time settings for all Gantt charts are:

The default time axis settings for a scheduling Gantt chart are as follows:

27.4.1 How to Customize Time Axis Settings

You can customize the settings of a time axis. However, the setting of a major axis must be a higher time level than the setting of a minor axis. The following values for setting the scale on a time axis are listed from highest to lowest:

  • Years

  • Half Years

  • Quarters

  • Months

  • Weeks

  • Days

  • Hours

To customize the settings of a time axis:

  1. From the View menu, choose Time Scale.

  2. In the ensuing Time Scale dialog, in the Time Unit column, select a new unit value for either the major axis, the minor axis, or both axes.

    Note:

    The Sample box at the bottom of the Time Scale dialog displays sample settings for the time unit that you select.
  3. Click OK.

The time units that you specify for the major and minor axis apply only to the initial display of the Gantt chart. When you zoom in or out on a time axis, you can display the time axis at whatever time unit level you want to use.

27.4.2 How to Zoom In or Zoom Out on a Time Axis

You can zoom in on a time axis and you can zoom out on a time axis to display the chart region in different time units. You can also use a specialized zoom-to-fit feature in which you select the amount of time that you want to display in the chart region without a need to scroll the chart.

To zoom in or out on a time axis:

  1. Optionally, on the toolbar, select the Zoom In icon to display the time axis at a lower level time unit.

  2. Optionally, on the toolbar, select the Zoom Out icon to display the time axis at a higher level time unit.

  3. Optionally, in the box on the toolbar after the zoom icons, select a time period that represents the amount of time on the chart that you want to display without the need to scroll.

27.5 Identifying Nonworking Days in a Gantt Chart

You can specify nonworking days in a Gantt chart. By default, nonworking days are shaded gray but you can select a custom color to be used for nonworking days.

27.5.1 How to Specify Weekdays as Nonworking Days

If certain weekdays are always nonworking days, then you can indicate the days of the week that fall in this category.

To identify weekdays as nonworking days:

  1. In the Structure Window, right-click a Gantt chart and select Go To Properties.

  2. In the Property Inspector, select the Appearance Page.

  3. In the NonWorkingDaysOfWeek box, enter the string of days that you want to identify as nonworking days for each week.

    For example, to specify that Saturday and Sunday are nonworking days, enter the following string: "sat sun"

  4. Optionally specify a custom color in the NonWorkingDaysColor box. The value you enter for this attribute must be a Hex color string.

27.5.2 How to Identify Specific Dates as Nonworking Days

You can enter specific dates as nonworking days in a Gantt chart when individual weekdays are not sufficient.

To identify specific dates as nonworking days:

  1. In the Structure Window, right-click a Gantt chart and select Go To Properties.

  2. In the Property Inspector, select the Appearance attributes category.

  3. In the nonWorkingDays field, enter the string of dates that you want to identify as nonworking days. The value for this attribute must be a string of Date objects. For example: "2008-07-04 2008-11-28 2008-12-25".

    Alternatively, for more flexibility, you can create a method in a backing bean to programmatically identify the nonworking days. For example, if you put the code in a backing bean in a method called getNonWorkingDays, then the setting for the nonWorkingDays attribute becomes: "#{myBackingBean.nonWorkingDays}".

  4. Optionally, specify a custom color in the nonWorkingDaysColor field. The value you enter for this attribute must be a Hex color string.

27.6 Printing a Gantt Chart

The ADF Gantt chart provides a helper class (GanttPrinter) that can generate a Formatted Object (FO) for use with XML Publisher to produce PDF files.

27.6.1 Print Options

In general, the GanttPrinter class prints the Gantt chart content as it appears on your screen. For example, if you hide the legend in the Gantt chart, then the legend will not be printed. Similarly, if you deselect a column in the List Pane section of the View Menu, then that column will not be visible in the Gantt chart and will not appear in the print unless you take advantage of the column visibility print option.

You can use the following print options in the GanttPrinter class:

  • Column visibility: The setColumnVisible method lets you control whether individual columns in the list region of the Gantt chart will appear in the printed output.

    For example, to hide the first column in the list region of a Gantt chart, use the following code, where the first parameter of the method is the zero-based index of the column and the second parameter indicates whether the column should be visible in the printed Gantt chart: _printer.setColumnVisible(o, false);

  • Margins: The setMargin method of the GanttPrinter lets you specify the top, bottom, left, and right margins in pixels as shown in the following code, where _printer is an instance of GanttPrinter: _printer.setMargin(30, 16, 66, 66);

  • Page size: The setPageSize method of the GanttPrinter lets you specify the height and width of the printed page in pixels as shown in the following code, where _printer is an instance of GanttPrinter: _printer.setPageSize (440, 600);

  • Time period: The setStartTime and setEndTime methods of the GanttPrinter class let you identify the time period of the Gantt chart that you want to print.

    Example 27-1 shows sample code for setting a specific time period in the Gantt chart for printing, where startDate and endDate are variables that represent the desired dates and _printer is an instance of GanttPrinter.

Example 27-1 Code for Setting the Time Period Option for Printing a Gantt Chart

_printer.setStartTime(startDate);
_printer.setEndTime(endDate);

27.6.2 Action Listener to Handle the Print Event

The Gantt chart toolbar includes a Print button that initiates a Print action. To print a Gantt chart, you must create an ActionListener to handle the Print event. The code in the ActionListener should include the following processes:

  1. Get access to the servlet's output stream.

  2. Generate the FO. This process includes creating an instance of GanttPrinter and entering the code for any print options that you want to use.

  3. Generate the PDF.

Example 27-2 shows the code for an ActionListener that handles the print event. This listener includes settings for all the print options available in the GanttPrinter helper class.

Example 27-2 Sample ActionListener for Handling the Gantt Chart Print Event

public void handleAction(GanttActionEvent evt)
{
  if (GanttActionEvent.PRINT == evt.getActionType()) 
  { 
     FacesContext _context = FacesContext.getCurrentInstance();
     ServletResponse _response = (ServletResponse) 
              _context.getExternalContext().getResponse();
     _response.setContentType("application/pdf");
     ServletOutputStream _sos = _response.getOutputStream();
     // Generate FO 
     GanttPrinter _printer = new GanttPrinter(m_gantt); 
            // Set column visibility by column index
     _printer.setColumnVisible(0, false);
            // Set start and end date
     _printer.setStartTime(startDate);
     _printer.setEndTime(endDate);
            // Set top, bottom, left, and right margins in pixels
     _printer.setMargin(30, 16, 66, 66);
            // Set height and width in pixels
     _printer.setPageSize(440, 660);
     File _file = File.createTempFile("gantt", "fo");
     OutputStream _out = new FileOutputStream(_file);
     _printer.print(_out); 
     _out.close(); 
     // generate pdf 
     FOProcessor _processor = new FOProcessor();
     _processor.setData(new FileInputStream(_file),"UTF-8"));
     _processor.setOutputFormat(FOProcessor.FORMAT_PDF);
     _processor.setOutput(_sos);
     _processor.generate();
     _context.responseComplete();
   } 
}