Experience with new ADF deck component

The new af:deck component is a very good looking new ADF Faces feature with a lot of possible transitions. It is possible to replace a (simple) task flow with this component, as you will see in this blog entry:

If you embed this simple Taskflow in a region on a page, you can switch the content from „allgemeines_PK“ fragment to „anlagen_PK“ fragment via Taskflow control flow cases and actions which use them. But this happens very unspectacularly.

To place the af:deck component here, we have to integrate the content of „anlagen_PK“ in the fragment of „allgemeines_PK“. Therefore I copied the source of the bindings in the pageDef file of „allgemeines_PK“. I also copied the source of „anlagen_PK.jsff” and placed them next to the content of “allgemeines_PK” in its sources. Both “root elements” have to be surrounded by the af:deck component now. The last thing to do is the definition which child element comes first via the ID.

<?xml version='1.0' encoding='UTF-8'?>
<ui:composition xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:ui="http://java.sun.com/jsf/facelets">
  <c:set var="viewcontrollerBundle" value="#{adfBundle['de.virtual7.view.ViewControllerBundle']}"/>
  <af:deck id="d1" displayedChild="pc1">
    <af:transition transition="flipStart" triggerType="forwardNavigate"/>
    <af:transition transition="flipEnd" triggerType="backNavigate"/>
    <af:panelCollection id="pc1" featuresOff="statusBar detach">
      ...
    </af:panelCollection>
    <af:panelSplitter id="ps1" splitterPosition="720">
      ...
    </af:panelSplitter>
  </af:deck>
</ui:composition>

At the end the af:deck component hast two children. The panelCollection, which was the original root element in “allgemeines_PK” and the root element (panelSplitter) of “anlagen_PK”. With the property “displayedChild” it is possible to define the default child ID. I also placed two transitions inside the deck which define the animation while switching between them. Both transitions behave like a flip of a card, which looks great in a “flow”.

We still miss the actions to switch between both children of the deck component. The old task flow control flow cases are no more available!

We need the following methods in a bean for that:

private void changeDeckCard(UIComponent eventComponent, int newDisplayedChildIndex) {
        // Find the nearest deck ancestor:
        RichDeck deck = null;
        String eventComponentId = eventComponent.getId();
        while (deck == null) {
            if (eventComponent == null) { 
                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.getCurrentInstance().addPartialTarget(deck);
}

public void onAnlageCardClicked(ActionEvent e) {
    ADFUtils.findOperation("Commit").execute(); 
    UIComponent eventComponent = e.getComponent();
    changeDeckCard(eventComponent, 1);
}

public void backToFirstCardClicked(ActionEvent e) {
    UIComponent eventComponent = e.getComponent();
    changeDeckCard(eventComponent, 0);
}

The method „onAnlageCardClicked“ will be placed to the actionListener of the button/link, which triggers the „navigation“ to the right. The method „backToFirstCardClicked“ in the second child is used to get back „to the left“. It is important to check whether the buttons/links have the property “partialSubmit” checked or not. It has to be true here!

A little disadvantage of this solution is the visibility in the design mode during development. Only the default child of the deck component is rendered here. If you need to show the other child, you have to switch the default property temporarily or use regions and bounded Taskflows for the children of the deck. This will result in separate fragments for every child.