Oracle® Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework 11g Release 1 (11.1.1) B31974-03 |
|
![]() Previous |
![]() Next |
This chapter describes how to use the Data Controls panel to create ADF Data Visualization components. These components allow you to display and analyze data through a wide variety of graphs, several kinds of gauges, a pivot table, geographic maps with multiple layers of information, several kinds of Gantt charts, and a hierarchy viewer.
This chapter includes the following sections:
ADF Data Visualization components provide extensive graphical and tabular capabilities for visually displaying and analyzing data.
Both ADF graphs and ADF gauges render graphical representations of data. However, graphs (which produce more than 50 types of charts) allow you to evaluate multiple data points on multiple axes in a variety of ways. Many graph types assist in the comparison of results from one group against the results from another group. In contrast, gauges focus on a single data point and examine that point relative to minimum, maximum, and threshold indicators to identify problems.
The ADF pivot table produces a grid that supports multiple layers of data labels on the row edge or the column edge of the grid. This component also provides the option of automatically generating subtotals and totals for grid data. ADF pivot tables let you switch data labels from one edge to another to obtain different views of your data. For example, a pivot table might initially display products within region in its rows while showing years in its columns. If you switch region to the column edge so that columns display year within region, then data cells in the table show totals for products by year within region. At runtime, end users can click buttons that appear in the inner column labels to sort rows in ascending or descending order. If an end user clicks one of these buttons, it changes the default behavior where changes to the outer row labels sort rows.
The ADF geographic map is a component that represents business data and allows you to superimpose multiple layers (also referred to as themes) of information on a single map. For example, a map of the United States might use a color theme that provides varying color intensity to indicate the popularity of a product within each state, a pie chart theme that shows sales within product category, and a point theme that identifies the exact location of each warehouse. When all three themes are superimposed on the United States map, you can easily evaluate whether there is sufficient inventory to support the popularity level of a product in specific locations.
There are three types of ADF Gantt chart components; these are the project Gantt chart (which focuses on project management), the scheduling Gantt chart, and the resource utilization Gantt chart (which both focus on resource management). Each Gantt chart shows the following regions combined with a splitter:
List region content: The left side of the splitter provides a list of tasks (for the project Gantt chart) and a list of resources (for the resource utilization and scheduling Gantt charts). This region can display any number of additional columns of related information.
Chart region content: The right side of the splitter consists of an area in which task progress, resource utilization, or resource progress is graphed over time. The ability of the Gantt chart to zoom in or out on its time axis lets you view management information across the desired time period.
The ADF hierarchy viewer component produces a graphic that displays hierarchical data as a set of linked shapes. The shapes and links correspond to the elements and relationships in the data. For example, a hierarchy viewer component might be used to generate an organizational chart based on employee data. At runtime, end users can pan and zoom the graphic and expand, select, and navigate the management hierarchy that the graphic displays.
Each ADF Data Visualization component needs to be bound to data before it can be rendered because the appearance of the components is dictated by the data that is displayed. This chapter describes how to bind each component to a data source.
Figure 25-1 shows a number of the ADF Data Visualization components at runtime including a bar graph, a pie chart graph, a dial gauge, and a status meter gauge.
When you create a graph, a Component Gallery allows you to choose from a wide number of graph categories, graph types, and layout options. Graph categories group together one or more different types of graph. For example, the Scatter/Polar category includes the following types of graph:
Scatter
Dual-Y Scatter
Polar
Explore the Component Gallery that appears when you create a graph to view all available graph categories, types, and descriptions for each one. Figure 25-2 shows the Component Gallery that appears for ADF graphs.
Note: Some graph types require very specific kinds of data. If you bind a graph to a data collection that does not contain sufficient data to display the graph type requested, then the graph is not displayed and a message about insufficient data appears. |
Table 25-1 lists the categories that appear in the Component Gallery for ADF graphs. Each category has one or more graph types associated with it.
Table 25-1 ADF Graph Categories in the Component Gallery
Category | Description |
---|---|
Area |
Creates a graph in which data is represented as a filled-in area. Use area graphs to show trends over time, such as sales for the last 12 months. Area graphs require at least two groups of data along an axis. The axis is often labeled with time periods such as months. |
Bar |
Creates a graph in which data is represented as a series of vertical bars. Use to examine trends over time or to compare items at the same time, such as sales for different product divisions in several regions. |
Bar (Horizontal) |
Creates a graph that displays bars horizontally along the y-axis. Use to provide an orientation that allows you to show trends or compare values. |
Bubble |
Creates a graph in which data is represented by the location and size of round data markers (bubbles). Use to show correlations among three types of values, especially when you have a number of data items and you want to see the general relationships. For example, use a bubble graph to plot salaries (x-axis), years of experience (y-axis), and productivity (size of bubble) for your work force. Such a graph allows you to examine productivity relative to salary and experience. |
Combination |
Creates a graph that uses different types of data markers (bars, lines, or areas) to display different kinds of data items. Use to compare bars and lines, bars and areas, lines and areas, or all three. |
Funnel |
Creates a graph that is a visual representation of data related to steps in a process. The steps appear as vertical slices across a horizontal cylinder. As the actual value for a given step or slice approaches the quota for that slice, the slice fills. Typically a funnel graph requires actual values and target values against a stage value, which might be time. For example, use this component to watch a process (such as a sales pipe line) move towards a target across the stage of the quarters of a fiscal year. |
Line |
Creates a graph in which data is represented as a line, as a series of data points, or as data points that are connected by a line. Line graphs require data for at least two points for each member in a group. For example, a line graph over months requires at least two months. Typically a line of a specific color is associated with each group of data such as the Americas, Europe, or Asia. Use to compare items over the same time. |
Pareto |
Creates a graph in which data is represented by bars and a percentage line that indicates the cumulative percentage of bars. Each set of bars identifies different sources of defects, such as the cause of a traffic fatality. The bars are arranged by value, from the largest number to the lowest number of incidents. A pareto graph is always a dual-y graph in which the first y-axis corresponds to values that the bars represent and the second y-axis runs from 0 to 100% and corresponds to the cumulative percentage values. Use the pareto graph to identify and compare the sources of defects. |
Pie |
Creates a graph in which one group of data is represented as sections of a circle causing the circle to look like a sliced pie. Use to show relationship of parts to a whole such as how much revenue comes from each product line. |
Radar |
Creates a graph that appears as a circular line graph. Use to show patterns that occur in cycles, such as monthly sales for the last three years. |
Scatter/Polar |
Creates a graph in which data is represented by the location of data markers. Use to show correlation between two different kinds of data values such as sales and costs for top products. Scatter graphs are especially useful when you want to see general relationships among a number of items. |
Stock |
Creates a graph in which data shows the high, low, and closing prices of a stock. Each stock marker displays three separate values. |
Figure 25-3 shows the bar graph that appears in the Hot Items Statistics page of the StoreFrontModule
application. This graph displays the quantity of orders for each product so that you can easily identify the items that have been ordered most frequently.
For information about customizing graphs after the data-binding is completed, see the "Using ADF Graph Components" chapter in Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
Graphs are based on data collections. Using data controls in Oracle ADF, Oracle JDeveloper makes this a declarative task. You drag and drop a collection from the Data Controls panel.
To create a databound graph:
From the Data Controls panel, select a collection.
For example, to create the bar graph that displays the order count for each product in the Hot Items Statistics page of the StoreFrontModule
application, you would select the ProductOrdersCount
collection. Figure 25-4 shows the ProductOrdersCount
collection in the Data Controls panel.
Drag the collection onto a JSF page and, from the context menu, choose Graphs to display the Component Gallery.
Select a graph category and a graph type from the Component Gallery and click OK.
For information about the graph categories and graph types that appear in the Component Gallery, see Table 25-1, "ADF Graph Categories in the Component Gallery".
The name of the dialog that appears depends on the category and type of graph that you select. For example, if you select Bar (Horizontal) as the category and Bar as the type, then the name of the dialog that appears is Create Horizontal Bar Graph.
Do the following in the dialog to configure the graph to display data:
Drag attributes from the Available list to the Areas or X Axis input fields, depending on where you want the values for the attributes to appear at runtime.
In the Attribute Labels field, enter a value or select a value from the dropdown list in the Label column to specify the label that appears at runtime.
If you want to change from the default selection of Typed Attributes to Name-Value Pairs to configure how data points are stored in a collection, then click the Change Data Shape button. A dialog appears that presents you with the following options:
Typed Attributes
Each kind of data point in the collection is represented by a different attribute. This option is also valid when there is only a single kind of data point in the graph.
For example, if you have data points for Estimated Value and Actual Value, then select Typed Attributes only if you have one attribute for the estimated value and a second attribute for the actual value.
Name-Value Pairs
Indicates that there are multiple kinds of data points, but only a single attribute to designate these points. In this case, the single attribute has values that identify each kind of data point.
For example, the attribute might have the value EST for a data point that represents an estimated value and ACT for a data point that represents an actual value.
Figure 25-5 shows the Create Horizontal Bar Graph that generates a graph using data from the ItemsOrdered
attribute in the ProductOrdersCount
data collection. The ProductName
attribute provides labels for the displayed data.
Optionally, click the Preview tab to display a live preview of the bar graph and its data. If necessary, go back to the Configuration tab so that you can adjust the bar graph specifications.
Click OK.
After completing the data binding dialog, you can use the Property Inspector to specify settings for the graph attributes and you can also use the child tags associated with the graph tag to customize the graph further.
Dropping a graph from the Data Controls panel has the following effect:
Creates the bindings for the graph and adds the bindings to the page definition file
Adds the necessary code for the UI components to the JSF page
The data binding XML that JDeveloper generates varies depending on the type of graph you select. The XML represents the physical model of the specific graph type you create. Example 25-1 shows the bindings that JDeveloper generated in the page definition file where a horizontal bar graph was created using data from the ItemsOrdered
attribute in the ProductOrdersCount
data collection.
Example 25-1 Binding XML for an ADF Bar (Horizontal) Graph
<graph IterBinding="ProductOrdersCountIterator" id="ProductOrdersCount" xmlns="http://xmlns.oracle.com/adfm/dvt" type="BAR_HORIZ_CLUST"> <graphDataMap leafOnly="true"> <series> <data> <item value="ItemsOrdered"/> </data> </series> <groups> <item value="ProductName"/> </groups> </graphDataMap> </graph>
Example 25-2 shows the code generated for a horizontal bar graph when you drag the ProductOrdersCount
data collection onto a JSF page.
Example 25-2 JSF Code for an ADF Bar (Horizontal) Graph
<dvt:horizontalBarGraph id="horizontalBarGraph1" value="#{bindings.ProductOrdersCount.graphModel}" subType="BAR_HORIZ_CLUST"> <dvt:background> <dvt:specialEffects/> </dvt:background> <dvt:graphPlotArea/> <dvt:seriesSet> <dvt:series/> </dvt:seriesSet> <dvt:o1Axis/> <dvt:y1Axis/> <dvt:legendArea automaticPlacement="AP_NEVER"/> </dvt:horizontalBarGraph>
You can use the row selection listener of a graph (which serves as a master view) to enable clicks on a bar, slice, or other graph data element to update the data in another ADF component (which serves as a detail view). For example, a click on a bar that represents sales for a given product in a graph might cause the display of the detailed sales data related to the product in a pivot table.
The following requirements must be met to achieve this master-detail processing declaratively:
You must use the same tree data control to provide data for both views as follows:
Bind the graph as a row set to one level in the data control.
Bind the other ADF view (such as a table or pivot table) to a lower level in the tree data control.
Set a value for the clickListener
attribute of the graph tag in the Behavior page of the Property Inspector and use the processClick
method that is already part of the graph binding.
For example, if the value
attribute of the graph tag is value="#{bindings.myGraph.graphModel}"
, then the clickListener
attribute should be clickListener="#{bindings.myGraph.graphModel.processClick}"
.
Ensure that the partialTriggers
attribute on the parent tag for the detail component is set correctly. It should be set to the ID of the graph component.
You do not have to write Java code for handling clicks on data elements in the graph. The processClick
event on the graph binding recognizes click events on data component in a graph and performs the necessary processing.
A gauge plots one data point with indication of whether the data point falls in an acceptable or unacceptable range. One databound gauge component can create a single gauge or an entire set of gauges, depending on the number of rows in the data collection used. In a collection, each row contains the values for a single gauge.
The Component Gallery for gauges allows you to choose from the following categories of gauges:
Dial: Indicates the metric value of a task along a 180 degree arc.
Status Meter: Indicates the progress of a task or the level of some measurement along a rectangular bar.
Status Meter (Vertical): Indicates the progress of a task or the level of some measurement along a rectangular bar.
LED: Depicts graphically a measurement such as a key performance indicator (KPI). Several styles of graphics are available for LED gauges such as arrows that indicate good (up arrow), fair (left- or right-pointing arrow), and poor (down arrow).
Each of these categories contains a number of different types of gauge. Explore the Component Gallery that appears when you create a gauge to view all available gauge and category types, and descriptions for each one. Figure 25-6 shows the Component Gallery that appears for ADF gauges.
The data binding process is essentially the same regardless of which type of gauge you create. Only the metric value (that is, the measurement that the gauge is to indicate) is required. However, if a row in a data collection contains range information such as maximum, minimum, and thresholds, then these values can be bound to the gauge to provide dynamic settings. If information that you want to use in a gauge's upper or lower labels is available in the data collection, then you can bind these values to the gauge also.
For information about customizing a gauge after the data binding is completed, see the "Using ADF Gauge Components" chapter in Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
You can use the ADF gauge component to create a dial gauge against a background that specifies ranges of values (also called thresholds) that vary from poor to excellent. The gauge indicator specifies the current value of the metric while the graphic allows you to evaluate the status of that value easily.
Figure 25-7 shows a single dial gauge that appears if you create a gauge from the collection that stores WarrantyPeriodMonths
data. Because only one gauge appears, this data collection must contain only a single row of data. The value of the metric (which is 6) appears in a label below the gauge. The range of values in the gauge is displayed as 0 to 24. Threshold ranges are identified at 8, 16, and 24 and are filled with the colors red for poor (below 8), yellow for adequate (from 8 to 16), and green for superior (above 16).
To create a dial gauge using a data control, you bind the gauge component to a collection. JDeveloper allows you to do this declaratively by dragging and dropping a collection from the Data Controls panel.
To create a databound dial gauge:
From the Data Controls panel, select a collection.
For example, to create a dial gauge in the StoreFrontModule
application to display the current warranty period in months for a product in a particular warehouse, you would select the WarehouseStockLevels
collection. Figure 25-8 shows the WarehouseStockLevels
collection in the Data Controls panel.
Drag the collection onto a JSF page and, from the context menu, choose Gauges.
In the Component Gallery dialog, choose the category, type of gauge, and quick start layout, and then click OK.
In the Configuration tab of the dialog, do the following:
In the Metric box, select the column in your data collection that contains the actual value that the gauge is to plot. This is the only required value in the dialog.
In the Minimum box, if your data collection stores a minimum value for the gauge range, select the column that contains this value.
In the Maximum box, if your data collection stores a maximum value for the gauge range, select the column that contains this value.
In the Top Label box, if your data collection stores a value that you want to display in the top label of the gauge, select the column that contains this value.
In the Bottom Label box, if your data collection stores a value that you want to display in the bottom label of the gauge, then select the column that contains this value.
In the Threshold Attributes list, if you want to specify threshold values, click the Add icon to insert a row for each threshold and specify the value in that row. Do not create a threshold equal to the maximum value for the gauge because the gauge automatically treats the maximum value as a threshold setting.
Optionally, click the Preview tab to display a live preview of the gauge and its data. If necessary, go back to the Configuration tab so that you can adjust the gauge specifications.
Click OK.
Figure 25-9 shows the dialog that appears if you examine the gauge binding for WarehouseStockLevels
in the page definition file.
Note: The data source and metric data values are required. Other data values in the dialog are optional and can be specified in the gauge tag through the Property Inspector. |
In the Property Inspector, after you complete the binding of the gauge, you can set values for additional attributes in the gauge tag and its child tags to customize the component.
Dropping a gauge from the Data Controls panel has the following effect:
Creates the bindings for the gauge and adds the bindings to the page definition file
Adds the necessary code for the UI components to the JSF page
Example 25-3 shows the bindings that JDeveloper generated for the dial gauge that displays warranty in months for a product in a warehouse. This code example shows that the gauge metric receives its value dynamically from the WarrantyPeriodMonths
column in the data collection and that the remaining data values have static settings.
Example 25-3 Bindings for a Dial Gauge
<gauge IterBinding="WarehouseStockLevelsIterator" id="WarehouseStockLevels" xmlns="http://xmlns.oracle.com/adfm/dvt"> <gaugeDataMap> <item type="threshold" value="8" valueType="literal"/> <item type="threshold" value="16" valueType="literal"/> <item type="metric" value="WarrantyPeriodMonths"/> <item type="minimum" value="0" valueType="literal"/> <item type="maximum" value="24" valueType="literal"/> <item type="topLabel" value="Warranty (Months)" valueType="literal"/> </gaugeDataMap> </gauge>
Example 25-4 shows the code that JDeveloper generated in the JSF page for a dial gauge. The <dvt:thresholdSet>
element specifies one <dvt:threshold>
element for each threshold. Colors for the threshold ranges default to red, yellow, and green as specified by the values for the fillColor
attributes. The <dvt:indicator>
element specifies IT_NEEDLE
as the indicator to use. This renders a needle at runtime. The default value for <dvt:indicator>
renders a line (IT_LINE)
.
Example 25-4 Code on the JSF Page for an ADF Dial Gauge
<dvt:gauge id="gauge1" value="#{bindings.WarehouseStockLevels.gaugeModel}" gaugeType="DIAL" imageFormat="FLASH"> <dvt:gaugeBackground> <dvt:specialEffects fillType="FT_GRADIENT"> <dvt:gradientStopStyle/> </dvt:specialEffects> </dvt:gaugeBackground> <dvt:thresholdSet> <dvt:threshold text="Low" fillColor="#d62800"/> <dvt:threshold text="Medium" fillColor="#ffcf21"/> <dvt:threshold text="High" fillColor="#84ae31"/> </dvt:thresholdSet> <dvt:gaugeFrame/> <dvt:indicator type="IT_NEEDLE"/> <dvt:indicatorBase/> <dvt:gaugePlotArea/> <dvt:tickLabel/> <dvt:tickMark/> <dvt:topLabel/> <dvt:bottomLabel/> <dvt:metricLabel position="LP_WITH_BOTTOM_LABEL"/> </dvt:gauge>
You can use the ADF gauge component to create a status meter gauge where the inner rectangle shows the current level of a measurement against the ranges marked in the outer rectangle. The graphic of the status meter gauge allows you to evaluate the condition or progress of a measurement easily.
Figure 25-10 shows a set of status meter gauges that represent the inventory levels in a number of warehouses. This set of gauges results from binding one gauge component to a data collection (WarehouseStockLevels
). This data collection contains a row of data for each warehouse. Each row produces one gauge in the set. Notice that all gauges in the set share the same range values of minimum (0) and maximum (1500) with thresholds set at 500 and 1000 and 1500. Each gauge in the set displays the name of the warehouse that it represents and the stock metric for that warehouse in its bottom label.
To create a status meter gauge set using a data control, you bind the gauge component to a data collection that contains multiple rows of data. JDeveloper allows you to do this declaratively by dragging and dropping a collection from the Data Controls panel.
To create a databound status meter gauge:
From the Data Controls panel, select a collection.
For example, to create a status meter gauge in the StoreFrontModule
application that displays the quantity of stock on hand in a warehouse, you select the WarehouseStockLevels
collection.
Drag the collection onto a JSF page and, from the context menu, choose Gauges.
In the Component Gallery, choose the following:
Status Meter or Status Meter (Vertical) in the Categories list
The type of gauge that you want to create
The quick start layout for the gauge at runtime
Click OK.
In the Create Gauge dialog that appears, select values as described in the following list:
Select an attribute binding from the Metric dropdown list. This attribute binding contains the actual value that the gauge is to plot.
Input a minimum value in the Minimum field if your data collection stores a minimum value for the gauge range.
Input a maximum value in the Maximum field if your data collection stores a maximum value for the gauge range.
Write or select a value in the Top Label field if you want to display a label on top of the gauge at runtime.
Write or select a value in the Bottom Label field if you want to display a label below the gauge at runtime.
Click the Add icon to insert a row for each threshold and specify the value for that threshold if you want to specify threshold values in the Threshold Attributes list. Do not create a threshold equal to the maximum value for the gauge because the gauge automatically treats the maximum value as a threshold setting.
Optionally, click the Preview tab to display a live preview of the gauge and its data. If necessary, click the Configuration tab so that you can adjust the gauge specifications.
Figure 25-11 shows the settings for the set of status meter gauges that appears in Figure 25-10. In addition to setting values for the required metric value, this dialog sets values for thresholds and for the name of the warehouse to appear in the gauge's bottom label.
Click OK.
In the Property Inspector, after you complete the binding of the gauge, you can set values for additional attributes in the gauge tag and its child tags to customize the component as needed.
Dropping a gauge from the Data Controls panel has the following effect:
Creates the bindings for the gauge and adds the bindings to the page definition file
Adds the necessary code for the UI components to the JSF page
Example 25-5 shows the row set bindings that were generated for the status meter gauge set that displays inventory levels for each warehouse as illustrated in Figure 25-11. This example shows the value binding created between the gauge metric attribute and the QuantityOnHand
value in the data collection. It also shows the value binding between the Bottom Label
attribute and the WarehouseName
value in the data collection.
Example 25-5 Bindings Code for the ADF Status Meter Gauge Set
<gauge IterBinding="WarehouseStockLevelsIterator" id="WarehouseStockLevels" xmlns="http://xmlns.oracle.com/adfm/dvt"> <gaugeDataMap> <item type="threshold" value="500" valueType="literal"/> <item type="threshold" value="1000" valueType="literal"/> <item type="metric" value="QuantityOnHand"/> <item type="minimum" value="0" valueType="literal"/> <item type="maximum" value="1500" valueType="literal"/> <item type="bottomLabel" value="WarehouseName"/> </gaugeDataMap> </gauge>
Example 25-6 shows the code generated on the JSF page for the status meter gauge set that shows inventory levels for warehouses. The gaugeSetColumnCount
attribute specifies that gauges should be displayed in two columns. The code also specifies three thresholds: Low, Medium, and High. For brevity, the value of the inlineStyle
attribute has been omitted.
Example 25-6 Code on the JSF Page for the ADF Status Meter Gauge Set
<dvt:gauge id="gauge1" value="#{bindings.WarehouseStockLevels.gaugeModel}" gaugeType="STATUSMETER" imageFormat="FLASH"> <dvt:gaugeBackground> <dvt:specialEffects fillType="FT_GRADIENT"> <dvt:gradientStopStyle/> </dvt:specialEffects> </dvt:gaugeBackground> <dvt:thresholdSet> <dvt:threshold text="Low" fillColor="#d62800"/> <dvt:threshold text="Medium" fillColor="#ffcf21"/> <dvt:threshold text="High" fillColor="#84ae31"/> </dvt:thresholdSet> <dvt:indicatorBar/> <dvt:gaugePlotArea/> <dvt:tickLabel/> <dvt:tickMark/> <dvt:topLabel/> <dvt:bottomLabel/> <dvt:metricLabel position="LP_WITH_BOTTOM_LABEL"/> </dvt:gauge>
The ADF pivot table has the following structure:
Column edge: You can specify one or more layers of information for the column edge of the pivot table. For example, a column edge might include the names of states or cities.
Row edge: You can specify one or more layers of information for the row edge of the pivot table. For example, a row edge might include a product category and its products.
Data body: Contains one or more measures (that is, data values) that you want to display in the cells of the pivot table. For example, you could include sales and costs in the data body of a pivot table.
Figure 25-12 shows a pivot table that displays sales by state for all the products in each product category. This pivot table displays a row of totals at the end of each product category. Figure 25-14 shows the data binding dialog that lays out the data for this pivot table and maps the items in the data control collection to the pivot table.
For information about customizing a pivot table after data-binding is completed, see the "Using ADF Pivot Table Components" chapter in Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
To create a pivot table using a data control, you bind the pivot table component to a 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 pivot table by dragging a pivot table from the Component Palette and completing the Create Pivot Table dialog. This approach allows you the option of designing the pivot table user interface before binding the component to data. |
To create a databound pivot table:
From the Data Controls panel, select a collection.
Figure 25-13 shows an example where you could select the SalesPivotTable1
collection in the Data Controls panel to create a pivot table that displays sales by state for each product.
Drag the collection onto a JSF page and, from the context menu, choose Tables, then ADF Pivot Table.
In the ensuing Create Pivot Table dialog, do the following:
In the top of the Configuration page, select the attributes for the pivot table's columns, rows, and data body by dragging the attributes from the Available Attributes list to the pivot table layout beside the list.
For example, to lay out the sales pivot table shown in Figure 25-12, do the following: drag the State attribute to the column edge, drag the Product attribute to the row edge, and drag the Sales attribute to the data body in the pivot table so that Sales appears in the Data Labels layer. Figure 25-14 shows the resulting Create Pivot Table dialog.
Note: Data Labels refers to a layer of the pivot table that identifies the data in the cells. Items that you drag to the data body of the pivot table appear in the Data Labels layer. |
You can drag Data Labels to any location on the column edge or the row edge. You can also drag attributes to different locations on the same edge or on another edge.
As you lay out the pivot table in the upper portion of the Configuration page, corresponding entries are created in the Column Details page and the Row Details page of the data binding dialog. Similarly, changes that you make to Column Details or Row Details pages affect the layout of the pivot table shown at the top of the Configuration page.
To examine and possibly edit information about columns, use the Column Details page at the bottom of the Configuration page. In this page, you can specify additional information regarding the attributes that appear in the column edge of the pivot table.
To specify alternative labels for items in a pivot table column layer, select the attributes that contain the alternative label in the Layer Label Attribute column. Optionally, you can use the arrow icons on the side of the Column Details page to rearrange the sequence of the items in the column layers to affect the layout of the pivot table column edge.
To examine and possibly edit information about rows, click Row Details. In the Row Details page in the lower portion of the Configuration page, you can specify additional information regarding the attributes that appear in the row edge of the pivot table.
To specify alternative labels for items in a pivot table row layer, select the attributes that contain the alternative label in the column entitled Layer Label Attribute. Optionally, you can also use the arrow icons on the side of the Row Details page to rearrange the sequence of the items in the row layers to affect the layout of the pivot table row edge.
If you want to define totals for the pivot table, click Data Aggregation. To specify totals do the following:
Do not clear the Enable duplicate row aggregation checkbox if there is any possibility that data values from duplicate rows in the data collection will apply to a single cell in the pivot table.
For additional information about aggregating duplicate rows of data, see Section 25.4.3, "What You May Need to Know About Aggregating Attributes in the Pivot Table".
For each attribute that you want to total, click the Add icon to create a row to define the desired total.
In the Attribute column, select the attribute that you want to total.
For example, to create a pivot table that totals product sales, like the pivot table shown in Figure 25-12, select Product as the attribute to total.
As an additional example, consider what happens if state were swapped with category in the layout of the pivot table shown in Figure 25-12. In that case, a total of product sales would appear after each set of products for a state.
In the Function column, select the mathematical operation that you want to use for the aggregation. Available options are Sum, Average, Count, Maximum, Minimum, Standard Deviation, and Variance.
In the Aggregate Value Display column, select the value that indicates where you want the aggregate display to appear relative to the item mentioned in the Attribute column. Valid values are: Before, After, or Replace.
In the Aggregate Value Label column, enter the text that you want to use as a label for the aggregation.
For example, you might want to use the text "Total" as the aggregation label.
Figure 25-15 shows the Data Aggregation page for a pivot table that totals product sales and displays the total after each set of products.
Click Preview to see the data that will be displayed in the pivot table. The preview does not require that you compile and run code. If you are not satisfied with the preview, alter the settings in the binding dialog and return again to the Preview page to verify that your data looks as desired.
Figure 25-16 shows the Preview page for the pivot table that displays product sales for each state with totals after each set of products.
Dropping a pivot table from the Data Controls panel has the following effect:
Creates the bindings for the pivot table and adds the bindings to the page definition file
Adds the necessary code for the UI components to the JSF page
Example 25-7 shows the row set bindings that were generated for the pivot table that displays product sales within category by state. Notice that the pivot table data map contains a columns element that shows each column item, a rows element that includes each row item in the appropriate sequence, and an aggregated items element that defines the aggregation.
In the data binding dialog for this pivot table, the Enable duplicate row aggregation control was selected. For this reason, the <data>
element shows that aggregateDuplicates
is set to True
. For more information about aggregating duplicates, see Section 25.4.3, "What You May Need to Know About Aggregating Attributes in the Pivot Table".
Example 25-7 Binding XML for the ADF Pivot Table
<pivotTable IterBinding="SalesPivotTable1Iterator" id="SalesPivotTable1" xmlns="http://xmlns.oracle.com/adfm/dvt"> <pivotTableDataMap> <columns> <data aggregateDuplicates="true"> <item value="Sales"/> </data> <item value="State"/> </columns> <rows> <item value="Category"/> <item value="Product"/> </rows> <aggregatedItems> <item aggregateLocation="After" aggregateType="Sum" value="Product" aggregateLabel="Total"/> </aggregatedItems> </pivotTableDataMap> </pivotTable>
Example 25-8 shows the code generated on the JSF page for the sales pivot table. The only customization used in this code is the setting of the inlineStyle
attribute in the pivot table tag. Instead of the default setting of xxx pixels, the width for the sales table is set to 800 pixels.
If the attributes that you choose to display in your pivot table do not uniquely identify each row in your data collection, then you can aggregate the data from duplicate rows to collapse that data into a single pivot table cell.
For example, if the rows in the data collection shown in Figure 25-12 also contained a store identification, then the data rows from all stores in a given combination of Product, Category, and State would have to be collapsed into a single cell in the pivot table. For accurate calculation of such duplicate rows, you must ensure that the Enable duplicate row aggregation control is selected in the Data Aggregation page of the Create Pivot Table dialog.
The pivot table has the following optional data binding attributes available for controlling the calculation of duplicate data rows:
aggregateDuplicates
: Boolean property of the <data>
element that determines whether special processing is enabled at binding runtime to aggregate data values in duplicate rows. If this attribute is not specified, then false
is assumed.
defaultAggregateType
: String property of the <data>
element that specifies a default aggregation method for handling duplicates. Valid values are SUM
, AVERAGE
, COUNT
, MIN
, MAX
, STDDEV
, VARIANCE
. If aggregateDuplicates
is true
and defaultAggregateType
is unspecified, then SUM
is assumed.
aggregateType
: String property of an <item>
element that enables you to override the default aggregate type for a particular data item. This attribute is useful only when you have multiple data values (such as Sales and Expenses) bound to your pivot table.
By default, the pivot table uses the SUM operation to aggregate the data values of duplicate data rows in a data collection to produce a single cell value in the pivot table. This means that the aggregateDuplicates
attribute is set to true
and the defaultAggregateType
is assumed to be SUM
.
The <data>
element shown in Example 25-7 is an example of such default aggregation.
If you want the pivot table to use a different mathematical operation to aggregate the data values of duplicate rows, then you set the defaultAggregateType
to the desired operation.
Example 25-9 shows a data element with the defaultAggregateType
set to SUM
. This operation would be appropriate if you want to see the total of sales from all stores for each unique combination of Product, Category, and State.
Example 25-9 Binding XML for Custom Aggregation of Duplicate Rows
<pivotTable IterBinding="SalesPivotTable1Iterator" id="SalesPivotTable11" xmlns="http://xmlns.oracle.com/adfm/dvt"> <pivotTableDataMap> <columns> <data aggregateDuplicates="true" defaultAggregateType="SUM"> <item value="Sales"/> </data> <item value="State"/> </columns> <rows> <item value="Category"/> <item value="Product"/> </rows> <aggregatedItems> <item aggregateLocation="After" aggregateType="AVERAGE" value="Product" aggregateLabel="Average"/> </aggregatedItems> </pivotTableDataMap> </pivotTable>
If you have a pivot table with multiple data values (such as sales and the average size of a store in square feet) and you want to sum the sales data values in duplicate rows, but you want to average the square feet data values, then do the following:
On the <data>
element, set the defaultAggregateType
to SUM
.
On the <item>
element for the square feet attribute, set the aggregateType
to AVERAGE
.
Example 25-10 shows the <columns>
elements wrapped by a PivotTableDataMap
element. The <data>
element contains the default attributes for aggregation. These apply to all data items that do not have a specific custom aggregateType
attribute specified.
By default, a pivot table initially sorts data based on values in the outer row labels. You can change the default behavior by inserting a sorts
tag inside the pivotTableDataMap
tag of a pivot table binding in the page definition file. Insert a qdrSliceSort
tag inside the sorts
tag and set values for the attributes as described in Table 25-2.
Table 25-2 Attribute Values for qdrSliceSort Tag
Attribute | Description |
---|---|
|
Specify the initial direction of the sort. Valid values are |
|
Specify |
|
Specify |
|
Specify |
Insert one or more item
tags inside the qdrSliceSort
tag. An item tag specifies the slice on the opposite edge from which the values to be sorted should be obtained. Set values for the attributes as described in Table 25-3.
Table 25-3 Attribute Values for item Tag
Attribute | Description |
---|---|
|
Specify the name of the layer to sort on. Typically, this is the column name in the row set. Specify |
|
Specify the value of the specified layer on the desired slice. |
An ADF geographic map is an ADF Data Visualization component that provides the functionality of Oracle Spatial within Oracle ADF. This component allows users to represent business data on a geographic map and to superimpose multiple layers of information (known as themes) on a single map. These layers can be represented as any of the following themes: bar graph, pie graph, color, point, and predefined theme.
Figure 25-17 shows a geographic map component that uses a base map for a region in the United States with the following themes:
Color theme: For the selected product, this theme colors states based on product popularity. The colors range from green (which represents the highest popularity for that product) to red (which represents the lowest popularity for that product).
Pie graph theme: This theme displays a pie graph in each state to indicate the popular product categories in that state. In this example, the pie graph shows the following product categories as pie slices: Media, Office, and Electronics.
Point theme: This theme identifies warehouses as points. For each point, it displays an icon to indicate the inventory level at that warehouse for the selected product. A separate icon is displayed for each of the following ranges of inventory: low inventory, medium inventory, and high inventory.
A geographic map component differs from other ADF Data Visualization components as you cannot put multiple maps on a page. This contrasts to components such as graphs where you can put multiple graphs on a page. Instead, you show how multiple sets of data relate to each other spatially or, for a specific point, you display different attributes layered in separate themes.
The geographic map component itself is not bound to data. However, each map theme has its own data bindings.
A base map forms the background on which the ADF geographic map component layers the themes that developers create.
In Oracle Spatial, administrators create base maps that consist of one or more themes. The administrator controls the visibility of the base map themes. When you zoom in and out on a base map, various base map themes are hidden or displayed. At the ADF geographic map component level, you cannot use zoom factor to control the display of the themes created by the administrator on the base map.
When you overlay themes on the ADF geographic map, you can control the visibility of your themes by setting the maxZoom
and minZoom
attributes of the tags related to these themes. At runtime, you can also hide or display your custom themes by using the View menu of the Map toolbar or by using other ADF components that you create on the page.
For information about customizing a geographic map after data-binding is completed, see the "Using ADF Geographic Map Components" chapter in Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
To create a geographic map, you first configure the map (that is, select a base map and provide URLs for processing) and then bind a theme of the map to a data collection. JDeveloper allows you to do this declaratively by dragging and dropping a collection from the Data Controls panel for the theme that you want to create.
When you create a map point theme, you have the option of customizing the style of the points that appear in the map. For each different point style, you can use a mapPointStyleItem
tag.
To create a geographic map with a databound point theme:
From the Data Controls panel, select a collection.
Figure 25-18 shows an example where you could select the WarehouseStockLevelsByProduct1
collection in the Data Controls panel to create a geographic map with a point theme that displays an image to represent the quantity on hand for each warehouse point.
Drag the collection onto a JSF page and, from the context menu, choose Geographic Map, then Map and Point Theme.
If you have not yet configured a map on the page, then in the ensuing Create Geographic Map dialog, click the New icon to display the Create Geographic Map Configuration dialog and do the following:
In the Id field enter the unique identifier for the map configuration.
In the MapViewer URL field enter the URL for the Oracle Application Server MapViewer Service.
In the Geocoder URL field select the URL for the Geocoder Web service that converts street addresses into latitude and longitude coordinates for mapping.
Note: The Geocoder URL is needed only if you do not already have longitude and latitude information for addresses. |
Click OK to dismiss the dialog and return to the Create Geographic Map dialog.
In the Maps page, you select the base map for the geographic map component and provide other settings to use with the map by doing the following:
From the Data Source list select the collection of maps from which you will choose a base map.
From the Base Map list select the map that will serve as the background for the geographic map component.
To specify values for the StartingX field and the StartingY field click on the image of the map to center it within the Preview window.
You can use the arrows in the map navigator in the upper left-hand corner to move the map in the appropriate direction.
Optionally use the sliding arrow in the Preview window to adjust the zoom factor of the map.
Click OK to dismiss the dialog and to display the Create Point Map Theme dialog.
In the Theme Id field enter the unique identifier for the point map theme.
In the Location section, specify whether the point location is to be specified by a pair of x and y coordinates (longitude and latitude) or as an address.
The choice you select for location will determine which controls appear in the Location section.
Tip: Using x and y coordinates is a more efficient way to present data on the map rather than using the Address controls, which must be converted by a Geocoder to x and y coordinates. If the data collection has more than 100 rows, then to ensure adequate performance, use x and y coordinates. |
For the x and y point location, you select the data that corresponds to the following items:
X (Longitude): The horizontal location of the point on the map.
Y (Latitude): The vertical location of the point on the map.
Label: The labels for the points in the top section of the information window, which is displayed when you click a point.
In the Point Data section, provide the following information that identifies the data associated with the point, its label, and optionally the style for the point:
In the Data field, select the data column that is associated with the point, such as QuantityOnHand
.
In the Label field, enter the text that will appear in the information window before the data value when you click a point.
Optionally, in the Category field, select a data column to use for finding the appropriate style for a point. If you select a value for Category, that value is stored in the binding for this point theme and then matched against the itemValue
attribute of the mapPointStyleItem
tags that you create for this point theme.
Note: If your data does not have a column that you want to use as a category for finding the style of a point, you can also usemapPointStyleItem tags to define styles related to data ranges (such as high, medium, and low) that are matched to the values in the column that you select in the Data field. For more information, see Section 25.5.2, "How to Create Point Style Items for a Point Theme". |
Select the Enable Row Selection field only if you want to enable the selection of rows in a related component. You select this option when the page contains a component that is linked to a data collection which is related to the geographic map that you are creating.
Click OK.
Figure 25-19 shows the Create Point Map Theme dialog for a geographic map with a point theme that displays an image representing quantity on hand for each warehouse point.
There are a variety of options available for creating point style items for use in a given map point theme. These are:
A single image for all data points
Separate images for each data point category
Images that represent low, medium, and high data value ranges
After you create the data binding for a map point theme, you have the option of selecting a single built-in image that should be used for all points in that map theme. In the Property Inspector, you can make this selection in the builtInImage
attribute of the mapPointTheme
tag. The default value for this attribute is OrangeBall
.
Alternatively, if you specify a value for Category in the Create Point Map Theme dialog, then you should also create a set of point style items to determine a separate image that represents data points in each category. In this case, you do not use the minimum and maximum values in the point style item tags. Instead, you set the itemValue
attribute of point style item tags to a value that matches entries in the data column that you specified for Category.
In a point theme for a geographic map, if you do not specify a value for Category, you can still use the mapPointStyleItem
child tags of the mapPointTheme
tag to specify ranges of values (such as low, medium, and high) and the images that are to represent these ranges. If you do this, then each point will be represented by an image that identifies the range in which the data value for that point falls.
The following procedure assumes that you have already created a geographic map with a point theme.
To add point style items to a map point theme to represent low, medium, and high data value ranges:
In the Structure window, right-click the dvt:mapPointTheme tag and choose Insert inside the dvt:mapPointTheme, then Point Style Item.
In the Point Style Item Property Inspector, set values as described Table 25-4, "Properties for Point Style Item".
Table 25-4 Properties for Point Style Item
For this property... | Set this value... |
---|---|
Id |
Specify a unique ID for the point style item. |
MinValue |
Specify the minimum value in a data range that you define. |
MaxValue |
Specify the maximum value in a data range that you define. |
ShortLabel |
Specify text to appear when a user hovers over the point item. For example, if you define a point item for low inventory, then enter |
ImageURL |
Specify the URL to the image file or select it from the dropdown list. At runtime, the image you specify appears on the map to represent the data range identified by the MinValue and MaxValue properties. Alternatively, you can select one of a number of predefined images referenced by the BuiltInImage dropdown list that appears in the Other section. |
HoverImageURL |
Specify the URL to the image file or select it from the dropdown list. At runtime, the image you specify appears when a user hovers over the point item. |
SelectedImageURL |
Specify the URL to the image file or select it from the dropdown list. At runtime, the image you specify appears when a user selects the point item. |
If you defined a data value range for a low data value range in Steps 1 and 2, then repeat Steps 1 and 2 to define medium and high data value ranges with appropriate values.
Note: The use ofmapPointStyleItem child tags to customize the style of points is a declarative approach that lets you provide custom point images. For information about using a callback to provide not only custom images but also custom HTML, see Section 25.5.4, "What You May Need to Know About Adding Custom Point Style Items to a Map Point Theme". |
Dropping a geographic map and a point theme (which in this case would be the initial theme added to the map) from the Data Controls panel has the following effect:
Creates the bindings for the point theme and adds the bindings to the page definition file
Adds the necessary tags to the JSF page for the geographic map component
Adds the necessary point theme tags to the JSF page within the map XML
Example 25-11 shows the row set bindings that were generated for the point theme of the geographic map.
Example 25-11 Point Theme Binding XML
<mapTheme IterBinding="WarehouseStockLevelsByProduct1Iterator" id="WarehouseStockLevelsByProduct1" xmlns="http://xmlns.oracle.com/adfm/dvt"> <mapThemeDataMap mapThemeType="point"> <item type="data" value="QuantityOnHand" label="Product Quantity"/> <item type="lat_long" latitude="Latitude" longitude="Longitude" label="WarehouseName"/> </mapthemeDataMap> </mapTheme>
Example 25-12 shows the XML code generated on the JSF page for the geographic map and its point theme. Notice the code for the three kinds of point style settings based on data value.
The initial point style setting (ps0
) applies to values that do not exceed 500. This point style displays an image for very low inventory and provides corresponding tooltip information.
The second point style setting (ps1
) applies to values between 500 and 1000. This point style displays an image for low inventory and provides corresponding tooltip information.
The final point style setting (ps2
) applies to values between 1000 and 1600. This point style displays an image for high inventory and provides corresponding tooltip information.
Example 25-12 Geographic Map and Point Theme XML Code on the JSF Page
<dvt:map id="map1" mapServerConfigId="mapConfig1" inlineStyle="width:850px;height:490px" startingX="-96.0" baseMapName="ELOCATION_MERCATOR.WORLD_MAP" startingY="37.0" zoomBarPosition="WEST" showScaleBar="false" partialTriggers="go pointTheme pieTheme colorTheme" mapZoom="3"> <dvt:mapPointTheme id="mapPointTheme1" shortLabel="Warehouse Stock Levels" selectionListener="#{MapBean.processSelection}" value="#{bindings.WarehouseStockLevelsByProduct1.geoMapModel}" rendered="#{AppState.showPointTheme}"> <dvt:mapPointStyleItem id="ps0" minValue="0" maxValue="500" imageURL="/images/low.png" selectedImageURL="/images/lowSelected.png" shortLabel="Very Low Inventory"/> <dvt:mapPointStyleItem id="ps1" minValue="500" maxValue="1000" imageURL="/images/medium.png" selectedImageURL="/images/mediumSelected.png" shortLabel="Low Inventory"/> <dvt:mapPointStyleItem id="ps2" minValue="1000" maxValue="1600" imageURL="/images/regularGreen.png" selectedImageURL="/images/regularGreenSelected.png" shortLabel="High Inventory"/> </dvt:mapPointTheme> </dvt:map>
If you want to provide custom HTML as well as custom images for map points, then you can use the customPointCallback
attribute of the dvt:mapPointTheme
tag to accomplish this customization.
Important: If you set thecustomPointCallback attribute for a map point theme, the map ignores any dvt:mapPointStyleItem child tags because the callback overrides these tags. |
To use a callback to customize the style of map points:
Write a method in Java to perform the desired point customization.
Store this method in a managed bean for the map.
For more information about managed beans, see the "Creating and Using Managed Beans" section in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
After you finish data-binding the map point theme, use the Property Inspector to specify a reference to the managed bean method in the customPointCallback
attribute of the dvt:mapPointTheme
tag.
For example, if the managed bean is named MapSampleBean
and the method is named setCustomPointStyle
, then the reference becomes #{mapSampleBean.CustomPointStyle}
.
When you create a geographic map, you can choose to create themes (point, color, and graph) in any sequence that you wish.
The following procedure assumes that a geographic map has already been configured and, therefore, the map component does not display the dialog for configuring the map. Instead, only the dialog for creating the color theme appears.
To add a databound color theme to a geographic map:
From the Data Controls panel, select a collection.
Figure 25-20 shows an example where you could select the ProductPopularity1
collection in the Data Controls panel to create a color map theme that shows product popularity by the color of regions (for example, states).
Drag the collection onto a JSF page which already contains a geographic map component and, from the context menu, choose Geographic Map, then Color Theme.
In the ensuing Create Color Map Theme dialog, enter a unique identifier for the map theme in the Id field.
In the Base Map Theme section, identify the base map color theme to use for the geographic map by doing the following:
In the Name field, select the name of the base map theme.
For Location, select the location column in the data collection that should be matched to the location column in the base map theme that you selected.
Optionally, click View Sample Theme Data to display the Sample Theme Data dialog, in which you can examine the first several rows of the actual data so that you can identify the appropriate location column.
For example, if you want to view the data for a region that consists of states in the United States map, you might select MAP_STATES_NAME as shown in Figure 25-21.
Note: It is possible for an administrator of Oracle Spatial to disable the display of sample data. If this button is not available, then consult the administrator for guidance. |
In the Appearance section, specify the look of the color theme as follows:
In Data Bucket Count, enter the number of groups for the data in this geographic map. Each group is coded with a color. After specifying this number, you can provide colors for the minimum value and the maximum value. The colors for the other values are chosen automatically using an RGB algorithm.
In Minimum Value Color, select the color for the minimum value.
In Maximum Value Color, select the color for the maximum value.
Note: If you want to specify an exact color for each data bucket, see Section 25.5.7, "What You May Need to Know About Customizing Colors in a Map Color Theme". |
In the Data section, provide the following information about the data in the collection:
For Location, select the column in the data collection that should match the values in the location column that you selected from the base map theme.
For Location Label, select the column in the data collection that contains the labels associated with the values in the location column. These labels are shown in the information window that is displayed when you click or hover over a color.
For Data Label, enter the label to use for describing the data in the information window and the tooltip that is displayed when you click or hover over a color. For example, the information window might include a label before the data value, such as Product Popularity.
Use Enable Row Selection only if you want to enable master-detail relationships. This is useful when the data collection for the map theme is a master in a master-detail relationship with a detail view that is displayed in another UI component on the page.
Figure 25-22 shows the Create Color Map Theme dialog for the product popularity by state color theme.
Dropping a color theme from the Data Controls panel to an existing geographic map has the following effect:
Creates the bindings for the color theme and adds the bindings to the page definition file
Adds the necessary color theme tags to the JSF page within the map XML
Example 25-13 shows the row set bindings that were generated for the color theme of the geographic map.
Example 25-13 Color Theme Binding XML
<mapTheme IterBinding="ProductPopularity1Iterator" id="ProductPopularity1" xmlns="http://xmlns.oracle.com/adfm/dvt"> <mapThemeDataMap mapThemeType="color"> <item type="location" value="StateProvince" label="StateProvince"/> <item type="data" value="CountAddressesStateProvince" label="Popularity"/> </mapThemeDataMap> </mapTheme>
Example 25-14 shows the XML code generated on the JSF page for a color theme that represents product popularity in different states on the United States map.
While you are data-binding a map color theme, you can specify only a minimum color and a maximum color for the data buckets. The map uses an algorithm to determine the colors of the buckets between the minimum and maximum. However, after the data-binding is finished, you have the option of specifying the exact color to be used for each data bucket.
In the Object Inspector, for the dvt:mapColorTheme
tag you can use the colorList
attribute to specify the color for each bucket. You can either bind a color array to this attribute or you can specify a string of colors using a semicolon separator.
For example, if the value of this attributes is set to: #ff0000;#00ff00;#0000ff
, then the color of the first bucket is red, the second bucket is green, and the third bucket is blue.
When you create a geographic map, you can choose to create themes (point, color, and graph) in any sequence that you wish. However, only one graph theme (pie or bar) can be visible at a time on the ADF geographic map component.
The following procedure assumes that a geographic map has already been configured and, therefore, the map component does not display the dialog for configuring the map. Instead, only the dialog for creating the pie graph theme appears.
To add a databound pie graph theme to a geographic map:
From the Data Controls panel, select a collection.
Figure 25-23 shows an example where you could select the PopularCategories1
collection to create a pie bar theme in an existing geographic map component to represent the popular product categories within a state.
Drag the collection onto a JSF page and, from the context menu, choose Create, then Pie Graph Theme.
In the ensuing Create Pie Graph Theme Binding dialog, do the following to identify the new theme and the base map theme elements that you want to work with:
For Theme Id, enter a unique identifier for the pie graph theme that you are creating.
In the Base Map Theme section, select the name of the base map and the region in which you want to place the pie graphs.
In the Appearance section, under Data, do the following:
For Location, select the location column in the data collection that should be matched to the location column in the base map theme that you selected.
If needed, click View Sample Theme Data to examine the first several rows of the actual data so that you can identify the appropriate location column.
For Location Label, select the column in the data collection that contains labels for the locations in the data collection.
In the grid for Series Attributes, enter each attribute that contains values that you want represented in the pie graph that you are creating.
Beside each series attribute, enter text that should be used as a label for the data values in the series attribute.
Select Enable Row Selection only if you want to enable the selection of rows in a related component. You select this component when the page contains a component that is linked to a data collection that is related to the geographic map that you are creating.
Click OK.
Figure 25-24 shows the completed Create Pie Graph Map Theme dialog for the product popularity by state pie graph theme.
Dropping a pie graph theme from the Data Controls panel to an existing geographic map has the following effect:
Creates the bindings for the pie graph theme and adds the bindings to the page definition file
Adds the necessary pie graph theme code to the JSF page within the map XML
Example 25-15 shows the row set bindings that were generated for the pie graph theme of the geographic map.
Example 25-15 Pie Graph Theme Binding XML
<mapTheme IterBinding="PopularCategoriesByState1Iterator" id="PopularCategoriesByState1" xmlns="http://xmlns.oracle.com/adfm/dvt"> <mapThemeDataMap mapThemeType="pieChart"> <item type="location" value="StateProvince" label="StateProvince"/> <item type="data" value="AudioVideo" label="Audio Video"/> <item type="data" value="CellPhones" label="Cell Phones"/> <item type="data" value="Games" label="Games"/> </mapThemeDataMap> </mapTheme>
Example 25-16 shows the XML code generated on the JSF page for the pie graph theme of the geographic map.
A Gantt chart is a type of bar graph (with time on the horizontal axis). It is used in planning and tracking projects to show tasks or resources in a time frame with a distinct beginning and end.
When you create a Gantt chart, you can choose from the following types:
Project
A project Gantt chart lists tasks vertically and shows the duration of each task as a bar on a horizontal time line.
Resource Utilization
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.
Scheduling
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.
For information about customizing Gantt chart charts after data-binding is completed, see the "Using ADF Gantt Chart Components" chapter in Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
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 25-25 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 who is responsible for the order and columns for the order date and shipped 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.
To create a project Gantt chart using a data control, you 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 Component Palette and completing the Create Project Gantt dialog. This approach allows you to design the Gantt chart user interface before binding the component to data. |
To create a databound project Gantt chart:
From the Data Controls panel, select a data collection. For a Gantt chart, you can select a row set collection (which produces a flat list of tasks) or a basic tree collection (which produces a hierarchical list of tasks).
Figure 25-26 shows an example where you could select the OrderShippingSummary1
collection in the Data Controls panel to create a project Gantt chart that displays the progress of order shipping.
Drag the collection onto a JSF page and, from the context menu, choose Gantts, then Project.
In the ensuing Create Project Gantt dialog, you do the following to connect task-related controls in the pages at the top of the dialog with corresponding columns in the data collection:
In the Tasks page at the top of the dialog, you select the columns in the data collection that correspond to each of the following controls: Task Id, Start Time, and End Time. By clicking Show More in the dialog, you can select additional columns in the data collection that correspond to the following controls: Actual Start, Actual End, % Complete, Completed Through, Critical, and Is Container.
Optionally, you can select a column in the data collection to map to the task type. If you do not bind Task Type to a column in your data collection, then all tasks default to Normal. The task type controls the appearance of the task bar when it is rendered in the Gantt chart.
A project Gantt chart component supports the following task types that you configure the data collection to return: Summary, Normal, and Milestone.
If the data collection has an accessor for subtasks, you have the option of using the Subtasks page in the dialog to select the subtasks accessor and to select the columns in the data collection that correspond to each of the following controls: SubTask Id, Start Time, and End Time. Optionally, you can select a column in the data collection to map to the subtask type. If you do not bind SubTask Type to data, then all subtasks default to Normal.
A project Gantt chart component supports the following task types that you configure the data collection to return: Summary, Normal, and Milestone.
If you do not bind subtasks, then the Gantt chart cannot render a hierarchy view of tasks. If you bind subtasks, then you can drill from tasks to subtasks in the hierarchy view of the Gantt chart.
If the data collection has an accessor for dependent tasks, you have the option of using the Dependent Tasks page in the dialog to select the dependent task accessor and to select the columns in the data collection that correspond to the following controls: Dependency Type, From Task Id, and To Task Id.
Dependent tasks are linked by their dependency between their finish and start times.
A project Gantt chart component supports the following dependency types that you configure the data collection to return: fs
(for finish to start), ss
(for start to start), ff
(for finish to finish), and sf
(for start to finish).
If the data collection has an accessor for split tasks, you have the option of using the Split Tasks page in the dialog to select Split Tasks accessor and to select the columns in that data collection that correspond to each of the following controls: SplitTask Id, Start Time, and End Time.
If the data collection has an accessor for recurring tasks, you have the option of using the Recurring Tasks page in the dialog to select the recurring tasks accessor and to select the columns in that data collection that correspond to each of the following controls: Recurring Task Id, Type, Start Time, and End Time.
You can use the Appearance page in the dialog to specify the attributes that correspond to the Label of the task bar, and up to three icons to associate with the task bar.
In the Table Columns section, you specify the columns to appear in the list region of the Gantt chart. Specify one row of information for each column that is to appear. Use the New icon to add new rows. Use the arrow icons to arrange the rows in the exact 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. The nodestamp column is the one that you can expand or collapse when you have a subtask collection. |
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 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. The default is the ADF Output Text component.
Click OK.
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 dvt:projectGantt, then Legend.
The legend shows information about each symbol and color coded bar that is used to represent different task types. It also shows detailed information about the task that is selected in the Gantt chart.
Figure 25-27 shows the dialog used to create the project Gantt dialog from the data collection for shipping orders.
After completing the data binding dialog, you can use the Property Inspector to specify values for additional attributes for the project Gantt chart.
Dropping a project 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
Example 25-17 displays the row set bindings that were generated for the project Gantt chart that displays orders shipped. This code example shows that there are nodes defined for tasks and subtasks, along with attributes. There are also nodes defined for dependent tasks, split tasks, and recurring tasks but no attributes.
Example 25-17 Bindings for a Project Gantt Chart
<gantt IterBinding="OrderShippingSummary2Iterator" id="OrderShippingSummary2" xmlns="http://xmlns.oracle.com/adfm/dvt"> <ganttDataMap> <nodeDefinition DefName="oracle.fod.model.OrderShippingSummary" type="Tasks"> <AttrNames> <Item Value="PersonId" type="taskId"/> <Item Value="OrderDate" type="startTime"/> <Item Value="TaskType" type="taskType"/> <Item Value="ShippedDate" type="endTime"/> </AttrNames> <Accessors> <Item Value="OrderShippingDetails" type="subTasks"/> </Accessors> </nodeDefinition> <nodeDefinition type="SubTasks" DefName="oracle.fod.model.OrderShippingDetails"> <AttrNames> <Item Value="OrderId" type="taskId"/> <Item Value="OrderDate" type="startTime"/> <Item Value="TaskType" type="subTaskType"/> <Item Value="ShippedDate" type="endTime"/> </AttrNames> </nodeDefinition> <nodeDefinition type="Dependents"> <AttrNames/> </nodeDefinition> <nodeDefinition type="SplitTasks"> <AttrNames/> </nodeDefinition> <nodeDefinition type="RecurringTasks"> <AttrNames/> </nodeDefinition> </ganttDataMap> </gantt>
Example 25-18 shows the code generated on the JSF page for the ADF 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. For brevity, the code in the af:column
elements for OrderStatusCode
and ShippedDate
has been omitted.
Example 25-18 Code on the JSF Page for a Project Gantt Chart
<projectGantt id="projectGantt1" value="#{bindings.OrderShippingSummary2.projectGanttModel}" var="row" startTime="2008-05-17" endTime="2008-07-07" inlineStyle="width:100%; height:100%;"> <f:facet name="major"> <timeAxis scale="weeks"/> </f:facet> <f:facet name="minor"> <timeAxis scale="days"/> </f:facet> <f:facet name="nodeStamp"> <af:column sortProperty="FirstName" sortable="false" headerText="#{bindings.OrderShippingSummary2.hints.FirstName.label}"> <af:outputText value="#{row.FirstName}"/> </af:column> </f:facet> <af:column sortProperty="LastName" sortable="false" headerText="#{bindings.OrderShippingSummary2.hints.LastName.label}"> <af:outputText value="#{row.LastName}"/> </af:column> <af:column sortProperty="OrderDate" sortable="false" headerText="#{bindings.OrderShippingSummary2.hints.OrderDate.label}"> <af:outputText value="#{row.OrderDate}"> <af:convertDateTime pattern="#{bindings.OrderShippingSummary2.hints.OrderDate.format}"/> </af:outputText> </af:column> <af:column sortProperty="ShippedDate" sortable="false" headerText="#{bindings.OrderShippingSummary2.hints.ShippedDate.label}"> <af:outputText value="#{row.ShippedDate}"> <af:convertDateTime pattern="#{bindings.OrderShippingSummary2.hints.ShippedDate.format}"/> </af:outputText> </af:column> <af:column sortProperty="TaskType" sortable="false" headerText="#{bindings.OrderShippingSummary2.hints.TaskType.label}"> <af:outputText value="#{row.TaskType}"/> </af:column> </projectGantt>
A summary task shows start time and end time for a group of tasks (which are usually 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.
To detect a change in task duration, register an event handler by specifying a method binding expression on the DataChangeListener
attribute of the Gantt chart component. When an action occurs that potentially changes data in the Gantt chart, the event fired is of type oracle.adf.view.faces.bi.event.DataChangeEvent
. This event contains information about the data changes and is fired to the registered event listener. The listener is responsible for validating the new values and updating the underlying data model.
When the update is completed, the Gantt chart is refreshed with either the old data (if the update failed) or with the new data. The Gantt chart uses partial page rendering so that only the Gantt chart and not the entire page is refreshed.
Percent complete can be represented as an inner bar that indicates what percentage of a task is complete. The length of the inner bar is calculated based on percent complete returned by the data object.
The data binding dialog for the project Gantt chart does not provide a control in which you can enter the percentage complete value, but this value is required to render a percent complete. However, the Gantt chart data object does contain a percentComplete
attribute.
To provide the percent complete integer, you must add a new attribute mapping in the nodeDefinition
for type Tasks
. For example, if your data collection has a column named PercentDone, then the attribute mapping would appear as follows: <Item Value="PercentDone" type="percentComplete"/>
.
Example 25-19 shows the percent complete attribute mapping added to the data binding code for the nodeDefinition
of type Tasks
in the project Gantt chart binding displayed in Example 25-17.
Example 25-19 Bindings for Project Gantt Chart with Percent Complete
<nodeDefinition DefName="oracle.fod.model.OrderShippingSummary" type="Tasks"> <AttrNames> <Item Value="PersonId" type="taskId"/> <Item Value="OrderDate" type="startTime"/> <Item Value="TaskType" type="taskType"/> <Item Value="ShippedDate" type="endTime"/> <Item Value="PercentDone" type="percentComplete"/> </AttrNames>
Another attribute (completedThrough
) exists that allows you to specify a date rather than a percentage. The Gantt chart data object calculates the percentage complete based on the date that the completedThrough
attribute references. For example, if your data collection has a column named PercentDone
, then the attribute mapping would appear as follows: <Item Value="PercentDone" type="completedThrough"/>
.
Variance can be rendered within two horizontal bars. One bar represents the base (or original) start and end time for the task. The second bar represents the actual start and end time for the task. You enter the binding information for the base start time and end time in the data binding dialog for a project Gantt chart.
The data binding dialog for Gantt chart does not provide controls in which you can enter the actual start time and actual end time for the Gantt chart, but these values are required to render variance. However, the Gantt chart data object does contain the following attributes: actualStart
and actualEnd
.
To provide the actual start and actual end time, you must add two new attribute mappings in the nodeDefinition
for type Tasks
. For example, if your data collection has columns named ActualStartDate
and ActualEndDate
, then the attribute mappings would appear as shown in Example 25-20.
Example 25-20 Attribute Mappings for Actual Start and Actual End
<Item Value="ActualStartDate" type="actualStart"/> <Item Value="ActualEndDate" type="actualEnd"/>
Example 25-21 shows the actual start and actual end attribute mappings added to the data binding code for the nodeDefinition
of type Tasks
for a project Gantt chart.
Example 25-21 Bindings for Project Gantt Chart with Actual Start and Actual End
<nodeDefinition DefName="oracle.fod.model.OrderShippingSummary" type="Tasks"> <AttrNames> <Item Value="PersonId" type="taskId"/> <Item Value="OrderDate" type="startTime"/> <Item Value="TaskType" type="taskType"/> <Item Value="ShippedDate" type="endTime"/> <Item Value="ActualStartDate" type="actualStart"/> <Item Value="ActualEndDate" type="actualEnd"/> </AttrNames>
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 25-28 shows a resource utilization Gantt chart that lists each resource and an associated calendar that can display when the resource is in use.
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 Component Palette 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. |
To create a resource utilization Gantt chart:
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 25-29 shows an example where you could select the GanttRugResourcesView1
collection in the Data Controls panel to create a resource utilization Gantt chart to display the usage of a resource.
Drag the collection onto a JSF page and, from the context menu, choose Gantt, then Resource Utilization.
In the Create Resource Utilization Gantt dialog, connect resource- and time-related controls with corresponding columns in the data collection.
For Resource Id, select the column in the data collection that corresponds to the unique identifier of the resource.
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.
In the Bucket Metrics list, you can optionally specify attributes that appear as bars within the time bucket. 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.
In the Table Columns list, specify the column(s) to appear in the list region of the Gantt chart resource utilization 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 resource utilization list. For each row, provide values for Display Label, Value Binding, and Component to Use.
If the data collection has an accessor for subresources, you can use the Subresources page to select a subresources accessor and a resource ID.
Click OK.
Figure 25-30 shows the dialog used to create a resource utilization Gantt chart from the data collection for resources available for a project.
Dropping a resource utilization Gantt chart from the Data Controls panel onto a JSF page 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
Example 25-22 shows the row set bindings that were generated for the resource utilization Gantt chart illustrated in Figure 25-30.
Example 25-22 Binding XML for a Resource Utilization Gantt Chart
<gantt IterBinding="GanttRugResourcesView2Iterator" id="GanttRugResourcesView2" xmlns="http://xmlns.oracle.com/adfm/dvt"> <ganttDataMap> <nodeDefinition DefName="model.GanttRugResourcesView" type="Resources"> <AttrNames> <Item Value="ResourceId" type="resourceId"/> </AttrNames> <Accessors> <Item Value="GanttRugTimebucketsView2" type="timeBuckets"/> </Accessors> </nodeDefinition> <nodeDefinition type="TimeBuckets" DefName="model.GanttRugTimebucketsView"> <AttrNames> <Item Value="TimeDaily" type="time"/> <Item type="metric" Value="Available"/> <Item type="metric" Value="Setup"/> <Item type="metric" Value="Used"/> </AttrNames> </nodeDefinition> <nodeDefinition type="Subresources"> <AttrNames/> </nodeDefinition> </ganttDataMap> </gantt>
Example 25-23 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.
Example 25-23 Code on the JSF Page for a Resource Utilization Gantt Chart
<dvt:resourceUtilizationGantt id="resourceUtilizationGantt1" value="#{bindings.GanttRugResourcesView2.resourceUtilizationGanttModel}" var="row" metrics="#{bindings.GanttRugResourcesView2.metrics}" taskbarFormatManager="#{bindings.GanttRugResourcesView2.resourceUtilizationGanttTaskbarFormatManager}" startTime="2008-07-03" endTime="2008-07-29"> <f:facet name="major"> <dvt:timeAxis scale="weeks"/> </f:facet> <f:facet name="minor"> <dvt:timeAxis scale="days"/> </f:facet> <f:facet name="nodeStamp"> <af:column sortProperty="ResourceId" sortable="false" headerText="#{bindings.GanttRugResourcesView2.hints.ResourceId.label}"> <af:outputText value="#{row.ResourceId}"/> </af:column> </f:facet> <af:column sortProperty="ResourceName" sortable="false" headerText="#{bindings.GanttRugResourcesView2.hints.ResourceName.label}"> <af:outputText value="#{row.ResourceName}"/> </af:column> <af:column sortProperty="ServiceRegion" sortable="false" headerText="#{bindings.GanttRugResourcesView2.hints.ServiceRegion.label}"> <af:outputText value="#{row.ServiceRegion}"/> </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 25-31 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.
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.
To create a databound scheduling Gantt chart:
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 25-32 shows an example where you could select the Persons
data collection to create a scheduling Gantt chart that displays the orders that each resource is responsible for.
Drag the collection onto a JSF page and, from the context menu, choose Gantt, then Scheduling.
In the ensuing Create Scheduling Gantt dialog, you do the following to connect resource- and task-related controls at the top of the dialog with corresponding columns in the data collection:
For Resource Id, select the column in the data collection that corresponds to the unique identifier of the resource.
In the Tasks page select a value from the Task Accessor dropdown list that contains the tasks assigned to the resource. Select the columns in the data collection that correspond to each of the following controls: Task Id, Start Time, and End Time. You can optionally specify a data column to map to task type. If you do not bind task type to data, then all task types default to Normal.
If the data collection has an accessor that holds dependent tasks, you have the option of using the Dependent Tasks page in the dialog to select the dependent tasks accessor and to select the columns in that data collection that correspond to each of the following controls: Dependency Type, From Task Id, and To Task Id.
If the data collection has an accessor for split tasks, you have the option of using the Split Tasks page in the dialog to select the split tasks accessor and to select the columns in that data collection that correspond to each of the following controls: Split Task Id, Start Time, and End Time.
If the data collection has an accessor for recurring tasks, you have the option of using the Recurring Tasks page in the dialog to select the Recurring Tasks accessor and to select the columns in that data collection that correspond to each of the following controls: Recurring Task Id, Type, Start Time, and End Time.
If the data collection has an accessor for subresources (lower-level resources), you have the option of using the Subresouces page to specify the appropriate accessor and to select the data column that contains the unique identifier of the subresource.
For example, a manager might be a resource and his direct reports might be subresources. If data contains subresources, then you can drill in a resource to locate subresources.
In the Table Columns section, you 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.
Click OK to dismiss the Create Scheduling Gantt dialog.
Select the dvt:schedulingGantt
element in the Structure window of the JSF page and set dates for the following attributes of the dvt:schedulingGantt
element in the Property Inspector:
StartTime
EndTime
The dates that you specify determine the initial view that appears in the scheduling Gantt chart at runtime.
Figure 25-33 shows the dialog used to create the scheduling Gantt chart from the data collection for resources responsible for shipping orders.
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
Example 25-24 shows the row set bindings that were generated for the scheduling Gantt chart that displays resources and orders shipped.
Example 25-24 Binding XML for a Scheduling Gantt Chart
<gantt IterBinding="PersonsIterator" id="Persons" xmlns="http://xmlns.oracle.com/adfm/dvt"> <ganttDataMap> <nodeDefinition DefName="oracle.fodemo.storefront.store.queries.PersonsVO" type="Resources"> <AttrNames> <Item Value="PersonId" type="resourceId"/> </AttrNames> <Accessors> <Item Value="OrdersVO" type="tasks"/> </Accessors> </nodeDefinition> <nodeDefinition type="Tasks" DefName="oracle.fodemo.storefront.store.queries.OrdersVO"> <AttrNames> <Item Value="OrderId" type="taskId"/> <Item Value="OrderDate" type="startTime"/> <Item Value="OrderStatusCode" type="taskType"/> <Item Value="OrderShippedDate" 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>
Example 25-25 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 months) and the minor time axis (in weeks). Finally, it lists the specifications for each column that appears in the list region of the Gantt chart. For brevity, the code in the af:column
elements for MembershipId
, Email
, and PhoneNumber
has been omitted.
Example 25-25 Code on the JSF Page for a Scheduling Gantt Chart
<dvt:schedulingGantt id="schedulingGantt1" value="#{bindings.Persons.schedulingGanttModel}" var="row" startTime="2008-03-29" endTime="2008-05-30" taskbarFormatManager="#{GanttBean.taskbarFormatManager}"> <f:facet name="major"> <dvt:timeAxis scale="months"/> </f:facet> <f:facet name="minor"> <dvt:timeAxis scale="weeks"/> </f:facet> <f:facet name="nodeStamp"> <af:column sortProperty="FirstName" sortable="false" headerText="#{bindings.Persons.hints.FirstName.label}"> <af:outputText value="#{row.FirstName}"/> </af:column> </f:facet> <af:column sortProperty="LastName" sortable="false" headerText="#{bindings.Persons.hints.LastName.label}"> <af:outputText value="#{row.LastName}"/> </af:column> ... <dvt:ganttLegend> </dvt:schedulingGantt>
A hierarchy viewer is an ADF Data Visualization component that visually displays data where parent-child relationships exist within the data. This component is useful where you want to display organization charts, network diagrams, or social networks, for example.
Figure 25-34 shows a runtime view of a hierarchy viewer component that renders an organization chart.
Figure 25-35 shows the Component Gallery displaying the types of hierarchy viewer that you can create.
Each hierarchy viewer component (<dvt:hierarchyViewer>
) that you create can include:
One or more node elements (<dvt:node>
)
One or more link elements (<dvt:link/>
)
The panel card element (<dvt:panelCard>
) can also be used in conjunction with the hierarchy viewer component. The panel card 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.
For information about customizing a hierarchy viewer after the data-binding is complete, see the "Using ADF Hierarchy Viewer Components" chapter in Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
Hierarchy viewers are based on data collections where a master/detail relationship exists between one or more detail collections and a master data collection. Using data controls in Oracle ADF, JDeveloper makes this a declarative task. You drag and drop a data collection from the Data Controls panel that generates one or more root nodes onto a JSF page.
To create a databound hierarchy viewer:
From the Data Controls panel, select a collection.
Drag the collection onto a JSF page and, from the context menu, choose Hierarchy Viewer, then select the type of hierarchy viewer you want to create and the layout of the hierarchy viewer component. Figure 25-35, "Component Gallery for Hierarchy Viewer Types" shows the available types of hierarchy viewers.
Note: Other than choosing a Quick Start layout, the Component Gallery and the subsequent Create Hierarchy Viewer dialog do not allow you to customize the appearance of the hierarchy viewer. To customize the appearance of the hierarchy viewer, set values for the hierarchy viewer using the Property Inspector after you complete this procedure. |
In the resulting Create Hierarchy Viewer dialog, you do the following:
In the Hierarchy list, select the collections you want to include as nodes in the runtime diagram.
For each collection that you select in the Hierarchy list, select attributes in the adjoining Node Attributes list to appear using one or more of the zoom levels available to you.
The hierarchy viewer component defines four zoom levels. You cannot modify these zoom levels or create new zoom levels. The default zoom level is 100%.
Click OK.
Figure 25-36 shows the Create Hierarchy Viewer dialog that appears if you create a hierarchy viewer using data from a data collection named rootEmp1
.
After completing the Create Hierarchy Viewer dialog, you can use the Property Inspector to specify settings for the hierarchy viewer attributes and you can also use the child tags associated with the hierarchy viewer tag to customize the hierarchy further.
Creating a hierarchy viewer from Data Controls panel has the following effect:
Creates the bindings for the hierarchy viewer in the page definition file of the JSF page
Adds the necessary tags to the JSF page for the hierarchy viewer component
Example 25-26 displays bindings that JDeveloper generated for a hierarchy viewer component. The example shows that two node definitions were generated. Each of these node definitions reference a view object and associated attributes. The code example also references an accessor (HvtestView
).
Example 25-26 Bindings for a Hierarchy Viewer
<tree IterBinding="rootEmp1Iterator" id="rootEmp1"> <nodeDefinition DefName="model.rootEmp"> <AttrNames> <Item Value="Adress"/> <Item Value="Email"/> <Item Value="Lastname"/> <Item Value="Thumburl"/> <Item Value="Firstname"/> <Item Value="Title"/> <Item Value="Managerid"/> <Item Value="Id"/> <Item Value="Phone"/> <Item Value="City"/> <Item Value="State"/> </AttrNames> <Accessors> <Item Value="HvtestView"/> </Accessors> </nodeDefinition> <nodeDefinition DefName="model.HvtestView"> <AttrNames> <Item Value="Adress"/> <Item Value="Email"/> <Item Value="Lastname"/> <Item Value="Thumburl"/> <Item Value="Firstname"/> <Item Value="Title"/> <Item Value="Managerid"/> <Item Value="Id"/> <Item Value="Phone"/> <Item Value="City"/> <Item Value="State"/> </AttrNames> <Accessors> <Item Value="ManageridHvtestView"/> </Accessors> </nodeDefinition> </tree>
Example 25-27 shows the code generated on the JSF page that is associated with the page definition file in Example 25-26. For brevity, the code in the facet elements named zoom75
, zoom50
, and zoom25
has been omitted. Some code from elements such as <af:panelGroupLayout>
, <af:spacer/>
, and <af:separator/>
has also been omitted.
The example shows a hierarchy viewer component that references the rootEmp1
tree binding. It includes a node (dvt:node)
component that in turn includes a panel card component (dvt:panelCard)
. The panel card component defines slide_horz
as the effect to use when changing the display of content referenced by the node.
It is not possible to customize the layout of a hierarchy viewer component or to add additional components, such as panel card, using the Create Hierarchy dialog illustrated in Figure 25-36. For this reason, you customize the layout of a hierarchy viewer component directly in the code, in the visual editor, or by setting values in the Property Inspector. You add additional components, such as panel card, using the Component Palette.
Example 25-27 Code on the JSF Page for a Hierarchy Viewer
<dvt:hierarchyViewer inlineStyle="width:100%;height:100%;" id="hv1" var="node" value="#{bindings.rootEmp1.treeModel}" selectionListener="#{bindings.rootEmp1.treeModel.makeCurrent}" navigateUpListener="#{bindings.ExecuteWithParams1.execute}"> <dvt:link linkType="orthogonalRounded"/> <dvt:node type="model.rootEmp model.HvtestView" width="186" height="210" setAnchorListener="#{bindings.ExecuteWithParams.execute}" showNavigateUp="#{node.Managerid != null}"> <f:facet name="zoom100"> <af:panelGroupLayout layout="vertical" inlineStyle="width:100%;height:100%;background-color:#C0E4FD;border-color:#87CDFC;border-width:1;padding:5;"> <dvt:panelCard effect="slide_horz"> <af:showDetailItem text="Contact Info" inlineStyle="font-size:xx-small;"> <af:spacer height="2"/> <af:panelFormLayout inlineStyle="width:100%;height:100%;"> <af:panelLabelAndMessage label="#{bindings.rootEmp1.hints.Email.label}"> <af:goLink text="#{node.bindings.Email.inputValue}" destination="mailto:#{node.bindings.Email.inputValue}"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="#{bindings.rootEmp1.hints.Phone.label}"> <af:outputFormatted value="#{node.bindings.Phone.inputValue}"/> </af:panelLabelAndMessage> </af:panelFormLayout> </af:showDetailItem> <af:showDetailItem text="Address"> <af:spacer height="2"/> <af:panelFormLayout inlineStyle="width:100%;height:100%;"> <af:panelLabelAndMessage label="Address"> <af:outputFormatted value="#{node.bindings.Adress.inputValue}"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label=""> <af:outputFormatted value="#{node.bindings.City.inputValue}, #{node.bindings.State.inputValue} "/> </af:panelLabelAndMessage> </af:panelFormLayout> </af:showDetailItem> </dvt:panelCard> </af:panelGroupLayout> </f:facet> </dvt:node> </dvt:hierarchyViewer>