<af:deck>

af:deck deck deck

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

The deck component is a container that shows one child component at a time. When changing which child is displayed, the transition can be animated. <p/> This component does not provide any built-in controls for choosing which child is displayed. Instead, you use some other component to control it. For example, you might use an external navigationPane tab bar or perhaps some external commandImageLinks to represent page progress dots. You are not limited to external controls, your deck might be displaying a series of images and you may want to put a link around each image to trigger advancing to the next image. In all of these cases, you will need to use an event handler function to change the displayed child. <p/> This example shows how to dynamically find the nearest deck ancestor, assign a new displayedChild value, and then trigger the transition animation:

// Action listener for navigating to the 1st card of a deck.
public void animateToFirstCard(ActionEvent e)
{
  UIComponent eventComponent = e.getComponent();
  _animateDeckDisplayedChild(eventComponent, 0);
}

// Action listener for navigating to the 2nd card of a deck.
public void animateToSecondCard(ActionEvent e)
{
  UIComponent eventComponent = e.getComponent();
  _animateDeckDisplayedChild(eventComponent, 1);
}

// Animate the display of a deck child.
private void _animateDeckDisplayedChild(
  UIComponent eventComponent,
  int newDisplayedChildIndex)
{
  // Find the nearest deck ancestor:
  RichDeck deck = null;
  String eventComponentId = eventComponent.getId();
  while (deck == null)
  {
    if (eventComponent == null)
    {
      System.err.println("Unable to locate a deck ancestor from id " + eventComponentId);
      return;
    }
    else if (eventComponent instanceof RichDeck)
    {
      deck = (RichDeck)eventComponent;
      break;
    }
    eventComponent = eventComponent.getParent();
  }

  String newDisplayedChild = deck.getChildren().get(newDisplayedChildIndex).getId();

  // Update the displayedChild:
  deck.setDisplayedChild(newDisplayedChild);

  // Add this component as a partial target:
  RequestContext rc = RequestContext.getCurrentInstance();
  rc.addPartialTarget(deck);
}
        

In order to choose what the transition will look like when changing the deck's displayedChild, place one or two af:transition tags inside of the af:deck tag. This tag will let you choose an animation style and what kind of transition will trigger that type of animation. In order for a transition to take effect, the deck must be redrawn but not some ancestor of the deck because if an ancestor is redrawn the old state for the deck will be lost (nothing to transition from). <p/> Many of the transition animations will give a different effect based on the width and height of the deck component. In most cases, you will either want to explicitly assign a width and height inlineStyle to constrain the dimensions of the deck or place the deck in a container that provides dimensions. For example, if the deck were displaying one playing card at a time, you would want your deck's dimensions to match the dimensions of the playing card. If you allowed the deck to display using the full width of the page, a horizontal flip transition will look funny because the axis of the flip will be the middle of the deck, not the middle of the playing card. <p/> Some of the transition animations can cause content to bleed outside of the deck's dimensions during the transition animation. If this effect is undesirable for your use case, you can add an "overflow:hidden" inlineStyle. When using this style, make sure your deck is constrained to a width and height (or is being stretched by an ancestor component) or else the user won't be able to see it because the deck will display with a zero pixel height. <p/> Transition Trigger Types

• backNavigate - Transitioning from a later child to an earlier child (in terms of sibling order)
• forwardNavigate - Transitioning from an earlier child to a later child (in terms of sibling order)
• replace - Transitioning a component that is being refreshed through partial page refresh(PPR)

Transition Animations

• none - No animation between items; the default and also the type used if another specified animation type is not supported on a platform
• fade - A gradual opacity change between the items (see note 1)
• flipUp - imagine the 2 items sandwiched, the bottom of the sandwich moves toward the user and continues upward until the sandwich is flipped a full 180 degrees (see note 2)
• flipDown - imagine the 2 items sandwiched, the top of the sandwich moves toward the user and continues downward until the sandwich is flipped a full 180 degrees (see note 2)
• flipStart - imagine the 2 items sandwiched, the end of the sandwich moves toward the user and continues in the start direction until the sandwich is flipped a full 180 degrees (see note 2)
• flipEnd - imagine the 2 items sandwiched, the start of the sandwich moves toward the user and continues in the end direction until the sandwich is flipped a full 180 degrees (see note 2)
• flipLeft - imagine the 2 items sandwiched, the right of the sandwich moves toward the user and continues in the left direction until the sandwich is flipped a full 180 degrees (see note 2)
• flipRight - imagine the 2 items sandwiched, the left of the sandwich moves toward the user and continues in the right direction until the sandwich is flipped a full 180 degrees (see note 2)
• slideUp - imagine the 2 items stacked vertically, they both move up (see note 1)
• slideDown - imagine the 2 items stacked vertically, they both move down (see note 1)
• slideStart - imagine the 2 items stacked horizontally, they both move in the start direction (see note 1)
• slideEnd - imagine the 2 items stacked horizontally, they both move in the end direction (see note 1)
• slideLeft - imagine the 2 items stacked horizontally, they both move in the left direction (see note 1)
• slideRight - imagine the 2 items stacked horizontally, they both move in the right direction (see note 1)

Note, these transition animations will not work in all browsers. They require whichever is newer, the minimum browser requirements specified in the release notes or the following:

1. = Chrome 14, Firefox 16, IE 10, or Safari 5.1
2. = Chrome 14, Firefox 19, IE 10, or Safari 5.1

When using an animation, you will not see components that use programmatic geometry management appear in their final state until after the animation is complete. This effect may be more pronounced depending on the complexity of your component struture so you may need to evaluate whether an animation is appropriate. <p/> Note about stretching layouts and flowing/scrolling layouts: <p/> With today's web browsers, it is not reliable to have vertically-stretched content inside of areas that also have scroll bars. If you want the outer areas of your page structure to stretch, you need to be careful of how you assemble your component tree.

• First, build up a structure of stretchable components (using panelSplitters or panelGridLayouts).
• Second, inside of this structure, create islands of non-stretched content.

Rules of thumb:

1. Never nest one scrolling container inside of another scrolling container since users do not like nested scroll bars.
2. Never specify percentage heights in any component's inlineStyle attribute.
3. Never use the "position" style in any component's inlineStyle attribute.

If you believe that you need to break one of these rules, this is an indication that your page structure is not following the page structure guidelines and you will likely have troubles getting your application to render consistently across various web browsers and computing platforms.

• For specific details about component stretching, please see the "geometry management" section in the tag documentation of each component.
• See the demo application for real world layout examples that you can use as a starting point in your application. A good starting point is the "Layout Basics" page listed under the "Framework Features" tab of the demo application.

<p/> You may also alternatively place a facetRef or switcher inside of the deck and their resolved children will be treated as if they were direct children of the deck. If the children are stamped out via af:iterator, you can use locator syntax like displayedChild="iterId[0]:stampChildId" (where zero represents the desired stamp index).

Screen Shot(s)

The deck component is a container that shows one child component at a time. When changing which child is displayed, the transistion can be animated.

<af:deck id="d1">
  <af:transition triggerType="backNavigate" transition="flipEnd"/>
  <af:transition triggerType="forwardNavigate" transition="flipStart"/>
  <af:panelGroupLayout id="pgl1" layout="scroll">
    <af:outputText id="ot1" value="Card 1"/>
  </af:panelGroupLayout>
  <af:panelGroupLayout id="pgl2" layout="scroll">
    <af:outputText id="ot2" value="Card 2"/>
  </af:panelGroupLayout>
</af:deck>
   

Events

Attributes