Forms are a basic component of many applications. However, users have difficulty navigating through complex forms, or moving back and forth through multipage forms. Sometimes, forms can be so large that they do not fit onto a single screen.

Flex includes the Accordion navigator container, which can greatly improve the look and navigation of a form. The Accordion container defines a sequence of child panels, but displays only one panel at a time. The following image shows an example of an Accordion container:

To navigate a container, the user clicks the navigation button that corresponds to the child panel that they want to access. Accordion containers let users access the child panels in any order to move back and forth through the form. For example, when the user is in the Credit Card Information panel, they might decide to change the information in the Billing Address panel. To do so, they navigate to the Billing Address panel, edit the information, and then navigate back to the Credit Card Information panel.

In HTML, a form that contains shipping address, billing address, and credit card information is often implemented as three separate pages, which requires the user to submit each page to the server before moving on to the next. An Accordion container can organize the information on three child panels with a single Submit button. This architecture minimizes server traffic and lets the user maintain a better sense of progress and context.

Although Accordion containers are useful for working with forms and Form containers, you can use any Flex component within a child panel of an Accordion container. For example, you could create a catalog of products in an Accordion container, where each panel contains a group of similar products.

For complete reference information, see Accordion in the Adobe Flex Language Reference.

Creating an Accordion container

You use the <mx:Accordion> tag to define an Accordion container. In the Accordion container, you define one container for each child panel. For example, if the Accordion container has four child panels that the correspond to four parts of a form, you define each child panel by using the Form container, as the following example shows:

<?xml version="1.0"?>
<!-- containers\navigators\AccordionSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Accordion id="accordion1" height="250">

        <mx:Form id="shippingAddress" label="1. Shipping Address">

            <mx:FormItem id="sfirstNameItem" label="First Name">
                <mx:TextInput id="sfirstName"/>
            </mx:FormItem>

            <!-- Additional contents goes here. -->

        </mx:Form>

        <mx:Form id="billingAddress" label="2. Billing Address">
            <!-- Form contents goes here. -->
        </mx:Form>

        <mx:Form id="creditCardInfo" label="3. Credit Card Information">
            <!-- Form contents goes here. -->
        </mx:Form>

        <mx:Form id="submitOrder"   label="4. Submit Order">
            <!-- Form contents goes here. -->
        </mx:Form>

    </mx:Accordion>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example defines each child panel by using a Form container. However, you can use any container to define a child panel.

Accordion container Keyboard navigation

When an Accordion container has focus, Flex processes keystrokes as the following table describes:

Using Button controls to navigate an Accordion container

The simplest way for users to navigate the panels of an Accordion container is to click the navigator button for the desired panel. However, you can create additional navigation Button controls, such as Back and Next, to make it easier for users to navigate.

Navigation Button controls use the following properties of the Accordion container to move among the child panels:

For more information on these properties, see ViewStack navigator container.

You can use the following two Button controls, for example, in the second panel of an Accordion container, panel number 1, to move back to panel number 0 or ahead to panel number 2:

<?xml version="1.0"?>
<!-- containers\navigators\AccordionButtonNav.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Accordion id="accordion1" height="250">

        <mx:Form id="shippingAddress" label="1. Shipping Address">

            <mx:FormItem id="sfirstNameItem" label="First Name">
                <mx:TextInput id="sfirstName"/>
            </mx:FormItem>

        </mx:Form>

        <mx:Form id="billingAddress" label="2. Billing Address">
            <mx:Button id="backButton" 
                label="Back" 
                click="accordion1.selectedIndex=0;"/>
            <mx:Button id="nextButton" 
                label="Next" 
                click="accordion1.selectedIndex=2;"/>
        </mx:Form>

        <mx:Form id="creditCardInfo" label="3. Credit Card Information">
        </mx:Form>

    </mx:Accordion>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can also use relative location with navigation buttons. The following Button controls move forward and backward through Accordion container panels based on the current panel number:

<mx:Button id="backButton" label="Back"click="accordion1.selectedIndex = accordion1.selectedIndex - 1;"/>
<mx:Button id="nextButton" label="Next"click="accordion1.selectedIndex = accordion1.selectedIndex + 1;"/>

For the Next Button control, you also can use the selectedChild property to move to the next panel based on the value of the id property of the panel's container, as the following code shows:

<mx:Button id="nextButton" label="Next" click="accordion1.selectedChild=creditCardInfo;"/>

The following Button control opens the last panel in the Accordion container:

<mx:Button id="lastButton" label="Last" click="accordion1.selectedIndex = accordion1.numChildren - 1;"/>

Handling child button events

The Accordion container can recognize an event when the user changes the current panel. The Accordion container broadcasts a change event when the user changes the child panel, either by clicking a button or pressing a key, such as the Page Down key.

You can register an event handler for the change event by using the change property of the <mx:Accordion> tag, or by registering the handler in ActionScript. The following example logs the change event to flashlog.txt each time the user changes panels:

<mx:Accordion id="accordion1" height="450" change="trace('change');">

Controlling the appearance of accordion buttons

The buttons on an Accordion container are rendered by the AccordionHeader class, which is a subclass of Button, and has the same style properties as the Button class.

To change the style of an Accordion button, call the Accordion class getHeaderAt() method to get a reference to a child container's button, and then call the button's setStyle() method to set the style. The following example uses this technique to set a different text color for each of the Accordion buttons:

<?xml version="1.0"?>
<!-- containers\navigators\AccordionStyling.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="600"
    height="600" 
    creationComplete="setButtonStyles();">

    <mx:Script>
        <![CDATA[
            public function setButtonStyles():void {
                comp.getHeaderAt(0).setStyle('color', 0xAA0000);
                comp.getHeaderAt(1).setStyle('color', 0x00AA00);
            }
        ]]>
    </mx:Script>

    <mx:Accordion id="comp">
        <mx:VBox label="First VBox">
            <mx:TextInput/>
            <mx:Button label="Button 1"/>
        </mx:VBox>
        <mx:VBox label="Second VBox">
            <mx:TextInput/>
            <mx:Button label="Button 2"/>
        </mx:VBox>
    </mx:Accordion>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can also control the appearance of the buttons by using the headerStyleName style property of the Accordion class. For more information, see Accordion in the Adobe Flex Language Reference.