创建具有 Accordion 组件的应用程序

在本例中，应用程序开发人员正在构建在线商店的"结帐"部分。设计要求具有一个包含三个表单的 accordion，用户可在其中输入他们的发运地址、开单地址和付款信息。发运地址和开单地址表单相同。

选择"文件">"新建"并选择"Flash 文件(ActionScript 2.0)"。
选择"插入">"新建元件"，并将其命名为 AddressForm。
如果高级视图未显示出来，则单击"高级"按钮。
选择"为 ActionScript 导出"。在"类"字段中，输入 mx.core.View，然后单击"确定"。
若要保持某个 accordion 子项中的 Tab 键顺序，该子项必须同时是 View 类的实例。
将诸如 Label 和 TextInput 等组件从"组件"面板拖到舞台上创建一个模拟地址表单，对这些组件进行排列，然后在"属性"检查器中设置它们的参数。
将表单元素定位在舞台上相对于 0,0（中心）的位置。影片剪辑的 0,0 坐标位于 accordion 的左上角。
选择"编辑">"编辑文档"返回到主时间轴。
重复步骤 2-6，以便创建一个名为 CheckoutForm 的影片剪辑。
将一个 Accordion 组件从"组件"面板拖到主时间轴上的舞台上。
在属性检查器中，执行以下操作：
- 输入实例名称 my_acc。
- 对于 childSymbols 属性，输入 AddressForm、AddressForm 和 CheckoutForm。
这些字符串指定用于创建 accordion 子项的影片剪辑的名称。

注意

前两个子项是同一影片剪辑的实例，因为发运地址表单和开单地址表单相同。
- 对于 childNames 属性，输入 shippingAddress、billingAddress 和 checkout。
这些字符串是该 Accordion 的子项的 ActionScript 名称。
- 对于 childLabels 属性，输入 Shipping Address（发运地址）、Billing Address（开单地址）和 Checkout（结帐）。
这些字符串是 Accordion 标题上的文本标签。
- 对于 childIcons 属性，输入 AddressIcon、AddressIcon 和 CheckoutIcon。
这些字符串指定用作 accordion 标题上的图标的影片剪辑元件的链接标识符。如果希望图标出现在标题中，您必须创建这些影片剪辑元件。
选择"控制">"测试影片"。

选择"文件">"新建"并选择"Flash 文件(ActionScript 2.0)"。
将 Accordion 组件从"组件"面板拖到舞台上。
在"属性"检查器中，输入实例名称 my_acc。
将 TextInput 组件拖动到库中。
此操作会将该组件添加到库中，这样您便可以在step 6. 中将它动态地实例化。

在时间轴第 1 帧中的"动作"面板中，输入以下代码（这段代码调用 createChild() 方法来创建其子视图）：

import mx.core.View;

// 为要显示在 my_acc 对象中的每个表单创建子面板。
my_acc.createChild(View, "shippingAddress", {label: "Shipping Address"});
my_acc.createChild(View, "billingAddress", {label: "Billing Address"});
my_acc.createChild(View, "payment", {label: "Payment"});

在第 1 帧中的"动作"面板中，在步骤 5 中输入的代码下，输入以下代码（此代码向 accordion 子项添加两个 TextInput 组件实例）：

// 为 shippingAddress 面板创建子项文本输入。
var firstNameChild_obj:Object = my_acc.shippingAddress.createChild("TextInput", "firstName", {text: "First Name"});
// 设置文本输入的位置。
firstNameChild_obj.move(10, 38);
firstNameChild_obj.setSize(110, 20);
// 创建另一个子文本输入。 
var lastNameChild_obj:Object = my_acc.shippingAddress.createChild("TextInput", "lastName", {text: "Last Name"});
// 设置文本输入的位置。
lastNameChild_obj.move(150, 38);
lastNameChild_obj.setSize(140, 20);

创建具有 Accordion 组件的应用程序

要将 Accordion 组件添加到应用程序，请执行下列操作：

使用 ActionScript 将子项添加到 Accordion 组件：