For detailed descriptions of each data visualization use cases and examples, see the following:

• Gantt chart components: Gantt Chart Component Use Cases and Examples section in Developing Web User Interfaces with Oracle ADF Faces.

• Timeline components: Timeline Use Cases and Examples section in Developing Web User Interfaces with Oracle ADF Faces.

Visually compelling data visualization components enable end users to understand and analyze complex business data. The components are rich in features that provide out-of-the-box interactivity support. For detailed descriptions of the end user and presentation features for each component, see the following:

• Gantt chart components: End User and Presentation Features section in Developing Web User Interfaces with Oracle ADF Faces.

• Timeline components: End User and Presentation Features section in Developing Web User Interfaces with Oracle ADF Faces.

For a project Gantt chart, you must specify values for tasks. Optionally, you can specify values for split tasks, subtasks, recurring tasks, and dependencies between tasks, if your data collection has accessors for this additional information.

The project Gantt chart is displayed with default values for overall start time and end time and for the major and minor time axis values. In a project Gantt chart, the setting for the major time axis defaults to weeks and the setting for the minor time axis defaults to days.

Figure 42-1 shows a project Gantt chart in which each task is an order to be filled. The list region on the left side of the splitter shows columns with the name of the person responsible for the order and columns for the order date and ship date. In the chart region on the right side of the splitter, the Gantt chart displays a horizontal bar from the order date to the ship date for each order.

Figure 42-1 Project Gantt Chart for Orders Shipped

To create a project Gantt chart using a data control, bind the project Gantt chart component to a data collection. JDeveloper allows you to do this declaratively by dragging and dropping a collection from the Data Controls panel.

Tip:

You can also create a project Gantt chart by dragging a project Gantt chart component from the Components window and completing the Create Project Gantt dialog. This approach allows you to design the Gantt chart user interface before binding the component to data.

Before you begin:

It may be helpful to have an understanding of databound Gantt charts. For more information, see Creating Databound Gantt Charts.

You may also find it helpful to understand functionality that can be added using other Oracle ADF features. For more information, see Additional Functionality for Data Visualization Components.

You will need to complete these tasks:

1. From the Data Controls panel, select a data collection. Select a row set collection that produces a flat list of tasks, or a basic tree collection that produces a hierarchical list of tasks.

   Figure 42-2 shows an example where you could select the OrderEmployee1 collection in the Data Controls panel to create a project Gantt chart that displays the progress of order shipping.

   Figure 42-2 Data Collection for Shipping Orders

   
   Description of "Figure 42-2 Data Collection for Shipping Orders"
2. Drag the collection onto a JSF page and, from the context menu, choose Gantt > Project.
3. In the Create Project Gantt dialog, in the Tasks page, select the columns in the data collection that correspond to the following attributes:

   • Task Id: The unique Id for the tasks represented in the Gantt chart.

   • Start Time: The starting time of the task.

   • End Time: The ending time of the task.

   • Task Type: The type used to specify the appearance of the task bar when it is rendered in the Gantt chart. If you do not bind the type to a column in your data collection, then all tasks default to Normal. Task types include:

     • Normal: The basic task type, a plain horizontal bar that shows the start time, end time, and duration of the task.

     • Summary: Shows start time and end time for a group of tasks, typically subtasks. A summary task cannot be moved or extended. However, your application should recalculate the summary task times when the dates of any subtask changes.

     • Milestone: Shows a specific date in the Gantt chart. There is only one date associated with a milestone task. A milestone task cannot be extended but it can be moved.

4. Click Show More to select additional columns in the data collection that correspond to the following attributes for the specified task type:

   • Actual Start and Actual End: When these attributes are specified, instead of drawing one bar, two bars are drawn. One bar indicates the base start and end date, the other bar indicates the actual start and end date. This is applicable to normal and milestone task types.

   • % Complete: When specified, an additional inner bar is drawn to indicate the percentage complete for the task.

   • Completed Through: Allows you to specify a date rather than a percentage. When specified, an additional inner bar is drawn to indicate the percentage complete based on the date that the attribute references.

   • Critical: Changes the color of the bar to red to mark it as critical. This is applicable to normal, summary, and milestone task types.

   • Edits Allowed: Boolean value to specify if the task start date, end date, or duration is supported in the chart region.

   • Is Container: Boolean value to specify if the node definition is a container.

5. If the data collection has an accessor for subtasks, use the Subtasks page to select the Subtasks Accessor from the dropdown list, and then the columns in the data collection that correspond to the following attributes:

   • Subtask ID: The unique Id for the list of subtasks in the data collection.

   • Start Time: The starting time of the subtask.

   • End Time: The ending time of the subtask.

   • Subtask Type: The type used to specify the appearance of the subtask bar when it is rendered in the Gantt chart. If you do not bind the type to a column in your data collection, then all tasks default to Normal. Task types include:

     • Normal: The basic task type, a plain horizontal bar that shows the start time, end time, and duration of the task.

     • Summary: Shows start time and end time for a group of tasks, typically subtasks. A summary task cannot be moved or extended. However, your application should recalculate the summary task times when the dates of any subtask changes.

     • Milestone: Shows a specific date in the Gantt chart. There is only one date associated with a milestone task. A milestone task cannot be extended but it can be moved.

   If you do not bind subtasks, then the Gantt chart cannot render a hierarchy view of tasks. If you bind subtasks, you can drill from tasks to subtasks in the hierarchy view of the Gantt chart.

6. If the data collection has an accessor for dependent tasks, use the Dependent Tasks page to select the Dependent Task accessor from the dropdown list, and then the columns in the data collection that correspond to the following attributes:

   • Dependency Type: Specifies the type of the dependency. Valid values are start-start, start-finish, finish-finish, finish-start, start-before, start-together, finish-after, and finish-together.

   • From Task Id: Specifies the first task in the dependent relationship.

   • To Task Id: Specifies the last task in the dependent relationship.

7. If the data collection has an accessor for split tasks, use the Split Tasks page to select the Split Task accessor from the dropdown list, and then the columns in the data collection that correspond to the following attributes:

   • Split Task Id: The unique Id for a task split into two horizontal bars, usually linked by a line. The time between the bars represents idle time due to traveling or down time.

   • Start Time: The starting time of the split task.

   • End Time: The ending time of the split task.

8. If the data collection has an accessor for recurring tasks, use the Recurring Tasks page to select the Recurring Tasks accessor from the dropdown list, and then the columns in the data collection that correspond to the following attributes:

   • Recurring Task Id: A unique Id for a task repeated in a Gantt chart, each instance with its own start and end date. Individual recurring tasks can optionally contain a subtype. All other properties of the individual recurring tasks come from the task which they are part of. However, if an individual recurring task has a subtype, this subtype overrides the task type.

   • Type: Specifies the type of the recurring task.

   • Start Time: The starting time of the recurring task.

   • End Time: The ending time of the recurring task.

9. In the Appearance page, specify the attributes that correspond to the Label of the task bar, and up to three icons to associate with the task bar.
10. In the Table Columns section, specify the columns to display for each row in the list region of the Gantt chart. Use the New icon to add new rows, the Delete icon to remove rows, and the arrow icons to arrange the rows in the sequence that you want the columns to appear in the Gantt chart list.

    Note:

    The first row that you specify in the Table Columns section designates the nodestamp column for the list region. If you specify a subtask accessor, this row is used as the parent in a hierarchical relationship that can be expanded or collapsed.

    For each row, specify the following:

    • Display Label: Select the values for the headers of the columns in the Gantt chart list. If you select <default>, the text for the header is automatically retrieved from the data binding.

    • Value Binding: Select the columns in the data collection to use for the columns in the Gantt chart list. The available values are the same as those for the tasks group.

    • Component to Use: Select the type of component to display in the cell of the Gantt chart list. You can specify that a cell is editable by using an ADF input component. The default is the ADF Output Text component.

11. Click OK.

    Figure 42-3 shows the dialog used to create the project Gantt chart in Figure 42-1 from the data collection for shipping orders.

    Figure 42-3 Create Project Gantt Dialog for Orders Shipped

    
    Description of "Figure 42-3 Create Project Gantt Dialog for Orders Shipped"
12. In the Structure window, right-click the dvt:projectGantt component and select Go to Properties.
13. In the Properties window, expand the Common section, and specify the dates (yyyy-mm-dd) for the StartTime and EndTime attributes representing the start and end dates respectively for the time period of the Gantt chart data.

    The dates that you specify determine the initial view that appears in the project Gantt chart at runtime.

14. If you want to include a legend in the Gantt chart, right-click the project Gantt chart node in the Structure window and choose Insert Inside Project Gantt > Legend.

    The legend shows information about each symbol and color coded bar used to represent different task types. It also shows detailed information about the task selected in the Gantt chart.

Dragging and dropping a view object from the Data Controls panel to create a project Gantt chart has the following effect:

• Creates the bindings for the Gantt chart and adds the bindings to the page definition file

• Adds the necessary code for the UI components to the JSF page

The example below displays the row set bindings generated for the project Gantt chart in Figure 42-1 to display shipped orders. This code example shows the node defined for tasks with attributes for task Id, start date, and end dates. There are also nodes defined for subtasks, dependent tasks, split tasks, and recurring tasks with no defined attributes.

<bindings>
  <gantt IterBinding="OrderEmployee1Iterator" id="OrderEmployee1"
         xmlns="http://xmlns.oracle.com/adfm/dvt">    <ganttDataMap>      <nodeDefinition DefName="model.OrderEmployee" type="Tasks">        <AttrNames>
          <Item Value="TaskId" type="taskId"/>
          <Item Value="StartDate" type="startTime"/>
          <Item Value="EndDate" type="endTime"/>
          <Item Value="TaskType" type="taskType"/>
        </AttrNames>
      </nodeDefinition>
      <nodeDefinition type="subTasks">
        <AttrNames/>
      </nodeDefinition>
      <nodeDefinition type="Dependents">
        <AttrNames/>
      </nodeDefinition>
      <nodeDefinition type="SplitTasks">
        <AttrNames/>
      </nodeDefinition>
      <nodeDefinition type="RecurringTasks">
        <AttrNames/>
      </nodeDefinition>
  </ganttDataMap>
 </gantt>
</bindings>

The example below shows the code generated on the JSF page for the project Gantt chart. This tag code contains settings for the overall start and end time for the project Gantt chart. It also shows the default time axis settings for the major axis in weeks and the minor axis in days. Finally, it lists the specifications for each column that appears in the list region of the Gantt chart.

<dvt:projectGantt id="gantt1" value="#{bindings.OrderEmployee1.projectGanttModel}"
                  dataChangeListener="#{bindings.OrderEmployee1.projectGanttModel
                      .processDataChanged}"
                  var="row"
                  startTime="2012-03-31" endTime="2012-06-30">
  <f:facet name="major">
    <dvt:timeAxis scale="weeks" id="ta1"/>
  </f:facet>
  <f:facet name="minor">
    <dvt:timeAxis scale="days" id="ta2"/>
  </f:facet>
  <f:facet name="nodeStamp">
    <af:column
        sortProperty="#{bindings.OrderEmployee1.hints.FirstName.name}"
        sortable="false"
        headerText="#{bindings.OrderEmployee1.hints.FirstName.label}" 
        id="c1">
      <af:outputText value="#{row.FirstName}" id="ot1"/>
    </af:column>
  </f:facet>
    <af:column sortProperty="LastName" sortable="false"
             headerText="#{bindings.OrderEmployee1.hints.LastName.label}">
      <af:outputText value="#{row.LastName}"/>
    </af:column>
    <af:column sortProperty="OrderDate" sortable="false"
             headerText="#{bindings.OrderEmployee1.hints.OrderDate.label}">
       <af:outputText value="#{row.OrderDate}">
         <af:convertDateTime
             pattern="#{bindings.OrderEmployee1.hints.OrderDate.format}"/>
       </af:outputText>
     </af:column>
     <af:column sortProperty="ShippedDate" sortable="false"
         headerText="#{bindings.OrderEmployee1.hints.ShippedDate.label}">
       <af:outputText value="#{row.ShippedDate}">
       <af:convertDateTime
         pattern="#{bindings.OrderEmployee1.hints.ShippedDate.format}"/>
       </af:outputText>
     </af:column>
     <af:column sortProperty="TaskType" sortable="false"
         headerText="#{bindings.OrderEmployee1.hints.TaskType.label}">
       <af:outputText value="#{row.TaskType}"/>
     </af:column>
 </projectGantt>

For a resource utilization Gantt chart, you must supply identification for resources, identification for time, and start and end times for resource usage. Optionally, you can provide data values for subresources.

The resource utilization Gantt chart is displayed with default values for the major and minor time axis values. In a resource utilization Gantt chart, the setting for the major time axis defaults to weeks and the setting for the minor time axis defaults to days.

Figure 42-4 shows a resource utilization Gantt chart that lists each resource and an associated calendar that can display when the resource is in use.

Figure 42-4 Resource Utilization Gantt Chart

To create a resource utilization Gantt chart using a data control, you bind the resource utilization component to a data collection. JDeveloper allows you to do this declaratively by dragging a collection from the Data Controls panel and dropping it on a JSF page.

Tip:

You can also create a resource utilization Gantt chart by dragging a resource utilization Gantt chart component from the Components window and completing the Create Resource Utilization Gantt dialog. This approach gives you the option of designing the Gantt chart user interface before binding the component to data.

Before you begin:

It may be helpful to have an understanding of databound Gantt charts. For more information, see Creating Databound Gantt Charts.

You may also find it helpful to understand functionality that can be added using other Oracle ADF features. For more information, see Additional Functionality for Data Visualization Components.

You will need to complete these tasks:

1. From the Data Controls panel, select a data collection. For a Gantt chart, you can select a row set collection or a basic tree collection.

   Figure 42-5 shows an example where you could select the SalesRepViewObj1 collection in the Data Controls panel to create a resource utilization Gantt chart to display the usage of a resource.

   Figure 42-5 Data Collection for Resource Utilization Gantt Chart

   
   Description of "Figure 42-5 Data Collection for Resource Utilization Gantt Chart"
2. Drag the collection onto a JSF page and, from the context menu, choose Gantt > Resource Utilization.
3. In the Create Resource Utilization Gantt dialog, select the columns in the data collection that correspond to the following attributes:

   • Resource Id: The unique identifier of the resource, for example Id representing the sales representatives in the view object.

   • Is Container: Boolean. Specify whether or not the node definition is a container.

4. In the Time Buckets page, select a value from the Bucket Accessor dropdown list that contains the time buckets assigned to the resource, and select a value from the Bucket Date dropdown list that corresponds to a unit of time.

   For example, the SOrdView2 view object includes attributes representing the date ordered and date shipped for each order assigned to a sales representative. Figure 42-6 shows the view object used for the bucket accessor.

   Figure 42-6 Resource Utilization Gantt Chart Bucket Accessor

   
   Description of "Figure 42-6 Resource Utilization Gantt Chart Bucket Accessor"
5. In the Bucket Metrics list, specify attributes that appear as bars within the time bucket. Use the New icon to add new rows, the Delete icon to remove rows, and the arrow icons to arrange the rows in the sequence that you want the metrics to appear in the Gantt chart region.

   Each attribute that you specify in the Bucket Metrics list must be of type Number as the value of the attribute is used to calculate the height of the bar.

6. In the Table Columns section, specify the columns to display for each row in the list region of the Gantt chart. Use the New icon to add new rows, the Delete icon to remove rows, and the arrow icons to arrange the rows in the sequence that you want the columns to appear in the Gantt chart list.

   Note:

   The first row that you specify in the Table Columns section designates the nodestamp column for the list region. If you specify a subresource accessor, this row displays the parent in a hierarchical relationship that can be expanded or collapsed.

   For each row, specify the following:

   • Display Label: Select the values for the headers of the columns in the Gantt chart list. If you select <default>, the text for the header is automatically retrieved from the data binding.

   • Value Binding: Select the columns in the data collection to use for the columns in the Gantt chart list. The available values are the same as those for the tasks group.

   • Component to Use: Select the type of component to display in the cell of the Gantt chart list. You can specify that a cell is editable by using an ADF input component. The default is the ADF Output Text component.

7. If the data collection has an accessor for subresources, use the Subresources page to select a Subresources accessor from the dropdown list, and then select a unique identifier for the subresource from the Resource Id dropdown list.
8. In the Appearance page, specify the attributes that correspond to the Label of the task bar.
9. Click OK.

   Figure 42-7 shows the dialog used to create a resource utilization Gantt chart from the data collection for resources available for a project.

   Figure 42-7 Create Resource Utilization Gantt Chart Dialog

   
   Description of "Figure 42-7 Create Resource Utilization Gantt Chart Dialog"
10. In the Structure window, right-click the dvt:resourceUtilizationGantt component and select Go to Properties.
11. In the Properties window, expand the Common section, and specify the dates (yyyy-mm-dd) for the StartTime and EndTime attributes representing the start and end dates respectively for the time period of the Gantt chart data.

    The dates that you specify determine the initial view that appears in the resource utilization Gantt chart at runtime.

12. If you want to include a legend in the Gantt chart, right-click the resource utilization Gantt chart node in the Structure window and choose Insert Inside Resource Utilization Gantt > Legend.

    The legend shows information about each symbol and color coded bar used to represent different tasks. It also shows detailed information about the task selected in the Gantt chart.

Dragging and dropping a view object from the Data Controls panel onto a JSF page to create a resource utilization Gantt chart has the following effects:

• Creates bindings for the resource utilization Gantt chart and adds the bindings to the page definition file

• Adds the necessary code for the UI components to the JSF page

The example below shows the row set bindings that were generated for the resource utilization Gantt chart illustrated in Figure 42-7.

<bindings>
  <gantt IterBinding="SalesRepViewObj1Iterator" id="SalesRepViewObj1"
         xmlns="http://xmlns.oracle.com/adfm/dvt">
    <ganttDataMap>
      <nodeDefinition DefName="model.SalesRepViewObj" type="Resources">
        <AttrNames>
          <Item Value="Id" type="resourceId"/>
        </AttrNames>
        <Accessors>
          <Item Value="SOrdView" type="timeBuckets"/>
        </Accessors>
      </nodeDefinition>
      <nodeDefinition type="TimeBuckets" DefName="model.SOrdView">
        <AttrNames>
          <Item Value="DateOrderedDay" type="time"/>
          <Item type="metric" Value="Total"/>
        </AttrNames>
      </nodeDefinition>
      <nodeDefinition type="Subresources">
        <AttrNames/>
      </nodeDefinition>
    </ganttDataMap>
  </gantt>
</bindings>

The example below shows the code generated on the JSF page for the resource utilization Gantt chart. This tag code contains settings for the overall start and end time for the resource utilization Gantt chart. These settings have to be edited manually. The code also shows the time axis settings for the major time axis (in weeks) and the minor time axis (in days). Finally, it lists the specifications for each column to appear in the list region of the resource utilization Gantt chart.

<dvt:resourceUtilizationGantt id="gantt1"
            value="#{bindings.SalesRepViewObj1.resourceUtilizationGanttModel}"
            var="row" metrics="#{bindings.SalesRepViewObj1.metrics}"
            taskbarFormatManager="#{bindings.SalesRepViewObj1.
                resourceUtilizationGanttTaskbarFormatManager}"
            startTime="2012-05-09" endTime="2013-05-15"
            summary="#{viewcontrollerBundle.RESOURCE_UTILIZATION_GANTT_CHART}">
  <f:facet name="major">
    <dvt:timeAxis scale="weeks" id="ta1"/>
  </f:facet>
  <f:facet name="minor">
    <dvt:timeAxis scale="days" id="ta2"/>
  </f:facet>
  <f:facet name="nodeStamp">
    <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.FirstName.name}"
               sortable="false"
               headerText="#{bindings.SalesRepViewObj1.hints.FirstName.label}"
               id="c1">
      <af:outputText value="#{row.FirstName}"
                  shortDesc="#{bindings.SalesRepViewObj1.hints.FirstName.tooltip}"
                  id="ot1"/>
    </af:column>
  </f:facet>
    <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.LastName.name}"
               sortable="false"
               headerText="#{bindings.SalesRepViewObj1.hints.LastName.label}"
               id="c2">
      <af:outputText value="#{row.LastName}"
                   shortDesc="#{bindings.SalesRepViewObj1.hints.LastName.tooltip}"
                   id="ot2"/>
    </af:column>
    <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.Email.name}"
               sortable="false"
               headerText="#{bindings.SalesRepViewObj1.hints.Email.label}"
               id="c3">
      <af:outputText value="#{row.Email}"
                     shortDesc="#{bindings.SalesRepViewObj1.hints.Email.tooltip}"
                     id="ot3"/>
    </af:column>
</dvt:resourceUtilizationGantt>

For a scheduling Gantt chart, you must supply identification for resources, identification for tasks, and start and end times for tasks. Optionally, you can provide data values for subresources, recurring tasks, split tasks, and dependencies between tasks.

The scheduling Gantt chart is displayed with default values for overall start and end time and for the major and minor time axis values. In a scheduling Gantt chart, the setting for the major time axis defaults to weeks and the setting for the minor time axis defaults to days.

Figure 42-8 shows a scheduling Gantt chart that lists each resource and all the orders for which that resource is responsible. In contrast to a project Gantt chart, the scheduling Gantt chart shows all the tasks for a given resource on the same line, while the project Gantt chart lists each task on a separate line.

Figure 42-8 Scheduling Gantt Chart for Order Shipping

To create a scheduling Gantt chart using a data control, you bind the schedulingGantt tag to a data collection. JDeveloper allows you to do this declaratively by dragging and dropping a collection from the Data Controls panel.

Before you begin:

It may be helpful to have an understanding of databound Gantt charts. For more information, see Creating Databound Gantt Charts.

You may also find it helpful to understand functionality that can be added using other Oracle ADF features. For more information, see Additional Functionality for Data Visualization Components.

You will need to complete these tasks:

1. From the Data Controls panel, select a data collection. For a Gantt chart, you can select a row set collection or a basic tree collection.

   Figure 42-9 shows an example where you could select the SalesRepViewObj1 data collection to create a scheduling Gantt chart that displays the orders each sales representative is responsible for managing.

   Figure 42-9 Data Collection for Scheduling Gantt Chart

   
   Description of "Figure 42-9 Data Collection for Scheduling Gantt Chart"
2. Drag the collection onto a JSF page and, from the context menu, choose Gantt > Scheduling.
3. In the Create Scheduling Gantt dialog, select the columns in the data collection that correspond to the following attributes:

   • Resource Id: The unique Id for the resource represented in the scheduling Gantt chart.

   • Working Start Time: The work start date of the scheduling Gantt chart.

   • Working End Time: The work end date of the scheduling Gantt chart.

   • Working Days of Week: Specifies a list of the working days of the week.

   • Is Container: Boolean. Specify whether or not the node definition is a container.

4. In the Tasks page, select the Task Accessor from the dropdown list, and then select the columns in the data collection that correspond to the following attributes:

   • Task Id: The unique Id for the task associated with a resource in the Gantt chart.

   • Task Type: The type used to specify the appearance of the task bar when it is rendered in the Gantt chart. If you do not bind the type to a column in your data collection, then all tasks default to Scheduled.

   • Start Time: The starting time of the task.

   • End Time: The ending time of the task.

   • Startup Time: The time to start up the task before beginning.

   • Shutdown Time: The time to shut down the task after completion.

   For example, the SOrdView2 view object includes attributes representing the date ordered and date shipped for each order assigned to a sales representative. Figure 42-10 shows the view object used for the task accessor.

   Figure 42-10 Scheduling Gantt Chart Task Accessor

   
   Description of "Figure 42-10 Scheduling Gantt Chart Task Accessor"
5. If the data collection has an accessor for dependent tasks, use the Dependent Tasks page to select the Dependent Task accessor, and then select the columns in the data collection that correspond to the following attributes:

   • Dependency Type: Specifies the type of the dependency. Valid values are start-start, start-finish, finish-finish, finish-start, start-before, start-together, finish-after, and finish-together.

   • From Task Id: Specifies the first task in the dependent relationship.

   • To Task Id: Specifies the last task in the dependent relationship.

   Dependent tasks are linked by their associations with the finish and start times between them.

6. If the data collection has an accessor for split tasks, use the Split Tasks page to select the Split Tasks accessor, and then select the columns in the data collection that correspond to the following attributes:

   • Split Task Id: The unique Id for a task split into two horizontal bars, usually linked by a line. The time between the bars represents idle time due to traveling or down time.

   • Start Time: The starting time of the split task.

   • End Time: The ending time of the split task.

7. If the data collection has an accessor for recurring tasks, use the Recurring Tasks page to select the Recurring Tasks accessor from the dropdown list, and then select the columns in the data collection that correspond to the following attributes:

   • Recurring Task Id: A unique Id for a task repeated in a Gantt chart, each instance with its own start and end date. Individual recurring tasks can optionally contain a subtype. All other properties of the individual recurring tasks come from the task which they are part of. However, if an individual recurring task has a subtype, this subtype overrides the task type.

   • Type: Specifies the type of the recurring task.

   • Start Time: The starting time of the recurring task.

   • End Time: The ending time of the recurring task.

8. If the data collection has an accessor for subresources, use the Subresources page to select the Subresources Accessor from the dropdown list, and then select the column in the data collection that corresponds to the Subresource Id, the unique Id for the list of subresources in the data collection.

   If you do not bind subresources, then the Gantt chart cannot render a hierarchy view of resources. If you bind subresources, then you can drill from resources to subresources in the hierarchy view of the Gantt chart.

9. In the Appearance page, specify the attributes that correspond to the Label of the task bar, and up to three icons to associate with the task bar.
10. In the Table Columns section, specify the columns that will appear in the list region of the Gantt chart on the left side of the splitter. Specify one row of information for each column that is to appear. Use the New icon to add new rows. Use the arrow icon to arrange the rows in the exact sequence that you want the columns to appear in the Gantt chart list. For each row, you provide the following specifications:

    • Display Label: Select the values for the headers of the columns in the Gantt chart list. If you select <default>, then the text for the header is automatically retrieved from the data binding.

    • Value Binding: Select the columns in the data collection to use for the column in the Gantt chart list. The available values are the same as those for the tasks group.

    • Component to Use: Select the type of component to display in the cell of the Gantt chart list. The default is the ADF Output Text component.

11. Click OK.

    Figure 42-11 shows the dialog used to create the scheduling Gantt chart from the data collection for sales representatives responsible for shipping orders.

    Figure 42-11 Create Scheduling Gantt Dialog

    
    Description of "Figure 42-11 Create Scheduling Gantt Dialog"
12. In the Structure window, right-click the dvt:schedulingGantt component and select Go to Properties.
13. In the Properties window, expand the Common section, and specify the dates (yyyy-mm-dd) for the StartTime and EndTime attributes representing the start and end dates respectively for the time period of the Gantt chart data.

    The dates that you specify determine the initial view that appears in the scheduling Gantt chart at runtime.

14. If you want to include a legend in the Gantt chart, right-click the scheduling Gantt chart node in the Structure window and choose Insert Inside Scheduling Gantt > Legend.

    The legend shows information about each symbol and color coded bar used to represent different tasks. It also shows detailed information about the task selected in the Gantt chart.

Dropping a scheduling Gantt chart from the Data Controls panel has the following effect:

• Creates the bindings for the Gantt chart and adds the bindings to the page definition file

• Adds the necessary code for the UI components to the JSF page

The example below shows the row set bindings that were generated for the scheduling Gantt chart that displays resources and orders shipped.

<bindings>
  <gantt IterBinding="SalesRepViewObj1Iterator" id="SalesRepViewObj1"
         xmlns="http://xmlns.oracle.com/adfm/dvt">
    <ganttDataMap>
      <nodeDefinition DefName="model.SalesRepViewObj" type="Resources">
        <AttrNames>
          <Item Value="Id" type="resourceId"/>
        </AttrNames>
        <Accessors>
          <Item Value="SOrdView" type="tasks"/>
        </Accessors>
      </nodeDefinition>
      <nodeDefinition type="Tasks" DefName="model.SOrdView">
        <AttrNames>
          <Item Value="Id" type="taskId"/>
          <Item Value="DateOrdered" type="startTime"/>
          <Item Value="DateShipped" type="endTime"/>
        </AttrNames>
      </nodeDefinition>
      <nodeDefinition type="Dependents">
        <AttrNames/>
      </nodeDefinition>
      <nodeDefinition type="SplitTasks">
        <AttrNames/>
      </nodeDefinition>
      <nodeDefinition type="RecurringTasks">
        <AttrNames/>
      </nodeDefinition>
      <nodeDefinition type="Subresources">
        <AttrNames/>
      </nodeDefinition>
    </ganttDataMap>
  </gantt>
</bindings>

The example below shows the code generated on the JSF page for the scheduling Gantt chart. This tag code contains settings for the overall start and end time for the scheduling Gantt chart. It also shows the time axis settings for the major time axis in weeks and the minor time axis in days. Finally, it lists the specifications for each column that appears in the list region of the Gantt chart.

<dvt:schedulingGantt id="gantt1"
                     value="#{bindings.SalesRepViewObj1.schedulingGanttModel}"
                     dataChangeListener="#{bindings.SalesRepViewObj1.
                         schedulingGanttModel.processDataChanged}"
                     var="row" startTime="2012-04-15" endTime="2013-05-15"
                     summary="#{viewcontrollerBundle.SCHEDULING_GANTT_CHART}">
  <f:facet name="major">
    <dvt:timeAxis scale="weeks" id="ta1"/>
  </f:facet>
  <f:facet name="minor">
    <dvt:timeAxis scale="days" id="ta2"/>
  </f:facet>
<f:facet name="nodeStamp">
  <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.FirstName.name}"
             sortable="false"
             headerText="#{bindings.SalesRepViewObj1.hints.FirstName.label}"
             id="c1">
    <af:outputText value="#{row.FirstName}"
                   shortDesc="#{bindings.SalesRepViewObj1.hints.
                       FirstName.tooltip}"
                   id="ot1"/>
  </af:column>
</f:facet>
  <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.LastName.name}"
             sortable="false"
             headerText="#{bindings.SalesRepViewObj1.hints.LastName.label}"
             id="c2">
    <af:outputText value="#{row.LastName}"
                   shortDesc="#{bindings.SalesRepViewObj1.hints.LastName.tooltip}"
                   id="ot2"/>
  </af:column>
  <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.Email.name}"
             sortable="false"
             headerText="#{bindings.SalesRepViewObj1.hints.Email.label}" id="c3">
    <af:outputText value="#{row.Email}"
                   shortDesc="#{bindings.SalesRepViewObj1.hints.Email.tooltip}"
                   id="ot3"/>
  </af:column>
</dvt:schedulingGantt>

When you use ADF data controls to data bind project and scheduling Gantt charts, a data change listener is automatically provided for data change events that require an update to row attributes, for example:

• DURATION_CHANGE: End time of a task; resize task bar

• PROGRESS_CHANGE: Progress of task; resize progress bar

• TIME_CHANGE: Start and end time of a task; move the task bar

At design time, the data change listener provides a built-in processDataChange method for project and scheduling Gantt bindings as illustrated in the example below.

<dvt:projectGantt id="gantt1"
                  dataChangeListener="#{bindings.GanttProjectView1.
                      projectGanttModel.processDataChanged}"
                  value="#{bindings.GanttProjectView1.projectGanttModel}"
                  ...
</dvt:projectGantt>

Data change events requiring row insertion or deletion are not supported, for example:

• TASK_SPLITTED: Split a task

• TASK_MERGED: Merge task with another task

• LINK: Link two tasks together

• UNLINK: Unlink two tasks linked together

• COPY: Copy one or more tasks or resources

• CREATE: Create a new task

• CREATE_RESOURCE: Create a new resource

• CUT: Cut one or more tasks or resources

• PASTE: Paste tasks or resources

• UPDATE: Update a task

• UPDATE_RESOURCE: Update a resource

• TASKS_PROPERTIES_UPDATE: Task properties dialog event

• INDENT: Indent a task or resource

• OUTDENT: Outdent a task or resource

• DELETE: Delete one or more tasks or resources

If you wish to configure your application to handle events that do not have a default implementation, specify a method in a backing bean and delegate to the built-in processDataChange method. For example, the first block of code below shows a dataChangeListener configured to use a handleDataChange method to handle a TASK_PROPERTIES_UPDATE event using the backing bean shown in the class code below.

<dvt:projectGantt id="gantt1"
                  dataChangeListener="#{backingBeanScope.backing_
                      projectGantt.handleDataChange}"
                  value="#{bindings.GanttProjectView1.projectGanttModel}"
                  ...
</dvt:projectGantt>

public void handleDataChange(DataChangeEvent evt)
{
    // handle events not supported by built-in "processDataChange" method
    int _type = evt.getActionType();
    if (_type == DataChangeEvent.TASK_PROPERTIES_UPDATE)
    {
        // handle event.
    }
    else  // delegate to built-in "processDataChange" method.
    {
				Application app = facesContext.getApplication();
        String expression =
            "#{bindings.GanttProjectView1.projectGanttModel.processDataChanged}";
        ExpressionFactory elFactory = app.getExpressionFactory();
        ELContext elContext = facesContext.getELContext();
        MethodExpression methodExp = elFactory.createMethodExpression(elContext,
            expression, null, new Class[] {DataChangeEvent.class});
        methodExp.invoke(elContext, new Object[] {evt});
    }
}

When you use ADF data controls to create a timeline, JDeveloper:

• Defines the bindings for the timeline in the page definition file of the JSF page, and

• Inserts code in the JSF page for the DVT timeline components.

The example below shows the bindings defined in the page definition file of the JSF page for the Summit ADF DVT sample timeline in Figure 42-12.

<bindings>
  <tree IterBinding="SEmpView1Iterator" id="SEmpView1" ChangeEventPolicy="ppr">
    <nodeDefinition DefName="model.SEmpView" Name="SEmpView1">
      <AttrNames>
        <Item Value="DeptId"/>
        <Item Value="FirstName"/>
        <Item Value="Id"/>
        <Item Value="LastName"/>
        <Item Value="StartDate"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
</bindings>

The example below shows the code inserted in the JSF page for the example timeline in Figure 42-12.

<dvt:timeline id="tl1" startTime="2010-01-01" endTime="2011-12-31" itemSelection="multiple"
              binding="#{extEditor.component}" summary="Timeline Component Demo">
    <dvt:timeSeries id="ts1" var="evt" value="#{timeline.model}">
        <dvt:timeItem id="ti1" value="#{evt.date}" title="#{evt.description}" description="#{evt.date}" 
                      thumbnail="/resources/images/timeline/employment.png"/>
    </dvt:timeSeries>
    <dvt:timeAxis id="ta1" scale="weeks" zoomOrder="quarters months weeks days"/>
    <dvt:timelineOverview id="ov1">
        <dvt:timeAxis id="ta2" scale="years"/>
    </dvt:timelineOverview>
</dvt:timeline>

When you use the Data Controls panel to create a dual timeline, you can configure the same or different data collections to configure the two timeline series and specify the timeline item display attributes and overview marker for each one. JDeveloper automatically lists any data collection from the application module that includes at least one qualifying date-based attribute from which to choose in the Create Timeline wizard.

The example below shows the sample code for the dual timeline displayed in Figure 42-13.

<dvt:timeline id="tl1" startTime="2000-01-01" endTime="2011-12-31"
                       inlineStyle="width:1024px;height:500px" itemSelection="single" currentTime="2010-04-01">
    <dvt:timeSeries id="ts1" var="evt" value="#{timeline.firstModel}">
        <dvt:timeItem id="ti1" value="#{evt.date}" group="#{evt.group}" title="#{evt.description}" 
                      description="#{evt.date}" thumbnail="/resources/images/timeline/#{evt.type}.png">
            <f:facet name="overviewItem">
                <dvt:marker id="m1" shape="circle" fillColor="#ff0000"/>
            </f:facet>
        </dvt:timeItem>
    </dvt:timeSeries>
    <dvt:timeSeries id="ts2" var="evt" value="#{timeline.secondModel}">
        <dvt:timeItem id="ti2" value="#{evt.date}" title="#{evt.description}" 
                      description="#{evt.date}" thumbnail="/resources/images/timeline/#{evt.type}.png">
            <f:facet name="overviewItem">
                <dvt:marker id="m2" shape="circle" fillColor="#0000ff"/>
            </f:facet>
        </dvt:timeItem>
   </dvt:timeSeries>
   <dvt:timeAxis id="ta1" scale="quarters" zoomOrder="quarters months weeks days"/>
   <dvt:timelineOverview id="ov1">
       <dvt:timeAxis id="ta2" scale="years"/>
   </dvt:timelineOverview>
</dvt:timeline>

For information about the data requirements, tag structure, and options for customizing the look and behavior of the component, see the Using Timeline Components chapter in the Developing Web User Interfaces with Oracle ADF Faces.