Accordions

Accordions serve a similar purpose to tab panes and card panes, only showing one of a collection of components at a time. Like tab panes, accordions provide built-in navigation support. However, rather than representing the content as a stack of components, they are presented like the folds of an accordion, with headers for navigating between panels.

The following application demonstrates the use of the Accordion component. It is a simplified online checkout process consisting of three pages - shipping info, payment info, and order summary:

Note that, like TabPane, the default behavior of an accordion is to allow the user to freely navigate between panels. However, in this example, the user is only allowed to progress forward in the accordion by pressing the "Next" button. This restriction is imposed programmatically by the application, since the content of a subsequent page in such a checkout process may depend on the user's entries on a previous page. The user may freely navigate backward at any point, however. The last panel simulates the order confirmation by displaying an [activity indicator|Activity Indicators].

The WTKX source for the example is shown below. It includes a number of external WTKX files that define the content of each panel:

<Window title="Accordions" maximized="true"
    xmlns:wtkx="http://pivot.apache.org/wtkx"
    xmlns="org.apache.pivot.wtk">
    <content>
        <Accordion wtkx:id="accordion" styles="{padding:0}">
            <panels>
                <wtkx:include wtkx:id="shippingPanel" src="shipping.wtkx" Accordion.label="Shipping Information"/>
                <wtkx:include wtkx:id="paymentPanel" src="payment.wtkx" Accordion.label="Payment Information"/>
                <wtkx:include wtkx:id="summaryPanel" src="summary.wtkx" Accordion.label="Summary & Confirmation"/>
            </panels>
        </Accordion>
    </content>
</Window>

The Java source is as follows. The primary logic for maintaining the enabled state of the panels is defined in the updateAccordion() method; an AccordionSelectionListener is used to enable or disable panels when a selection change transition is about to occur, rather than waiting until it is complete, to provide a smoother user experience:

package org.apache.pivot.tutorials.navigation;

import org.apache.pivot.collections.Map;
import org.apache.pivot.collections.Sequence;
import org.apache.pivot.util.Vote;
import org.apache.pivot.wtk.Accordion;
import org.apache.pivot.wtk.AccordionSelectionListener;
import org.apache.pivot.wtk.ActivityIndicator;
import org.apache.pivot.wtk.Application;
import org.apache.pivot.wtk.Button;
import org.apache.pivot.wtk.ButtonPressListener;
import org.apache.pivot.wtk.Component;
import org.apache.pivot.wtk.DesktopApplicationContext;
import org.apache.pivot.wtk.Display;
import org.apache.pivot.wtk.Label;
import org.apache.pivot.wtk.PushButton;
import org.apache.pivot.wtk.Window;
import org.apache.pivot.wtkx.WTKXSerializer;

public class Accordions implements Application {
    private Window window = null;
    private Accordion accordion = null;
    private PushButton shippingNextButton = null;
    private PushButton paymentNextButton = null;
    private PushButton confirmOrderButton = null;
    private ActivityIndicator activityIndicator = null;
    private Label processingOrderLabel = null;

    private AccordionSelectionListener accordionSelectionListener = new AccordionSelectionListener() {
        private int selectedIndex = -1;

        public Vote previewSelectedIndexChange(Accordion accordion, int selectedIndex) {
            this.selectedIndex = selectedIndex;

            // Enable the next panel or disable the previous panel so the
            // transition looks smoother
            if (selectedIndex != -1) {
                int previousSelectedIndex = accordion.getSelectedIndex();
                if (selectedIndex > previousSelectedIndex) {
                    accordion.getPanels().get(selectedIndex).setEnabled(true);
                } else {
                    accordion.getPanels().get(previousSelectedIndex).setEnabled(false);
                }

            }

            return Vote.APPROVE;
        }

        public void selectedIndexChangeVetoed(Accordion accordion, Vote reason) {
            if (reason == Vote.DENY
                && selectedIndex != -1) {
                Component panel = accordion.getPanels().get(selectedIndex);
                panel.setEnabled(!panel.isEnabled());
            }
        }

        public void selectedIndexChanged(Accordion accordion, int previousSelection) {
            updateAccordion();
        }
    };

    public void startup(Display display, Map<String, String> properties)
        throws Exception {
        WTKXSerializer wtkxSerializer = new WTKXSerializer();
        window = (Window)wtkxSerializer.readObject(this, "accordions.wtkx");
        accordion = (Accordion)wtkxSerializer.get("accordion");

        accordion.getAccordionSelectionListeners().add(accordionSelectionListener);

        ButtonPressListener nextButtonPressListener = new ButtonPressListener() {
            public void buttonPressed(Button button) {
                accordion.setSelectedIndex(accordion.getSelectedIndex() + 1);
            }
        };

        shippingNextButton = (PushButton)wtkxSerializer.get("shippingPanel.nextButton");
        shippingNextButton.getButtonPressListeners().add(nextButtonPressListener);

        paymentNextButton = (PushButton)wtkxSerializer.get("paymentPanel.nextButton");
        paymentNextButton.getButtonPressListeners().add(nextButtonPressListener);

        confirmOrderButton = (PushButton)wtkxSerializer.get("summaryPanel.confirmOrderButton");
        confirmOrderButton.getButtonPressListeners().add(new ButtonPressListener() {
            public void buttonPressed(Button button) {
                // Pretend to submit or cancel the order
                activityIndicator.setActive(!activityIndicator.isActive());
                processingOrderLabel.setVisible(activityIndicator.isActive());
                updateConfirmOrderButton();
            }
        });

        activityIndicator = (ActivityIndicator)wtkxSerializer.get("summaryPanel.activityIndicator");
        processingOrderLabel = (Label)wtkxSerializer.get("summaryPanel.processingOrderLabel");

        updateAccordion();
        updateConfirmOrderButton();

        window.open(display);
    }

    public boolean shutdown(boolean optional) {
        if (window != null) {
            window.close();
        }

        return false;
    }

    public void suspend() {
    }

    public void resume() {
    }

    private void updateAccordion() {
        int selectedIndex = accordion.getSelectedIndex();

        Sequence<Component> panels = accordion.getPanels();
        for (int i = 0, n = panels.getLength(); i < n; i++) {
            panels.get(i).setEnabled(i <= selectedIndex);
        }
    }

    private void updateConfirmOrderButton() {
        if (activityIndicator.isActive()) {
            confirmOrderButton.setButtonData("Cancel");
        } else {
            confirmOrderButton.setButtonData("Confirm Order");
        }
    }

    public static void main(String[] args) {
        DesktopApplicationContext.main(Accordions.class, args);
    }
}

Next: Expanders