Flex 4自定义组件 - 如何通知皮肤属性变化？

Question

我有一个自定义Flex 4+组件,我正在尝试制作并让皮肤了解自定义属性的更改.此属性将确定按钮上的图形(以及一些其他可视更改),但数据将不断更改,因为它将由计时器更新.

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

1)如何在绑定属性发生变化时通知皮肤？

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

这是我正在努力实现的一个精简的例子.

该组件如下所示:

<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设置图标,但真正的关键是我在该函数中有其他代码需要在每隔X分钟左右更改一次iconData属性时执行.所以皮肤是这样的:

<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"/>

同样,不要太担心皮肤实际上正在做什么,因为它可能会改变(不使用状态).我只想弄清楚如何在绑定属性更改时调用特定函数.

谢谢!

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);
}