Summary

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.

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);
}
        

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.

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.

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)

• 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)

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

Note about stretching layouts and flowing/scrolling layouts:

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.

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.

• 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.

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 (you cannot use an af:iterator at this time because you would not be able to specify which of the stamped children you want to show via the displayedChild attribute).

Screenshot(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.

Code Example(s)

<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>

Supported Client Events for Client Behaviors

Events

Attributes