<af:panelDashboard>

af:panelDashboard panelDashboard panel dashboard

UIComponent class: oracle.adf.view.rich.component.rich.layout.RichPanelDashboard
Component type: oracle.adf.RichPanelDashboard

panelDashboard features:

• Arranges panelBox (or region with showHeader=always) components into a tiled layout of columns and rows. You can specify the number of columns as well as a CSS length value for the height of the rows.
• Stretches the panelBox children to fit within the width of a column and the specified row height.
• If all of the child panelBoxes cannot fit within the dimensions of the panelDashboard (e.g. due to the specified number of columns and row height), then the panelDashboard will provide a scroll bar so that the user can access the panelBox children that might not be initially viewable.
• Supports being stretched so that you can place the panelDashboard inside of a panelSplitter.
• Provides a dropListener attribute so that you can modify your component tree in response to a reorder gesture performed by the user because of componentDragSource tags inside of the panelBox children.
• Provides methods on the RichPanelDashboard component class that you can use to perform an optimized render of the panelDashboard when you make "insert" or "detete" changes to its children (e.g. changing the rendered flag on a specific child) without requiring that the entire dashboard be redrawn:
  • prepareOptimizedEncodingOfInsertedChild()
  • prepareOptimizedEncodingOfDeletedChild()
• Also, to help make your application feel more responsive to the user, an optional panelDashboardBehavior tag can be used on command components that perform optimized inserts into the dashboard. This tag will cause the dashboard to open up a new location for the child that you are about to insert. The benefit is that this opening up of space happens before your action event is sent to the server so the user will see immediate feedback while your action listener is busy modifying the component tree and preparing the dashboard for the optimized encoding of the insert. If you decide not to use this tag, there will be a slight delay while your action listener is processing before the use sees any change to the dashboard structure.
• The af:panelDashboard tag accepts af:dataFlavor tags as children. You will want to use a data flavor if you want your dashboard's dropListener to handle component drag sources from elsewhere on the page (e.g. from a side bar near the dashboard) instead of only for the direct children of the dashboard. If this side bar represents a menu listing of possible dashboard children that the user can see, you may expose the non-rendered dashboard children as component drag sources in this list. If you do this, a user can then drag from the side bar and drop it into the dashboard at a precise desired drop location among the rendered dashboard children. Your dropListener that you have assigned to the dashboard component can then listen for this gesture, set the requested dashboard child to now be rendered, set its location to be the requested drop position, and perform an optimized render so that only the content for that child is sent to the browser which in turn, gets revealed to the user.

<af:panelDashboard id="theDashboard"
                   binding="#{demoDashboard.theDashboard}"
                   columns="3" rowHeight="175px"
                   dropListener="#{demoDashboard.handleReorder}">
  <af:panelBox id="box1" text="Box 1">
    <af:componentDragSource/>
    <af:outputText value="Here is some content"/>
  </af:panelBox>
  <af:panelBox id="box2" text="Box 2">
    <af:componentDragSource/>
    <af:outputText value="Here is some content"/>
  </af:panelBox>
  <af:panelBox id="box3" text="Box 3">
    <af:componentDragSource/>
    <af:outputText value="Here is some content"/>
  </af:panelBox>
  <af:panelBox id="box4" text="Box 4">
    <af:componentDragSource/>
    <af:outputText value="Here is some content"/>
  </af:panelBox>
</af:panelDashboard>
   

Events

Attributes