<af:panelDrawer>

Attachment Mode

Geometry Management

• The drawer tries to float on the edge of the container without obstructing the content below. In some situations this may not work and you will need to lay out the drawer in a separate column, for example in a gridLayout or in a facet of panelStretchLayout.
• If the width and height attribute aren't set then by default the drawer will open to the size of the content. There are some things to keep in mind:
  • If the size of the content will change after the drawer is open (for example you toggle a showDetail inside the drawer which exposes new content) the drawer will not resize, in that case you must set the width and height attributes.
  • Currently there is no conveyor belt/overflow support, so either you must set the height attribute or the height of the content must be tall enough to allow room for all the handles.
  • If you are trying to stretch content in the drawer you need to set the width and height attributes, see showDetailItem info below.
• This component uses <af:showDetailItem> to organize content. The <af:showDetailItem> will allow stretching if:
  • The panelDrawer has width and height attributes defined.
  • It contains a single child
  • It has stretchChildren="first" specified
  • The child has no width, height, margin, border, and padding
  • The child must be capable of being stretched
  Examples of components that can be stretched inside of a <af:showDetailItem> include:
  • <af:calendar>
  • <af:decorativeBox>
  • <af:panelAccordion>
  • <af:panelBox>
  • <af:panelCollection>
  • <af:panelGridLayout>
  • <af:panelGroupLayout layout="scroll">
  • <af:panelGroupLayout layout="vertical">
  • <af:panelHeader>
  • <af:panelSplitter>
  • <af:panelStretchLayout>
  • <af:panelTabbed>
  • <af:region>
  • <af:table>
  • <af:tree>
  • <af:treeTable>

Dismissal

Code Example(s)

The following is an example of panelDrawer.

<af:panelDrawer id="pd1">
  <af:showDetailItem text="ADF Faces Components" id="sdi1"
                     icon="/images/comps_ena.png"
                     hoverIcon="/images/comps_ovr.png"
                     depressedIcon="/images/comps_sel.png" >
    <af:panelHeader text="ADF Faces Components First Child" id="ph1"/>
    <af:panelHeader text="ADF Faces Components Second Child" id="ph2"/>
  </af:showDetailItem>
  <af:showDetailItem text="Architecture" disabled="true" id="sdi2"
                     disabledIcon="/images/arch_dis.png">
    <af:panelHeader text="Architecture First Child" id="ph3"/>
    <af:panelHeader text="Architecture Second Child" id="ph4"/>
  </af:showDetailItem>
  <af:showDetailItem text="Release" id="sdi3"
                     icon="/images/rel_ena.png"
                     hoverIcon="/images/rel_ovr.png"
                     depressedIcon="/images/rel_sel.png">
    <af:panelHeader text="Release First Child" id="ph5"/>
    <af:panelHeader text="Release Second Child" id="ph6"/>
  </af:showDetailItem>
</af:panelDrawer>