<dvt:nBox>

dvt:nBox nBox n box

UIComponent class: oracle.adf.view.faces.bi.component.nBox.UINBox
Component type: oracle.dss.adf.nBox.NBox

Overview

A visualization displaying the distribution of a collection items across two dimensions, represented as a set of discrete rows and columns.

<dvt:nBox value="#{nBoxDataModel}" var="node">
  <f:facet name="rows">
    <af:group>
      <dvt:nBoxRow value="row0"/>
      <dvt:nBoxRow value="row1"/>
      <dvt:nBoxRow value="row2"/>
    </af:group>
  </f:facet>
  <f:facet name="columns">
    <af:group>
      <dvt:nBoxColumn value="column0"/>
      <dvt:nBoxColumn value="column1"/>
      <dvt:nBoxColumn value="column2"/>
    </af:group>
  </f:facet>
  <dvt:nBoxNode row="#{node.row}" column="#{node.column}" label="#{node.name}">
    <f:facet name="icon">
      <dvt:marker shape="human"/>
    </f:facet>
  </dvt:nBoxNode>
</dvt:nBox>

Related Tags

• dvt:nBoxCell
• dvt:nBoxColumn
• dvt:nBoxNode
• dvt:nBoxRow

Customization Options

Animation

Animations can be enabled on data change or on initial display by adding af:transition as a child of this component. The following trigger types and transitions are supported:

• dataChange: none (default), auto
• display: none (default), auto

Cells

Individual cells can be customized (e.g. to configure labeling or background color) via the optional cells facet:

<f:facet name="cells">
  <af:group/>
    <dvt:nBoxCell column="column0" row="row0" background="#FF0000"/>
    <dvt:nBoxCell column="column1" row="row1" background="#00FF00"/>
    <dvt:nBoxCell column="column2" row="row2" background="#0000FF"/>
  </af:group>
</f:facet>

Note that it is not necessary to specify a dvt:nBoxCellfor every cell in the NBox. Any cells without corresponding dvt:nBoxCell tags will render with default values.

Dynamic Grid Size

The NBox component supports static grids via explicit enumeration of the columns, rows, and cells (as in the code sample above). Additionally, af:iterator can be used to dynamically populate the grid at runtime:

<f:facet name="columns">
  <af:iterator value="#{columnCollectionModel}" var="column"/>
    <dvt:nBoxColumn value="#{column.value}"/>
  </af:iterator>
</f:facet>
<f:facet name="rows">
  <af:iterator value="#{rowCollectionModel}" var="row"/>
    <dvt:nBoxRow value="#{row.value}"/>
  </af:iterator>
</f:facet>
<f:facet name="cells">
  <af:iterator value="#{cellCollectionModel}" var="cell"/>
    <dvt:nBoxCell column="#{cell.column}" row="#{cell.row}"/>
  </af:iterator>
</f:facet>

Grouping

When dvt:attributeGroups are used inside a dvt:nBoxNode (or one of its facets), the groupBy attribute can be used to group the NBox nodes together based on one of more of these groups. The groupBehavior can be used to control whether nodes are grouped within each cell or across cells. Groups smaller than a certain percentage of the total can be grouped into an "Other" group using the otherThreshold attribute. The color of this group can be customized using the otherColor attribute.

Labels

The columnsTitle and rowsTitle attributes can be used to specify labels for the column and row axes, respectively. Individual columns and rows can be labeled via the label attributes on dvt:nBoxColumn and dvt:nBoxRow. Individual cells can be labeled via the label attribute on dvt:nBoxCell. Lastly, node labels can be specified via the label and secondaryLabel attributes on dvt:nBoxNode.

Maximize

The NBox can be configured to maximize a single column or row by specifying the maximizedColumn or maximizedRow attributes, respectively. Specifying both attributes will maximize the cell at the intersection of the specified row and column.

Interactivity Features

Popups and Context Menus

Popups and context menus can be displayed using af:showPopupBehavior, which is a supported child of dvt:nBoxNode.

Selection

Selection of data items can be enabled using the nodeSelection attribute. Selection can be processed using selectionListener on the server..

Events

Supported Facets

Attributes