apache-flex - Flex 4 自定义组件 - 如何通知皮肤属性更改？

Question

我有一个我正在尝试制作的自定义 Flex 4+ 组件，并让皮肤知道对自定义属性的更改。此属性将确定按钮上的图形(以及其他一些视觉变化)，但数据会随着计时器的更新而不断变化。

我看过无数的例子，但似乎仍然无法使语法正确或发现应该如何分离事物。我已经查看了覆盖 commitProperties 和 PropertyChangeEvent 没有成功。所以我有两个问题。

1) 我怎样才能让皮肤在绑定(bind)属性发生变化时得到通知？

2)如果组件的绑定(bind)属性的数据是一个对象，如果对象的属性发生变化，绑定(bind)是否会正常工作(或者单独传递每个属性会更好)？

这是我要实现的目标的精简示例。

该组件如下所示:

<s:ButtonBase xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>
    <![CDATA[
        private var _iconData:String;

        [Bindable]
        public function get iconData():String
        {
            return _iconData;
        }
        public function set iconData(value:String):void
        {
            _iconData = value;
        }
    ]]>
</fx:Script>

我这样称呼它:

<components:MyButton id="myButton" iconData="{myData.curIconTag}" skinClass="skins.MyButtonSkin" />

我有很多不同的图像可以加载，所以我担心状态的数量(向上/向下/过度/禁用等的组合可能会失控，所以 SetIconDisplay 正在设置图标，但是真正的关键是我在该函数中有其他代码需要在 iconData 属性每 X 分钟左右更改一次时执行。所以皮肤是这样的:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    creationComplete="init()">

<fx:Metadata>
    [HostComponent("components.MyButton")]
</fx:Metadata>

<s:states>
    <s:State name="default" />
    <s:State name="down"/>
    <s:State name="up"/>
    <s:State name="over"/>
    <s:State name="disabled" />
</s:states>

<fx:Script>
    <![CDATA[
        import components.MyButton;

        [Embed(source="images/image1.png")]
        private var icon1:Class;

        [Embed(source="images/image2.png")]
        private var icon2:Class;

        [Embed(source="images/image3.png")]
        private var icon3:Class;

        [Bindable] 
        public var hostComponent:MyButton;

        [Bindable] 
        private var iconClass:Class;

        private function init():void
        {
            iconClass = new Class();
        }

        // how do I get this called when the iconData property on my custom component is changed?
        private function SetIconDisplay():void
        {
            switch (hostComponent.iconData)
            {
                case "apple":
                    iconClass=icon1;
                    break;
                case "orange":
                    iconClass=icon2;
                    break;
                case "grape":
                    iconClass=icon3;
                    break;
            }
        }
    ]]>        
</fx:Script>

<s:BitmapImage source="{iconClass}" x="0" y="0" width="180" height="108"/>

同样，不要太担心皮肤实际上是如何做它正在做的事情，因为这可能会改变(不使用状态)。我只是想弄清楚当绑定(bind)属性更改时如何调用特定函数。

谢谢你!

Answer 1

当数据更新并在皮肤中监听它时，我最终调度了一个自定义事件。

组件:

<s:ButtonBase xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">

 <fx:Script>
      <![CDATA[
          import classes.CustomEvent;

          private var _iconData:String;

          [Bindable]
          public function get iconData():String
          {
               return _iconData;
          }
          public function set iconData(value:String):void 
          {
               _iconData = value;
               dispatchEvent(new CustomEvent("iconDataUpdated"));
          }
      ]]>
 </fx:Script>

皮肤添加了这个:

    protected function skin_preinitializeHandler(event:FlexEvent):void
{
        hostComponent.addEventListener(CustomEvent.ICON_DATA_UPDATED,SetIconDisplay);
}