Creating an application with the Accordion component

In this example, an application developer is building the checkout section of an online store. The design calls for an accordion with three forms in which a user enters a shipping address, a billing address, and payment information. The shipping address and billing address forms are identical.

To add an Accordion component to an application:

Select File > New and choose Flash File (ActionScript 2.0).
Select Insert > New Symbol and name it AddressForm.
If the advanced view is not displayed, click the Advanced button.
Select Export for ActionScript. In the Class field, enter mx.core.View, and click OK.
To maintain tabbing order in an accordion's children, the children must also be instances of the View class.
Drag components such as Label and TextInput from the Components panel onto the Stage to create a mock address form; arrange them; and set their parameters in the Property inspector.
Position the form elements in relation to 0,0 (the middle) on the Stage. The 0,0 coordinate of the movie clip is placed in the upper left corner of the accordion.
Select Edit > Edit Document to return to the main timeline.
Repeat steps 2-6 to create a movie clip named CheckoutForm.
Drag an Accordion component from the Components panel to add it to the Stage on the main timeline.
In the Property inspector, do the following:
- Enter the instance name my_acc.
- For the childSymbols property, enter AddressForm, AddressForm, and CheckoutForm.
These strings specify the names of the movie clips used to create the accordion's children.

NOTE

The first two children are instances of the same movie clip, because the shipping address form and the billing address form are identical.
- For the childNames property, enter shippingAddress, billingAddress, and checkout.
These strings are the ActionScript names of the accordion's children.
- For the childLabels property, enter Shipping Address, Billing Address, and Checkout.
These strings are the text labels on the accordion headers.
- For the childIcons property, enter AddressIcon, AddressIcon, and CheckoutIcon.
These strings specify the linkage identifiers of the movie clip symbols that are used as the icons on the accordion headers. You must create these movie clip symbols if you want icons in the headers.
Select Control > Test Movie.

To use ActionScript to add children to an Accordion component:

Select File > New and choose Flash File (ActionScript 2.0).
Drag an Accordion component from the Components panel to the Stage.
In the Property inspector, enter the instance name my_acc.
Drag a TextInput component to the library.
This adds the component to the library so that you can dynamically instantiate it in step 6.

In the Actions panel in Frame 1 of the timeline, enter the following (this code calls the createChild() method to create its child views.):

import mx.core.View;

// Create child panels for each form to be displayed in my_acc object.
my_acc.createChild(View, "shippingAddress", {label: "Shipping Address"});
my_acc.createChild(View, "billingAddress", {label: "Billing Address"});
my_acc.createChild(View, "payment", {label: "Payment"});

In the Actions panel in Frame 1, below the code you entered in step 5, enter the following code (this code adds two TextInput component instances to the accordion's children):

// Create child text input for the shippingAddress panel.
var firstNameChild_obj:Object = my_acc.shippingAddress.createChild("TextInput", "firstName", {text: "First Name"});
// Set position of text input.
firstNameChild_obj.move(10, 38);
firstNameChild_obj.setSize(110, 20);
// Create another child text input. 
var lastNameChild_obj:Object = my_acc.shippingAddress.createChild("TextInput", "lastName", {text: "Last Name"});
// Set position of text input.
lastNameChild_obj.move(150, 38);
lastNameChild_obj.setSize(140, 20);