Flex 4 自定义组件 - 如何通知皮肤属性更改? [英] Flex 4 Custom Component - How to notify skin of property changes?

问题描述

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

I have a custom Flex 4+ component that I am trying to make and have the skin be aware of changes to a custom property. This property will determine the graphic on the button (and some other visual changes) but the data will change constantly as it will be updated by a timer.

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

I've looked at untold examples and still seem unable to get the syntax correct or discover how things should be separated. I've looked at overriding commitProperties and the PropertyChangeEvent without success. So I have two questions.

1) 如何让皮肤在绑定属性发生变化时收到通知?

1) How can I get a skin to be notified of a bound property when it changes?

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

2) If the data for a bound property of the component is an object, will binding work properly if a property of the object changes (or would it be better to pass each property separately)?

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

Here is a stripped down example of what I'm trying to achieve.

组件如下所示:

<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 分钟更改一次时执行.所以皮肤是这样的:

I have a lot of different images I could be loading and so I'm afraid the number of states (with the combinations of up/down/over/disabled, etc. may get out of hand so the SetIconDisplay is setting the icon, but the real key is that I have other code in that function that needs to execute when the iconData property changes every X minutes or so. So the skin is something like this:

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

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

Again, don't worry as much about how the skin is actually doing what it is doing as that will probably change (not using states). I'm just trying to figure out how to call a specific function when the bound property is changed.

谢谢！

推荐答案

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

I ended up dispatching a custom event when the data is updated and listen for it in the skin.

组件:

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

这篇关于Flex 4 自定义组件 - 如何通知皮肤属性更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！