<?xml version="1.0" encoding="utf-8"?>

<!--Flex中如何使用addChild()和removeChild()函数动态添加或删除Accordion容器中项目的例子 -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Script>

        <![CDATA[

            import mx.containers.VBox;

            private const MAX_CHILDREN:uint = 5;

            protected function accordion_addChild(event:MouseEvent):void

            {

                if (accordion.numChildren < MAX_CHILDREN) {

                    var vbox:VBox = new VBox();

                    vbox.label = "child " + accordion.numChildren;

                    vbox.percentWidth = 100;

                    vbox.percentHeight = 100;

                    var randColor:uint = Math.random() * 0xFFFFFF;

                    vbox.setStyle("backgroundColor", randColor);

                    accordion.addChild(vbox);

                }

            }

            protected function accordion_removeChild(event:MouseEvent):void

            {

                if (accordion.selectedChild) {

                    accordion.removeChild(accordion.selectedChild as DisplayObject);

                }

            }

        ]]>

    </fx:Script>

    <fx:Declarations>

        <!-- 将非可视元素（例如服务、值对象）放在此处 -->

    </fx:Declarations>

    <s:controlBarContent>

        <s:Button label="Add child" click="accordion_addChild(event)"/>

        <s:Button label="Remove child" click="accordion_removeChild(event)"/>

    </s:controlBarContent>

    <mx:Accordion id="accordion" width="240" height="160"/>

</s:Application>