Figure 32-28 shows the Create Treemap dialog.

If you click OK, the treemap is added to your page, and you can use the Properties window to specify data values and configure additional display attributes. Alternatively, you can choose to bind the data during creation and use the dialog to configure the associated node data.

In the Properties window you can click the icon that appears when you hover over the property field to display a property description or edit options. Figure 32-29 shows the dropdown menu for a treemap value attribute.

Before you begin:

It may be helpful to have an understanding of how treemap attributes and treemap child tags can affect functionality. For more information, see Configuring Treemaps.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

You must complete the following tasks:

1. Create an application workspace as described in Creating an Application Workspace.

2. Create a view page as described in Creating a View Page.

To add a treemap to a page:

Figure 32-30 shows the Create Sunburst dialog.

If you click OK, the sunburst is added to your page, and you can use the Properties window to specify data values and configure additional display attributes. Alternatively, you can choose to bind the data during creation and use the dialog to configure the associated node data.

In the Properties window you can use the dropdown menu for each attribute field to display a property description and options such as displaying an EL Expression Builder or other specialized dialogs. Figure 32-31 shows the dropdown menu for a sunburst value attribute.

Before you begin:

It may be helpful to have an understanding of how sunburst attributes and sunburst child tags can affect functionality. For more information, see Configuring Treemaps.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

You must complete the following tasks:

1. Create an application workspace as described in Creating an Application Workspace.

2. Create a view page as described in Creating a View Page.

To add a sunburst to a page:

Before you begin:

It may be helpful to have an understanding of how treemap and sunburst attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps. For information about configuring sunburst attributes and child tags, see Configuring Sunbursts.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

You will need to complete these tasks:

• Add a treemap or sunburst to your page. For more information, see How to Add a Treemap to a Page or How to Add a Sunburst to a Page.

• If you did not bind the treemap or sunburst to a data control when you added the component to the page, add data to the treemap or sunburst. For information about adding data to treemaps or sunbursts using UI-first development, see Adding Data to Treemap and Sunburst Components.

To configure a treemap or sunburst discrete attribute group:

1. In the Structure window, right-click the dvt:treemapNode or dvt:sunburstNode node and choose Insert Inside Component Node > Attribute Groups.

   For example, to configure a treemap discrete attribute group, right-click the dvt:treemapNode node and choose Insert Inside Treemap Node > Attribute Groups.

2. Right-click the dvt:attributeGroups element and choose Go to Properties.

3. In the Properties window, expand the Appearance section.

4. From the Value attribute's dropdown menu, choose Expression Builder and create an expression that references the color metric and the condition that will control the color display.

   For example, if you want your treemap to display different colors for median income levels higher or lower than $50,000 as shown in Figure 32-6, create an expression similar to the following expression for the Value field:

   #{row.income > 50000}
   

   For help with creating EL expressions, see How to Create an EL Expression.

5. From the Label attribute's dropdown menu, choose Expression Builder and create an expression for the legend that describes what the discrete colors or patterns represent.

   For example, to let the user know that the colors represent high and low median income levels, create an expression similar to the following expression for the Label field:

   #{row.income > 50000 ? 'High Income' : 'Low Income'}
   

6. From the Type attribute's dropdown menu, choose Edit.

7. From the Edit Property dialog, choose color, pattern, or both, and click OK.

   If you choose both color and pattern and build the page now, the treemap or sunburst will use default colors and patterns for the discrete attribute group.

   Figure 32-32 shows the treemap that displays if you accept the default colors and patterns in the census data example.

   Figure 32-32 Treemap Discrete Attribute Group with Default Colors and Patterns

   

8. Optionally, to change the attribute group's default colors, do the following:

   1. In the Structure window, right-click the dvt:attributeGroups element and choose Insert Inside Attribute Groups > Attribute Match Rule.

      The dvt:attributeMatchRule tag is used to replace an attribute when the data matches a given condition. In the census data example, the condition is median income higher than $50,000.

   2. Right-click the dvt:attributeMatchRule element and choose Go to Properties.

   3. In the Group field, enter true if you want the color to display when the condition is true, or enter false if you want the color to display when the condition is false.

      For example, enter true to choose the color to display in the census data example when the median income level is higher than 50000.

   4. In the Structure window, right-click the dvt:attributeMatchRule element and choose Insert Inside Match Rule > Attribute.

   5. In the Insert Attribute dialog, enter color for the name field and a color in the value field, and click OK.

      The value field accepts a six-digit RGB hexadecimal value. For example, to set the value to green, enter the following in the value field: #00AA00.

   6. Repeat step 8.a through step 8.e if you want to change the default color for the other half of the condition.

      For example, add another match rule to define the color that displays when the income is under 50000, and set the Group field to false.

9. Optionally, to change the attribute group's default patterns, do the following:

   1. In the Structure window, right-click the dvt:attributeGroups element and choose Insert Inside Attribute Groups > Attribute Match Rule.

   2. Right-click the dvt:attributeMatchRule element and choose Go to Properties.

   3. In the Group field, enter true if you want the pattern to display when the condition is true, or enter false if you want the pattern to display when the condition is false.

   4. In the Structure window, right-click the dvt:attributeMatchRule element and choose Insert Inside Attribute Match Rule > Attribute.

   5. In the Insert Attribute dialog, enter pattern for the Name field and a supported pattern in the Value field, and click OK.

      For example, enter smallDiamond in the Value field to change the pattern to small diamonds. For the list of available patterns, see Configuring Pattern Display.

   6. Repeat step 9.a through step 9.e if you want to change the default color for the other half of the condition.

      For example, add another match rule to define the color that displays when the income is under 50000, and set the Group field to false.

The example below shows the code on the JSF page if you configure a discrete attribute group for the treemap shown in Figure 32-6.

<dvt:treemap id="t1" summary="SampleTreemap" value="#{treemap.censusData}"
             var="row" colorLabel="Median Household Income" sizeLabel="Population"
             displayLevelsChildren="3" emptyText="No Data to Display"
             legendSource="ag1">
  <dvt:treemapNode id="tn1" value="#{row.size}" label="#{row.text}">
    <dvt:attributeGroups id="ag1" value="#{row.income > 50000}"
                         label="#{row.income > 50000 ? 'High Income' : 'Low Income'}"
                         type="color">
      <dvt:attributeMatchRule id="amr1" group="true">
        <f:attribute name="color" value="#00AA00"/>
      </dvt:attributeMatchRule>
      <dvt:attributeMatchRule id="amr2" group="false">
        <f:attribute name="color" value="#AA0000"/>
      </dvt:attributeMatchRule>
    </dvt:attributeGroups>
    <f:facet name="content"/>
  </dvt:treemapNode>
</dvt:treemap>

Before you begin:

It may be helpful to have an understanding of how treemap and sunburst attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps. For information about configuring sunburst attributes and child tags, see Configuring Sunbursts.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

You will need to complete these tasks:

• Add a treemap or sunburst to your page. For more information, see How to Add a Treemap to a Page or How to Add a Sunburst to a Page.

• If you did not bind the treemap or sunburst to a data control when you added the component to the page, add data to the treemap or sunburst. For information about adding data to treemaps or sunbursts using UI-first development, see Adding Data to Treemap and Sunburst Components.

To configure a treemap or sunburst continuous attribute group:

1. In the Structure window, right-click the dvt:treemapNode or dvt:sunburstNode node and choose Insert Inside Component Node > Attribute Groups.

   For example, to configure a treemap continuous attribute group, right-click the dvt:treemapNode node and choose Insert Inside Treemap Node > Attribute Groups.

2. Right-click the dvt:attributeGroups element and choose Go to Properties.

3. In the Properties window, expand the Appearance section.

4. From the Value attribute's dropdown menu, choose Expression Builder and enter an expression that references the color metric.

   For example, to specify an EL expression that returns the income data from the census example, choose Expression Builder and enter the following value in the Value field: #{row.income}. For help with creating EL expressions, see How to Create an EL Expression.

5. In the Type field, enter color.

6. In the AttributeType field, use the attribute's dropdown menu to choose continuous.

7. Optionally, set values for the following minimum or maximum range and labels:

   • MinValue: Enter the minimum boundary for the range. Alternatively, choose Expression Builder from the attribute's dropdown menu and enter the expression that returns the minimum boundary.

     For example, enter 35000 in the MinValue field to set the lower boundary of the range to 35,000.

   • MaxValue: Enter the maximum boundary for the range. Alternatively, choose Expression Builder from the attribute's dropdown menu and enter the expression that returns the maximum bound.

   • MinLabel: Enter the label for the minimum value to be displayed in the legend. Alternatively, choose Select Text Resource or Expression Builder from the attribute's dropdown menu to select a text resource or EL expression.

     For example, enter $35000 in the MinLabel field to set the label displayed in the legend to $35000.

   • MaxLabel: Enter the label for the maximum value to be displayed in the legend. Alternatively, choose Select Text Resource or Expression Builder from the attribute's dropdown menu to select a text resource or EL expression.

8. To define the colors used for the minimum and maximum bounds of the range, do the following:

   1. In the Structure window, right-click the dvt:attributeGroups element and choose Insert Inside Attribute Groups > Attribute.

   2. In the Insert Attribute dialog, enter color1 for the name and a value for the minimum boundary, and click OK.

      The value field accepts a six-digit RGB hexadecimal value. For example, to set the value of the minimum bound to a dark green, which is the color used in the attribute group in Figure 32-1, enter the following in the value field: #14301C.

   3. In the Structure window, right-click the dvt:attributeGroups element and choose Insert Inside Attribute Groups > Attribute.

   4. In the Insert Attribute dialog, enter color2 for the name and a value for the maximum boundary, and click OK.

      The value field accepts a six-digit RGB hexadecimal value. For example, to set the value of the maximum bound to a light green, which is the color used in the attribute group in Figure 32-1, enter the following in the value field: #68C182.

Figure 32-9 shows the code on the JSF page if you configure the continuous attribute group shown in Figure 32-1.

<dvt:treemap id="t1" summary="SampleTreemap" value="#{treemap.censusData}"
             var="row" colorLabel="Median Household Income" sizeLabel="Population"
             displayLevelsChildren="3" emptyText="No Data to Display"
             legendSource="ag1">
  <dvt:treemapNode id="tn1" value="#{row.size}" label="#{row.text}">
    <dvt:attributeGroups id="ag1" value="#{row.income}" type="color"
                         attributeType="continuous" minValue="35000"
                         maxValue="70000" minLabel="$35000" maxLabel="$70000">
      <f:attribute name="color1" value="#14301C"/>
      <f:attribute name="color2" value="#68C182"/>
    </dvt:attributeGroups>
    <f:facet name="content"/>
  </dvt:treemapNode>
</dvt:treemap>

Configure the treemap or sunburst Other node by setting values for the following attributes:

• otherThreshold: Specify the percentage of the parent or root node under which a node would be aggregated into the Other node. Valid values range from 0 (default) to 1.

  For example, a value of 0.1 would cause all nodes that are less than 10% of their parent's value to be aggregated into the Other node. In Figure 32-17, the otherThreshold is set to.08 or eight percent which aggregated the South Carolina, Delaware, West Virginia, and District of Columbia nodes in the South Atlantic region.

  If you increase the value to 0.1 or 10%, the Maryland node is added to the aggregation. Figure 32-33 shows the same treemap with the otherThreshold attribute set to 0.1.

  Figure 32-33 Treemap Showing Other Node With otherThreshold Set to 10 Percent

  

• otherThresholdBasis: Specify the basis used to apply the otherThreshold value as either a percentage of the root node or as a percentage of the node's parent node. Valid values are:

  • parentPercentage: Nodes are compared against the size of the parent node when applying otherThreshold. This is the default behavior and the setting used for the figures in this section.

    For example, if one of the nodes in the treemap has a parent in the Other node, the child node will also be aggregated into the Other node when you drill down to its level, regardless of the node's value. If two child nodes have the same value but one node's parent is in the Other node, that child node will be aggregated into the Other node.

  • rootPercentage: Nodes are compared against the size of the treemap or sunburst's root node when applying otherThreshold.

    For example, if you set otherThreshold to 0.1, all nodes whose values are less than 10% of the total sunburst display will be included in Other regardless of the size of their parents.

• otherColor: Specify a reference to a method that takes the RowKeySet of all nodes contained within the current Other node and returns a String for the color of the Other node.

  For example, the census data example uses a method to calculate the mean income of all the nodes contained within the Other node. If the mean household income is less than 50,000, the method returns the same color value used to display low income as the non-aggregated nodes in the treemap. Notice how the color changed on the Other node in Figure 32-33 to reflect the higher mean income when the Maryland node is included in the Other node.

  The example below shows the sample method to specify the otherColor value based on the mean income in the census data example.

  import org.apache.myfaces.trinidad.model.RowKeySet;
  import org.apache.myfaces.trinidad.model.TreeModel;
  
  public String otherColor(RowKeySet set) {
    // The color should be the mean income of the contained regions.  Note that it should actually
    // be the median, but we can't calculate that with the available information.
    TreeModel tree = getCensusRootData();
    // Loop through and get the population + average income
    double population = 0;
    double average = 0;
    for(Object rowKey : set) {
      CensusData.CensusTreeNode item = (CensusData.CensusTreeNode) tree.getRowData(rowKey);
      population += item.getSize().doubleValue();
      average += item.getSize().doubleValue() * item.getIncome();
    }
    // Calculate the average
    average = average / population;
    // Match the attr groups used by the demos
    return average > 50000 ? "#CC3300" : "#003366";
  }

• otherPattern: Optionally, specify a reference to a method that takes the RowKeySet of all nodes contained within the current Other node and returns a String for the pattern of the Other node.

  The example below shows the sample code for a method that sets the pattern fill to smallDiamond on the Other node.

  import org.apache.myfaces.trinidad.model.RowKeySet;
  public String otherPattern(RowKeySet rowKeySet) {
    return "smallDiamond";
  }

Before you begin:

It may be helpful to have an understanding of how treemap and sunburst attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps. For information about configuring sunburst attributes and child tags, see Configuring Sunbursts.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

You will need to complete these tasks:

• Add a treemap or sunburst to your page. For more information, see How to Add a Treemap to a Page or How to Add a Sunburst to a Page.

• If you did not bind the treemap or sunburst to a data control when you added the component to the page, add data to the treemap or sunburst. For information about adding data to treemaps or sunbursts using UI-first development, see Adding Data to Treemap and Sunburst Components.

• Create the method that takes the RowKeySet of all nodes contained within the current Other node and returns a String for the color of the Other node.

  To use the United States census data example, add the sample otherColor() method in the example above to a managed bean.

  If you need help with managed beans, see Creating and Using Managed Beans.

• Optionally, create the method that takes the RowKeySet of all nodes contained within the current Other node and returns a String for the pattern of the Other node.

  To use the United States census data example, add the sample otherPattern() method in the example above to a managed bean.

To add the Other node to a treemap or sunburst:

Before you begin:

It may be helpful to have an understanding of how treemap attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

Add a treemap to your page. For more information, see How to Add a Treemap to a Page.

To add advanced node content to a treemap:

Before you begin:

It may be helpful to have an understanding of sunburst attributes and child tags can affect functionality. For information about configuring sunburst attributes and child tags, see Configuring Sunbursts.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

Add a sunburst to your page. For more information, see How to Add a Sunburst to a Page.

To add advanced root node content to a sunburst:

Before you begin:

It may be helpful to have an understanding of how treemap attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

Add a treemap to your page. For more information, see How to Add a Treemap to a Page.

To configure treemap leaf node labels:

Before you begin:

It may be helpful to have an understanding of how treemap and sunburst attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps. For information about configuring sunburst attributes and child tags, see Configuring Sunbursts.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

Add a sunburst to your page. For more information, see How to Add a Sunburst to a Page.

To configure sunburst node labels:

Before you begin:

It may be helpful to have an understanding of how sunburst attributes and child tags can affect functionality. For more information about configuring treemap attributes. For more information about configuring sunburst attributes and child tags, see Configuring Sunbursts.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

Add a sunburst to your page. For more information, see How to Add a Sunburst to a Page.

To configure a sunburst node radius:

Configure treemap node headers by adding the dvt:treemapNodeHeader element to your treemap node and setting values for the following attributes:

• labelStyle: Specify the font style for the label displayed in the header. This attribute accepts CSS style attributes such as font-size or color.

  For the complete list of CSS attributes, visit the World Wide Web Consortium's web site at:

  http://www.w3.org/TR/CSS21/

• titleHalign: Specify the horizontal alignment of the header's title. By default, this attribute is set to start which aligns the title to the left in left-to-right mode and to the right in right-to-left mode. You can set this to center which aligns the title to the center or to end which aligns the title to the right in left-to-right mode and to the left in right-to-left mode.

• useNodeColor: Set this to on to have the header use the node color of the parent node.

Before you begin:

It may be helpful to have an understanding of how treemap attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

You will need to complete these tasks:

• Add a treemap to your page. For more information, see How to Add a Treemap to a Page.

• If you did not bind the treemap to a data control when you added the component to the page, add data to the treemap. For information about adding data to treemaps or sunbursts using UI-first development, see Adding Data to Treemap and Sunburst Components.

To configure a treemap node header:

Before you begin:

It may be helpful to have an understanding of how treemap attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

Add a treemap to your page. For more information, see How to Add a Treemap to a Page.

To customize treemap group gap display:

This section provides an example for configuring a sunburst or treemap component to display popups using the af:showPopupBehavior tag.

To configure a popup using the af:showPopupBehavior and af:popup tags, define the af:popup component and associated methods, insert the af:showPopupBehavior tag as a child of the dvt:treemapNode or dvt:sunburstNode component and configure the af:showPopupBehavior component's tags for the trigger type and reference to the af:popup component's id attribute.

Figure 32-36 shows a treemap configured to display a brief message and the name of the treemap node as the user hovers the mouse over the treemap.

The example below shows the code on the page to declare the popup.

<af:group id="g1">
  <af:outputText value="Hover on a node to show a popup."
                 inlineStyle="font-size:medium;" id="ot1"/>
  <af:panelGroupLayout layout="horizontal" id="pgl1">
    <dvt:treemap id="treemap" value="#{treemap.censusData}" var="row"
                 colorLabel="Median Household Income" sizeLabel="Population"
                 displayLevelsChildren="3" legendSource="ag1"
                 inlineStyle="width:700px; height:450px;"
                 summary="Treemap Popup">
      <dvt:treemapNode id="tn1" value="#{row.size}" label="#{row.text}">
        <af:showPopupBehavior popupId="::noteWindowPopup"
                              triggerType="mouseHover"/>
        <dvt:attributeGroups id="ag1" value="#{row.income}"
                             type="color"
                             attributeType="continuous"
                             minValue="35000" maxValue="70000"
                             minLabel="$35000" maxLabel="$70000">
          <f:attribute name="color1" value="#14301C"/> 
          <f:attribute name="color2" value="#68C182"/>
        </dvt:attributeGroups>     
      </dvt:treemapNode>
    </dvt:treemap>
  </af:panelGroupLayout>
  <af:popup childCreation="deferred" autoCancel="disabled"
            id="noteWindowPopup" launcherVar="source"
            eventContext="launcher" clientComponent="true"
            contentDelivery="lazyUncached">
    <af:setPropertyListener from="#{source.currentRowData.text}"
                            to="#{treemap.noteWindowMessage}"
                            type="popupFetch"/>
    <af:noteWindow id="nw1">
      <af:outputFormatted value="Hello from #{treemap.noteWindowMessage}"
                          id="of8"/>
    </af:noteWindow>
  </af:popup>
</af:group>

Before you begin:

It may be helpful to have an understanding of how treemap and sunburst attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps. For information about configuring sunburst attributes and child tags, see Configuring Sunbursts.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

You will need to complete these tasks:

• Add a treemap or sunburst to your page. For more information, see How to Add a Treemap to a Page or How to Add a Sunburst to a Page.

• If you did not bind the treemap or sunburst to a data control when you added the component to the page, add data to the treemap or sunburst. For information about adding data to treemaps or sunbursts using UI-first development, see Adding Data to Treemap and Sunburst Components.

• Add the ADF Faces popup component to your page and insert the menu, dialog, or window that you want the popup to display.

  For example, the popup in Figure 32-36 uses a note window to display the "Hello from Texas" message. To use this example, insert the ADF Faces noteWindow component inside the popup component, and insert the ADF Faces outputFormatted component inside the note window. The sample code is displayed in the code example above.

  The example popup also includes the ADF Faces setListener component that retrieves the data from the treemap for use by the note window. In this example, the data is retrieved from the text attribute of the current node (source.currentRowData.text) and then stored in the noteWindowMessage string variable in the treemap managed bean. To use this example, add the code shown in the example below to the treemap bean:

  private String noteWindowMessage = null;
  
  public void setNoteWindowMessage(String noteWindowMessage) {
    this.noteWindowMessage = noteWindowMessage;
  }
  public String getNoteWindowMessage() {
    return noteWindowMessage;
  }
  

  If you need help with managed beans, see Creating and Using Managed Beans. For additional details about using popup windows to display dialogs, menus, and windows, see Using Popup Dialogs, Menus, and Windows.

• Create any additional components needed to display the selection.

  For example, the page in Figure 32-36 uses an af:outputText component to prompt the user to hover on a node to show a popup. For additional information about configuring af:outputText components, see Displaying Output Text and Formatted Output Text.

To add a popup to a treemap or sunburst:

Figure 32-37 shows a simple example of a sunburst configured to use a custom selection listener. As the user makes single or multiple selections, the console displays the name of the node or nodes selected and the number of nodes added or removed from the selection.

The example below shows the selectionListener method used to respond to the user clicks and generate the output to the console. Store this method in the sunburst's managed or backing bean.

import javax.faces.component.UIComponent;
import oracle.adf.view.faces.bi.component.sunburst.UISunburst;
import org.apache.myfaces.trinidad.event.SelectionEvent;
import org.apache.myfaces.trinidad.model.RowKeySet;

public void selectionListener(SelectionEvent event) {
  UIComponent component = event.getComponent();
  if(component instanceof UISunburst) {
     UISunburst sunburst = (UISunburst) component;
     StringBuilder s = new StringBuilder();
       // Get the selected row keys and print
     RowKeySet selectedRowKeys = sunburst.getSelectedRowKeys();
     System.out.println(selectedRowKeys.size() + " Nodes Currently Selected:");
     if (selectedRowKeys != null) {
       for (Object rowKey : selectedRowKeys) {
          TreeNode rowData = (TreeNode)sunburst.getRowData (rowKey);
          s.append (rowData.getText()).append(", ");
       }
       if (s.length() > 0)
         s.setLength (s.length() - 2);
       System.out.println(s);
     }
       // Get the row keys that were just added to the selection
     RowKeySet addedRowKeys = event.getAddedSet();
     System.out.println(addedRowKeys.size() + " Nodes Added");
       // Get the row keys that were just removed from the selection
     RowKeySet removedRowKeys = event.getRemovedSet();
     System.out.println(removedRowKeys.size() + " Nodes Removed");
   }
 }

You declare the selection listener method in the treemap or sunburst component's selectionListener attribute and add any additional components to display the selection to the JSF page. In the example in this section, the listener is simply displaying the output to the console, and only the prompt to the user to make the selection is added to the page. The example below shows the portion of the page used to set up the sunburst. The selectionListener attribute is highlighted in bold font.

<af:panelGroupLayout id="pgl12">
  <af:group id="g5">
    <af:outputText value="Click on a node to make a selection. Use Ctrl-click for multiple nodes."
                   inlineStyle="font-size:large;" id="ot3"/>
    <dvt:sunburst id="s1" summary="SampleSunburst" value="#{sunburst.censusData}"
                  var="row" varStatus="rowStatus" displayLevelsChildren="3"
                  colorLabel="Median Household Income" sizeLabel="Population"
                  inlineStyle="width:500px;height:500px;"
                  selectionListener="#{sunburst.selectionListener}">
      <dvt:sunburstNode id="sn1" value="#{row.size}" label="#{row.text}"
                        shortDesc="#{row.text}&lt;br/>#{row.size}">
        <dvt:attributeGroups id="ag1" type="color "
                             value="#{row.income > 50000}"
                             label="#{row.income > 50000 ? 'High Income' : 'Low Income'}"
                             minLabel="Low" maxLabel="High">
        </dvt:attributeGroups>
      </dvt:sunburstNode>
    </dvt:sunburst>
  </af:group>
</af:panelGroupLayout>

Before you begin:

It may be helpful to have an understanding of how treemap and sunburst attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps. For information about configuring sunburst attributes and child tags, see Configuring Sunbursts.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

You will need to complete these tasks:

• Add a treemap or sunburst to your page. For more information, see How to Add a Treemap to a Page or How to Add a Sunburst to a Page.

• If you did not bind the treemap or sunburst to a data control when you added the component to the page, add data to the treemap or sunburst. For information about adding data to treemaps or sunbursts using UI-first development, see Adding Data to Treemap and Sunburst Components.

• Create the method that will define the selectionListener and return the selection state and store it in the treemap or sunburst component's managed or backing bean.

  To use the same census data example, copy the example code into a managed bean named sunburst. If you need help with managed beans, see Creating and Using Managed Beans.

• Create any additional components needed to display the selection.

  For example, the page in Figure 32-37 uses an af:outputText component to prompt the user to click on a node to make a selection. For additional information about configuring af:outputText components, see Displaying Output Text and Formatted Output Text.

To add selection support to a treemap or sunburst:

Define treemap and sunburst context menus using these context menu facets:

• bodyContextMenu: Specifies a context menu that is displayed on non-selectable elements in the treemap or sunburst component.

• contextMenu: Specifies a context menu that is displayed on any selectable element in the treemap or sunburst component.

• multiSelectContextMenu: Specifies a content menu that is displayed when multiple elements are selected in the treemap or sunburst component.

Each facet on a JSP or JSPX page supports a single child component. Facelets support multiple child components. For all of these facets to work, selection must be enabled in the treemap or sunburst's properties. Context menus are currently only supported in Flash.

You create a context menu by using af:menu components within an af:popup component. You can then invoke the context menu popup from another component, based on a specified trigger. For more information about configuring context menus, see Using Popup Dialogs, Menus, and Windows.

Figure 32-38 shows a sample treemap configured to display a context menu using the contextMenu facet when the user right-clicks on one of the treemap's regions, divisions, or nodes.

If the user selects View Details for Midwest Region, the application can provide additional information about the Midwest Region node.

Figure 32-39 shows the text output that is displayed below the treemap after the user chooses to view the details for the Midwest Region. In this example, the output simply verifies what the user clicked on, but this context menu could also be used to present additional details about the Midwest Region.

The example below shows the sample code used to configure the example treemap and the context menu.

<af:group id="g1">
  <af:outputFormatted value="Right click to display context menu." id="of1"/>
  <dvt:treemap id="t1" displayLevelsChildren="3" summary="Sample Treemap"
               var="row" value="#{treemap.censusData}"
               varStatus="rowStatus"
               binding="#{treemapContextMenu.treemap}"
               colorLabel="Median Household Income"
               sizeLabel="Population"
               legendSource="ag1">
    <dvt:treemapNode id="tn1" value="#{row.size}" label="#{row.text}"
                     shortDesc="#{row.text}<br/>Population: #{row.size}<br/>Income: #{row.income}">
      <dvt:attributeGroups id="ag1" value="#{row.income > 50000}"
                           label="#{row.income > 50000 ? 'High Income' : 'Low Income'}"
                           type="color">
      </dvt:attributeGroups>
    </dvt:treemapNode>  
    <f:facet name="contextMenu">
      <af:popup id="p1" contentDelivery="lazyUncached">
        <af:menu text="menu 1" id="m1">
          <af:commandMenuItem text="View Details for #{treemapContextMenu.selectionState}"
                       id="cmi1"
                       actionListener="#{treemapContextMenu.menuItemListener}"/>
          <af:group id="g2">
            <af:commandMenuItem text="Add Task" id="cmi2"
                         actionListener="#{treemapContextMenu.menuItemListener}"/>
            <af:commandMenuItem text="Add Notes" id="cmi3"
                         actionListener="#{treemapContextMenu.menuItemListener}"/>
          </af:group>
        </af:menu>
      </af:popup>
    </f:facet>
  </dvt:treemap>
  <af:spacer width="10" id="s1"/>
  <af:outputFormatted value="#{treemapContextMenu.status}" id="of2"
                      clientComponent="true"
                      binding="#{treemapContextMenu.outputFormatted}"/>
</af:group>

The example uses a backing bean named treemapContextMenu for the methods to set the treemap, return the selection state and respond to user clicks on the context menu. This example also uses the same classes and methods to set up the data for the treemap as described in Adding Data to Treemap and Sunburst Components. The example below shows the code for the ContextMenuSample class.

import javax.faces.component.UIComponent;
import javax.faces.event.ActionEvent;
import oracle.adf.view.faces.bi.component.treemap.UITreemap;
import oracle.adf.view.rich.component.rich.nav.RichCommandMenuItem;
import oracle.adf.view.rich.component.rich.output.RichOutputFormatted;
import org.apache.myfaces.trinidad.context.RequestContext;
 
public class ContextMenuSample {
    private UITreemap treemap;
    private String status;
    private RichOutputFormatted outputFormatted;
public ContextMenuSample() {
}
public void setTreemap(UITreemap treemap) {
    this.treemap = treemap;
}
public UITreemap getTreemap() {
    return treemap;
}
public String getSelectionState() {
    if (treemap != null) {
      return TreemapSample.convertToString(treemap.getSelectedRowKeys(), treemap);
    } else
      return null;
  }
public String getStatus() {
    return status;
  }
public void setOutputFormatted(RichOutputFormatted outputFormatted) {
    this.outputFormatted = outputFormatted;
  }
public RichOutputFormatted getOutputFormatted() {
    return outputFormatted;
  }
/**
   * Called when a commandMenuItem is clicked.  Updates the outputText with information about the menu item clicked.
   * @param actionEvent
 */
public void menuItemListener(ActionEvent actionEvent) {
    UIComponent component = actionEvent.getComponent();
    if (component instanceof RichCommandMenuItem) {
      RichCommandMenuItem cmi = (RichCommandMenuItem)component;
      // Add the text of the item into the status message
      StringBuilder s = new StringBuilder();
      s.append("You clicked on \"").append(cmi.getText()).append("\".  <br><br>");
      this.status = s.toString();
      // Update the status text component
      RequestContext.getCurrentInstance().addPartialTarget(this.outputFormatted);
    }
  }
}

Before you begin:

It may be helpful to have an understanding of how treemap and sunburst attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps. For information about configuring sunburst attributes and child tags, see Configuring Sunbursts.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

You will need to complete these tasks:

• Add a treemap or sunburst to your page. For more information, see How to Add a Treemap to a Page or How to Add a Sunburst to a Page.

• If you did not bind the treemap or sunburst to a data control when you added the component to the page, add data to the treemap or sunburst. For information about adding data to treemaps or sunbursts using UI-first development, see Adding Data to Treemap and Sunburst Components.

• Create the managed bean that will define the actionListener and return the selection state.

  To use the same census data example, copy the example code given above into a backing bean named treemapContextMenu. If you need help with managed beans, see Creating and Using Managed Beans.

• Create any additional components needed to support the context menu.

  For example, the page in Figure 32-38 uses an af:outputText component to prompt the user to right-click to display a context menu. When the user selects the custom context menu item, the page uses an af:outputFormatted component to display a message confirming which node the user selected.

  See the code sample given above for the details needed to configure the additional components. For additional information about af:outputText and af:outputFormatted components, see Displaying Output Text and Formatted Output Text.

To add a context menu to a treemap or sunburst:

1. If your application is using a backing bean, do the following:

   1. In the Structure window, right-click the dvt:treemap or dvt:sunburst node and choose Go to Properties.

   2. Expand the Advanced section and enter a value for the Binding attribute to associate the treemap with the managed bean that contains the methods for the context menu. Alternatively, choose Edit from the attribute's dropdown menu to create or select an existing bean and method.

   The binding attribute is needed for the census data example because it includes the code to set up the treemap, but it also uses the data and methods from the same classes and methods that were described in How to Add Data to Treemap or Sunburst Components. For example, for a backing bean named treemapContextMenu, enter the following in the Binding field: #{treemapContextMenu.treemap}.

2. In the Structure window, right-click the dvt:treemap or dvt:sunburst node and choose Insert Inside Treemap or Insert Inside Sunburst > Facet.

3. In the Insert Facet dialog, enter the name of the facet that corresponds to the type of context menu that you wish to create.

   For example, to define a contextMenu facet, enter the following in the Name field: contextMenu.

4. Click OK.

   The facet is created as a child of the dvt:treemap or dvt:sunburst node.

5. In the Structure window, right-click the f:facet - context menu node and choose Insert Inside Facet > ADF Faces > Popup.

6. Right-click the af:popup node and choose Go to Properties.

7. In the Properties window, set the following properties:

   • ContentDelivery: Set this to LazyUncached.

   • AutoCancel: Set this to <default> enabled.

   • ChildCreation: Set this to <default> immediate.

8. In the Structure window, right-click the af:popup node and choose Insert Inside Popup > Menu.

9. In the Structure window, right-click the af:menu node and choose Insert Inside Menu > Menu Item to create a menu item.

10. Right-click the af:commandMenuItem and choose Go to Properties.

11. In the Properties window, expand the Common section and set the following properties:

    • Text: Enter the text to display in the menu.

      For example, to duplicate the treemap census data example, enter the following in the Text field: View Details for #{treemapContextMenu.selectionState}.

    • ActionListener: Enter the name of the method to be called when the user selects the menu item.

      For example, for a managed bean named treemapContextMenu and a method named menuItemListener, enter the following in the ActionListener field: #{treemapContextMenu.menuItemListener}.

12. Repeat Step 9 through Step 11 for each menu item that you want the context menu to display.

    Tip:

    To group related menu items, wrap the ADF Faces af:group component around the af:commandMenuItem as shown in the code sample above for the Context Menu class. For information about the af:group component, see Grouping Related Items.

13. To configure additional context menu facets, repeat Step 2 through Step 12.

JDeveloper includes the necessary code to support drilling. However, you may want the application to perform some other task when the node is drilled. You can define a method to perform the additional task and add it as a drill listener to the treemap's or sunburst's managed or backing bean.

Before you begin:

It may be helpful to have an understanding of how treemap and sunburst attributes and child tags can affect functionality. For more information about configuring treemap attributes and child tags, see Configuring Treemaps. For information about configuring sunburst attributes and child tags, see Configuring Sunbursts.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

You will need to complete these tasks:

• Add a treemap or sunburst to your page. For more information, see How to Add a Treemap to a Page or How to Add a Sunburst to a Page.

• If you did not bind the treemap or sunburst to a data control when you added the component to the page, add data to the treemap or sunburst. For information about adding data to treemaps or sunbursts using UI-first development, see Adding Data to Treemap and Sunburst Components.

• If you wish to add a drill listener, create the method that will define the listener and add it to the treemap's managed or backing bean.

  For more information about handling events, see Handling Events. If you need help with beans, see Creating and Using Managed Beans.

To add drilling support to a treemap or sunburst

1. In the Structure window, right-click the dvt:treemapNode or dvt:sunburstNode node and choose Go to Properties.

2. In the Properties window, expand the Advanced section, and use the Drilling attribute's dropdown list to set the Drilling attribute to one of the following values:

   • replace: allows the user to double-click a node to set it as the new root of the treemap or sunburst

   • insert (sunburst only): allows the user to expand or collapse the children of a node

   • insertAndReplace (sunburst only): allows the user to double-click a node to set it as the root of the hierarchy and allows the user to expand or collapse the children of a node

3. If your application includes a drill listener, do the following:

   1. In the Structure window, right-click the dvt:treemap node and choose Go to Properties.

   2. In the Properties window, expand the Behavior section.

   3. From the DrillListener attribute's dropdown menu, choose Edit.

   4. In the Edit Property dialog, use the search box to locate the treemap's managed bean.

   5. Expand the managed bean node and select the method that contains the drill listener.

   6. Click OK.

      The expression is created.

      For example, for a managed bean named sampleTreemap and a method named sampleDrillListener, the Expression Builder generates the code#{sampleTreemap.sampleDrillListener} as the value for the drill listener.

Before you begin:

It may be helpful to have an understanding of how treemap attributes and treemap child tags can affect functionality. For more information, see Configuring Treemaps.

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Treemap and Sunburst Components.

Add a treemap to your page. For more information, see How to Add a Treemap to a Page.

Add treemap node headers to your treemap. For more information, see How to Configure Treemap Node Headers.

To disable isolation support on a treemap group: