Creating an ADF Gantt Chart Using Gantt Charts as a Drop Target or Drag Source

Using ADF Gantt Chart Components 28-17 For tasks that have more than one bar, such as a split or recurring task, properties are defined for each individual bar. Example 28–9 shows sample code to define the properties for a custom task type in the .jspx file. Example 28–9 Sample Code to Define Custom Task Type Properties af:document f:facet name=metaContainer f:verbatim [CDATA[ style type=textcss .onhold { background-image:urlimagesBar_Image.png; background-repeat:repeat-x; height:13px; border:solid 1px 000000; } style ]] f:verbatim f:facet shows sample code to define a TaskbarFormat object fill and border color and register the object with the taskbarFormatManager. Example 28–10 Custom TaskbarFormat Object Registered with TaskbarFormat Manager TaskbarFormat _custom = new TaskbarFormatTask on hold, null, onhold, null; _gantt.getTaskbarFormatManager.registerTaskbarFormatFormatId, _ custom; TaskbarFormat _custom = new TaskbarFormatTask on hold, FF00FF, null, 00FFDD, 13; _gantt.getTaskbarFormatManager.registerTaskbarFormatFormatId, _custom;

28.7.2 How to Specify Custom Data Filters

You can change the display of data in a Gantt chart using a data filter dropdown list on the toolbar. Gantt charts manage all predefined and user-specified data filters using a FilterManager. Filter objects contain information including: ■ A unique ID for the filter ■ The label to display for the filter in the dropdown list ■ An optional JavaScript method to invoke when the filter is selected You can define your own filter by creating a filter object and then registering the object using the addFilter method on the FilterManager. Example 28–11 shows sample code for registering a Resource filter object with the FilterManager. Example 28–11 Custom Filter Object Registered with FilterManager FilterManager _manager = m_gantt.getFilterManager; ID for filter display label javascript callback optional _manager.addFilternew FilterRESOURCE_FILTER, Resource..., showResourceDialog; 28-18 Web User Interface Developers Guide for Oracle Application Development Framework When the user selects a filter, a FilterEvent is sent to the registered FilterListener responsible for performing the filter logic. The filterListener attribute on the Gantt chart component is used to register the listener. When implemented by the application, the data model is updated and the Gantt chart component displays the filtered result. Example 28–12 shows sample code for a FilterListener. Example 28–12 FilterListener for Custom Filter public void handleFilterFilterEvent event { String _type = event.getType; if FilterEvent.ALL_TASKS.equals_type { update the gantt model as appropriate } } To specify a custom data filter: 1. In the Structure window, right-click the Gantt chart node and choose Go to Properties . 2. In the Behavior category of the Property Inspector, in the FilterListener field, enter a method reference to the FilterListener you defined. For example, {project.handleFilter}.

28.7.3 How to Add a Double-Click Event to a Task Bar

Gantt chart components support a double-click event on a task bar. For example, you may want to display detailed information about a task in a popup window. Figure 28–8 shows a project Gantt chart with a double-click event on a task bar. Figure 28–8 Task Bar with Double-Click Event Example 28–13 show sample code for adding a double-click event to a task bar. Example 28–13 Sample Code for Double-Click Event dvt:projectGantt id=projectGanttDoubleClick startTime=2008-04-01 endTime=2008-09-30 value={projectGanttDoubleClick.model} Using ADF Gantt Chart Components 28-19 var=task doubleClickListener={projectGanttDoubleClick.handleDoubleClick} dvt:projectGantt Implement the handleDoubleClick method in a backing bean, for example: public void handleDoubleClickDoubleClick event

28.8 Specifying Nonworking Days, Read-Only Features, and Time Axes

You can customize a Gantt chart to display nonworking days of the week, turn off user interaction features, and specify the time axes.

28.8.1 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.

28.8.1.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 node and choose Go to Properties. 2. In the Appearance category of the Property Inspector, in the NonWorkingDaysOfWeek field, 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. Alternatively, 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 getNonWorkingDaysOfWeek, then the setting for the nonWorkingDaysOfWeek attribute becomes: {myBackingBean.nonWorkingDays}. Example 28–14 shows sample code in a backing bean. Example 28–14 Backing Bean to Identify Nonworking Days public int[] getNonWorkingDaysOfWeek { if locale == Locale.EN_US return new int[] {Calendar.SATURDAY, Calendar.SUNDAY}; else ....... } 3. Optionally, specify a custom color in the NonWorkingDaysColor field. The value you enter for this attribute must be a hexadecimal color string.

28.8.1.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. 28-20 Web User Interface Developers Guide for Oracle Application Development Framework To identify specific dates as nonworking days: 1. In the Structure Window, right-click a Gantt chart and choose 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. 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 hexadecimal color string.

28.8.2 How to Apply Read-Only Values to Gantt Chart Features

User interactions with a Gantt chart can be customized to disable features by setting the featuresOff property to specify read-only values. Table 28–5 shows the valid values and the disabled feature for the Gantt chart types. To set read-only values on Gantt chart features: 1. In the Structure window, right-click the Gantt chart node and choose Go to Properties .

2. In the Behavior attributes category of the Property Inspector, for the

featuresOff attribute, enter one or more String values to specify the Gantt chart features to disable. For example, to disable user interactions for editing the data model, printing, or changing the zoom level of a Gantt chart, use the following setting for the featuresOff attribute: edit print zoom Alternatively, you can create a method in a backing bean to programmatically identify the features to be disabled. For example, if you put the code in a backing Table 28–5 Valid Values for Read-Only Attributes Value Feature Disabled clipboard Cut, copy, and paste tasks for all Gantt charts. edit Changes to the data model for all Gantt charts. indenting Indent and outdent tasks for project and scheduling Gantts charts. legend Hide and show legend and task information for all Gantt charts. linking Link and unlink tasks for scheduling Gantt charts. print Print task for all Gantt charts. properties Show property dialogs for all Gantt charts. split Split task for project Gantt. undo Undo and redo tasks for all Gantt charts. view Show as list, Show as hierarchy, Columns, Expand and Collapse tasks for all Gantt charts. zoom Changes to the zoom level for all Gantt charts. Using ADF Gantt Chart Components 28-21 bean in a method called whatToTurnOff that returns a String array of the values, then the setting for the featuresOff attribute becomes: {BackingBean.whatToTurnOff}.

28.8.3 Customizing the Time Axis of a Gantt Chart

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 axis settings for all Gantt charts are: ■ Major time axis: Weeks ■ Minor time axis: Days 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 dvt:timeAxis component are listed from highest to lowest: ■ twoyears ■ year ■ halfyears ■ quarters ■ twomonths ■ months ■ twoweeks ■ weeks ■ days ■ sixhours ■ threehours ■ hours ■ halfhours ■ quarterhours Example 28–18 shows sample code to set the time axis of a Gantt chart to use months as a major time axis and weeks as the minor time axis. Example 28–15 Gantt Chart Time Axis Set to Months and Weeks f:facet name=major dvt:timeAxis scale=months f:facet f:facet name=minor dvt:timeAxis scale=weeks f:facet The time units you specify for the major and minor axes apply only to the initial display of the Gantt chart. At runtime, the user can zoom in or out on a time axis to display the time unit level at a different level. 28-22 Web User Interface Developers Guide for Oracle Application Development Framework

28.8.3.1 How to Create and Use a Custom Time Axis

You can create a custom time axis for the Gantt chart and specify that axis in the scale attribute of dvt:timeAxis. The custom time axis will be added to the Time Scale dialog at runtime. To create and use a custom time axis: 1. Implement the CustomTimescale.java interface to call the method getNextDateDate currentDate in a loop to build the time axis. Example 28–16 show sample code for the interface. Example 28–16 Interface to Build Custom Dates public interface CustomTimescale { public String getScaleName; public Date getPreviousDateDate ganttStartDate; public Date getNextDateDate currentDate; public String getLabelDate date; }

2. In the Structure window, right-click a Gantt chart node and choose Go to

Properties.

3. In the Other attributes category of the Property Inspector, for the

CustomTimeScales attribute, register the implementation of the interface for the custom time axis. The customTimeScales attributes value is a java.util.Map object. The specified map object contains pairs of keyvalues. The key is the time scale name fiveyears, and the value is the implementation of the CustomTimeScale.java interface. For example: customTimesScales={project.customTimescales}

4. Also in the Property Inspector, set the Scale attribute for major and minor time

axis, and specify the ZoomOrder attribute to zoom to the custom times scales. Example 28–17 shows sample code for setting a threeyears minor time axis and a fiveyears major time axis. Example 28–17 Custom Time Axis f:facet name=major dvt:timeAxis scale=fiveyears id=ta1 zoomOrder=fiveyears threeyears years halfyears quarters months weeks days hours f:facet f:facet name=minor dvt:timeAxis scale=threeyears id=ta2 f:facet

28.9 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. Using ADF Gantt Chart Components 28-23

28.9.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 printed copy 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 if the column should be visible in the printed Gantt chart: _printer.setColumnVisibleo, 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 the GanttPrinter class: _printer.setMargin25, 16, 66, 66; ■ Page size : The setPageSize method of the GanttPrinter class 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 the GanttPrinter class: _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 28–18 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 the GanttPrinter class. Example 28–18 Code for Setting the Time Period Option for Printing a Gantt Chart _printer.setStartTimestartDate; _printer.setEndTimeendDate;

28.9.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. Access the servlet’s output stream. 2. Generate the FO. This process includes creating an instance of the GanttPrinter class and entering the code for any print options that you want to use. 3. Generate the PDF. Example 28–19 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. 28-24 Web User Interface Developers Guide for Oracle Application Development Framework Example 28–19 Sample ActionListener for Handling the Gantt Chart Print Event public void handleActionGanttActionEvent evt { if GanttActionEvent.PRINT == evt.getActionType { FacesContext _context = FacesContext.getCurrentInstance; ServletResponse _response = ServletResponse _context.getExternalContext.getResponse; _response.setContentTypeapplicationpdf; ServletOutputStream _sos = _response.getOutputStream; Generate FO. GanttPrinter _printer = new GanttPrinterm_gantt; Set column visibility by column index. _printer.setColumnVisible0, false; Set start and end date. _printer.setStartTimestartDate; _printer.setEndTimeendDate; Set top, bottom, left, and right margins in pixels. _printer.setMargin25, 16, 66, 66; Set height and width in pixels. _printer.setPageSize440, 660; File _file = File.createTempFilegantt, fo; OutputStream _out = new FileOutputStream_file; _printer.print_out; _out.close; generate PDF. FOProcessor _processor = new FOProcessor; _processor.setDatanew FileInputStream_file,UTF-8; _processor.setOutputFormatFOProcessor.FORMAT_PDF; _processor.setOutput_sos; _processor.generate; _context.responseComplete; } }

28.10 Using Gantt Charts as a Drop Target or Drag Source

You can add drag and drop functionality that allows users to drag an item from a collection, for example, a row from a table, and drop it into another collection component, such as a tree. 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. The application must register the Gantt chart component as a drag source or drop target by adding the af:collectionDragSource or af:collectionDropTarget behavior tags respectively as a child to the Gantt tag. For example, you can use the af:collectionDragSource to register a drop listener that would be invoked when a project Gantt chart task is dragged from a table region onto a separate table. shows a project Gantt chart with tasks dragged from the table region onto a table of tasks. Using ADF Gantt Chart Components 28-25 Figure 28–9 Project Gantt Chart as Drag Source Example 28–20 shows sample code for adding drag and drop functionality to a scheduling Gantt chart. Example 28–20 Sample Code for Adding Drag and Drop Functionality dvt:schedulingGantt value={test.treeModel} ............. af:schedulingDragSource actions=COPY MOVE modelName=treeModel dvt:projectGantt Example 28–21 shows sample code for the listener method for handling the drop event. Example 28–21 Event Handler Code for a dropListener for a Collection public DnDAction onTableDropDropEvent evt { Transferable _transferable = evt.getTransferable; Get the drag source, which is a row key, to identify which row has been dragged. RowKeySetImpl _rowKey = RowKeySetImpl_ transferable.getTransferDataDataFlavor.ROW_KEY_SET_FLAVOR.getData; Set the row key on the table model source to get the data. m_tableModel is the model for the Table the drag source. object _key = _rowKey.iterator.next; m_tableModel.setRowKey_key; See on which resource this is dropped specific for scheduling Gantt chart. String _resourceId = _transferable.getDataString.class; Resource _resource = findResourceById_resourceId; See on what time slot did this dropped. 28-26 Web User Interface Developers Guide for Oracle Application Development Framework Date _date = _transferable.getDataDate.class; Add code to update your model here. Refresh the table and the Gantt chart. RequestContext.getCurrentInstance.addPartialTarget_evt.getDragComponent; RequestContext.getCurrentInstance.addPartialTargetm_gantt; Indicate the drop is successful. return DnDAction.COPY; } For a detailed procedure about adding drag and drop functionality for collections, see Section 32.4, Adding Drag and Drop Functionality for Collections . 29 Using ADF Hierarchy Viewer Components 29-1 29 Using ADF Hierarchy Viewer Components This chapter describes how to use an ADF hierarchy viewer component to display data, and provides the options for hierarchy view customization. This chapter includes the following sections: ■ Section 29.1, Introduction to Hierarchy Viewers ■ Section 29.2, Data Requirements for Hierarchy Viewers ■ Section 29.3, Managing Nodes in a Hierarchy Viewer ■ Section 29.4, Navigating in a Hierarchy Viewer ■ Section 29.5, Adding Interactivity to a Hierarchy Viewer Component ■ Section 29.6, Using Panel Cards ■ Section 29.7, Customizing the Appearance of a Hierarchy Viewer ■ Section 29.8, Adding Search to a Hierarchy Viewer For information about the data binding of ADF hierarchy viewers, see the Creating Databound Hierarchy Viewers section in the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework.

29.1 Introduction to Hierarchy Viewers

A hierarchy viewer component can be used to visually display hierarchical data. Hierarchical data contains master-detail relationships within the data. For example, you could create a hierarchy viewer component that renders an organization chart from a data collection that contains information about the relationships between employees in an organization.

29.1.1 Understanding the Hierarchy Viewer Component

JDeveloper generates the following elements in JSF pages when you drag and drop components from the Component Gallery onto a JSF page or when you use the Create Hierarchy Viewer dialog to create a hierarchy viewer component as described in the Creating Databound Hierarchy Viewers section in the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework. ■ dvt:hierarchyViewer This element wraps the dvt:node and the dvt:link elements. ■ dvt:node 29-2 Web User Interface Developers Guide for Oracle Application Development Framework A node is a shape that references the data in a hierarchy, for example, employees in an organization or computers in a network. You configure the child elements of the dvt:node element to reference whatever data you want to display. The dvt:node element supports the use of one or more f:facet elements that display content at different zoom levels 100, 75, 50, and 25. The f:facet element supports the use of many ADF Faces components, such as af:outputText, af:image, and af:panelGroupLayout, in addition to the ADF Data Visualization dvt:panelCard component. At runtime, the node contains controls that allow users to navigate between nodes and to show or hide other nodes by default. For information about specifying node content and defining zoom levels, see Section 29.3.1, How to Specify Node Content. ■ dvt:link You set values for the attributes of the dvt:link element to connect one node with another node. For information about how to customize the appearance of the link and add labels, see Section 29.7.4, How to Configure the Display of Links and Labels. ■ dvt:panelCard The panel card element provides a method to dynamically switch between multiple sets of content referenced by a node element using animation by, for example, horizontally sliding the content or flipping a node over. The f:facet tag for each zoom level supports the use of a dvt:panelCard element that contains one or more af:showDetailItem elements defining the content to be displayed at the specified zoom level. At runtime, the end user uses the controls on the node to dynamically switch between the content that the af:showDetailItem elements reference. For more information, see Section 29.6, Using Panel Cards. The hierarchy viewer component uses elements such as af:panelGroupLayout, af:spacer, and af:separator to define how content is displayed in the nodes. Example 29–1 shows the code generated when the component is created by insertion from the Component Palette. Code related to the hierarchy viewer elements is highlighted in the example. Example 29–1 Hierarchy Viewer Sample Code dvt:hierarchyViewer id=hierarchyViewer1 layout=hier_vert_top inlineStyle=width:100;height:600px; dvt:link linkType=orthogonalRounded id=l1 dvt:node width=233 height=330 id=n1 f:facet name=zoom100 af:panelGroupLayout layout=vertical inlineStyle=width:100;height:100;padding:5px id=pgl2 af:panelGroupLayout layout=horizontal id=pgl3 af:panelGroupLayout inlineStyle=width:85px;height:120px Note: Unlike the other elements, the dvt:panelCard element is not generated if you choose the default quick layout option when using the Component Gallery to create a hierarchy viewer. For more information see, Section 29.1.3, Available Hierarchy Viewer Layout Options. Using ADF Hierarchy Viewer Components 29-3 id=pgl4 af:image id=i1 af:panelGroupLayout af:spacer width=5 height=5 id=s2 af:panelGroupLayout layout=vertical id=pgl1 af:outputText value= attribute value1 inlineStyle=font-weight:bold;font-size:20px;color:383A47 id=ot5 af:outputText value= attribute value2 inlineStyle=font-size:20px;color:383A47 id=ot9 af:outputText value= attribute value3 inlineStyle=font-size:11px;font-style:italic;color:383A47 id=ot2 af:panelGroupLayout af:panelGroupLayout af:spacer height=5 id=s1 af:separator id=s4 af:spacer height=5 id=s3 dvt:panelCard effect=slide_horz inlineStyle=border-width:1px;border-color:CCCCCC; font-size:16px;font-weight:bold;color:5a6a7a id=pc1 af:showDetailItem text=first group title inlineStyle=font-weight:bold;font-size:16px;color:5a6a7a id=sdi1 af:panelFormLayout inlineStyle=width:100;height:100;padding:5px id=pfl1 af:panelLabelAndMessage label=attribute label4 labelStyle=font-size:14px;color:5A6A7A id=plam2 af:outputText value=attribute value4 inlineStyle=font-size:14px;color:383A47 id=ot3 af:panelLabelAndMessage af:panelLabelAndMessage label=attribute label5 labelStyle=font-size:14px;color:5A6A7A id=plam6 af:outputText value=attribute value5 inlineStyle=font-size:14px;color:383A47 id=ot8 af:panelLabelAndMessage af:panelLabelAndMessage label=attribute label6 labelStyle=font-size:14px;color:5A6A7A id=plam5 af:outputText value=attribute value6 inlineStyle=font-size:14px;color:383A47 id=ot6 af:panelLabelAndMessage af:panelFormLayout af:showDetailItem af:showDetailItem text=second group title inlineStyle=font-weight:bold; font-size:16px;color:5a6a7a id=sd12 af:panelFormLayout inlineStyle=width:100;height:100;padding:5px id=pfl2 af:panelLabelAndMessage label=attribute label7 labelStyle=font-size:14px;color:5A6A7A id=plam3 af:outputText value=attribute value7 inlineStyle=font-size:14px;color:383A47 id=ot7 af:panelLabelAndMessage af:panelLabelAndMessage label=attribute label8 labelStyle=font-size:14px;color:5A6A7Aid=plam4 af:outputText value=attribute value8 inlineStyle=font-size:14px;color:383A47 id=ot1 af:panelLabelAndMessage 29-4 Web User Interface Developers Guide for Oracle Application Development Framework af:panelLabelAndMessage label=attribute label9 labelStyle=font-size:14px;color:5A6A7A id=plam1 af:outputText value=attribute value9 inlineStyle=font-size:14px;color:383A47 id=ot4 af:panelLabelAndMessage af:panelFormLayout af:showDetailItem dvt:panelCard af:panelGroupLayout f:facet dvt:node dvt:hierarchyViewer

29.1.2 Hierarchy Viewer Elements and Terminology

A hierarchy viewer visually displays hiearchical data and the master-detail relationships. Figure 29–1 shows a segment of a hierarchy viewer component at runtime that includes a control panel, a number of nodes, and links that connect the nodes. Figure 29–1 Hierarchy Viewer Component with Control Panel and Nodes The Control Panel provides controls so that a user can manipulate the position and appearance of a hierarchy viewer component at runtime. By default, it appears in a hidden state in the upper left-hand corner of the hierarchy viewer component, as illustrated by Figure 29–2 . Using ADF Hierarchy Viewer Components 29-5 Figure 29–2 Control Panel in Hidden State You cannot configure the Control Panel to appear in another location. Users click the Hide or Show Control Panel button shown in Figure 29–2 to hide or expand the Control Panel. Figure 29–3 shows the expanded Control Panel. Figure 29–3 Control Panel in Show State You can configure the hierarchy viewer component so that the Control Panel does not appear to the user at runtime. For information about the procedure, see Section 29.7.3, How to Configure the Display of the Control Panel. Table 29–1 describes the functionality that the controls in the Control Panel provide to users. The Panel Selector is automatically enabled if a node in your hierarchy viewer component contains a dvt:panelCard element with one or more af:showDetailItem elements. The Layout Selector appears automatically if the hierarchy viewer component uses one of the following layouts: ■ Vertical top down ■ Horizontal left to right ■ Tree ■ Radial ■ Circle For more information about layouts for a hierarchy viewer component, see Section 29.1.3, Available Hierarchy Viewer Layout Options. Table 29–1 Elements in the Control Panel Control Name Description Pan Control Allows user to reposition the hierarchy viewer component within the viewport.