翻译(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>

openedclosed


Advertisements

declare members for dynamic class(翻译)

参考地址:

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=13066

PROBLEM SUMMARY
需要为动态的类(dynamic class)声明属性,但有可能与类本身内建的属性冲突

SOLUTION SUMMARY
在自定义的命名空间(custom namespace)中声明新成员。

EXPLANATION
动态类(dynamic class)允许使用在运行时为其添加属性和方法,这样新添的成员就可能与类内建的成员发生冲突。
比如:
package{
      import flash.display.Sprite;
      public dynamic class DynamicObject extends Sprite{
            public function DynamicObject():void{
                  super();
            }
            public function someName():void{
                  trace(‘method’);
            }
      }
}
我们不能再给DynamicObject类添加”someName”属性。下面的代码会引起编译错误”1168: Illegal assignment to function someName. “
var obj:Object = new DynamicObject();
obj.someName = “value”;

如果使用namespace,问题迎刃而解。
member_ns.as
package {
      public namespace member_ns = ‘urn:some-uri’;
}

DynamicObject.as
package{
      import flash.display.Sprite;
      public dynamic class DynamicObject extends Sprite{
            public function DynamicObject():void{
                  super();
            }
            member_ns var property:Boolean = true;
            member_ns function someName():void{
                  trace(‘method’);
            }
      }
}
可通过namespace访问这些方法,只需要指明所要引用的成员对象的namespace:
var object:DynamicObject = new DynamicObject();
object.someName = “value”;
object.member_ns::someName(); // method
      trace(object.member_ns::property); // true

这一招在写Proxy子类的时很管用。