翻译(Collapsible Panel component)

参考地址:http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=14046

问题描述

创建可伸缩的Panel组件

解决方案

创建一个有2种state的组件。为避免”multiple sets of visual children”异常，使用[DefaultProperty]元标签定义名为”visualChildren”的私有数组属性。

说明

<!–================Col lapsePanel.mxml================–>

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="addComponents()"
            backgroundColor="#ffffff" backgroundAlpha="0.5">
      <mx:Metadata>
            [DefaultProperty("visualChildren")]
      </mx:Metadata>
      <mx:Script>
            <![CDATA[
                  import mx.core.UIComponent;
                  private var _components:Array;
                  public function set visualChildren(value:Array):void
                  {
                        _components = value;
                  }

                  private function addComponents():void
                  {
                        if (container.numChildren != 0)
                             container.removeAllChildren();
                        if (!_components)
                             return ;
                        for(var i:int = 0; i < _components.length; i++)
                        {
                             container.addChild(_components[i]);
                        }
                  }

                  private function updateState():void
                  {
                        if (currentState == 'collapsed')
                        {
                             currentState = '';
                        }
                        else
                        {
                             currentState = 'collapsed';
                        }
                  }
            ]]>
      </mx:Script>
      <mx:states>
            <mx:State name="collapsed">
                  <mx:RemoveChild target="{container}" />
                  <mx:SetProperty target="{titleLabel}" name="text"
                                         value="Click to open" />
            </mx:State>
      </mx:states>
      <mx:HBox id="header"
                   width="100%" height="20"
                   backgroundColor="#ffffff" mouseChildren="false"
                   buttonMode="true" click="{updateState()}">
            <mx:Label id="titleLabel"
                          width="100%"
                          text="Click to close" />
      </mx:HBox>
      <mx:VBox id="container"
                   paddingLeft="5" paddingRight="5"
                   paddingTop="5" paddingBottom="5" />

</mx:Box>

<!–==============test.mxml=================–>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical"
	width="500" height="500"
	xmlns:local="*" >
	<component:CollapsePanel width="250">
            <mx:Label text="Test colapse panel" />
            <mx:Button label="Button 1" />
            <mx:Button label="Button 2" />
	</component:CollapsePanel>
</mx:Application>