Flex 4：有没有简单的方法来扩展 Spark 按钮？

Question

我通过执行“文件”>“创建了一个自定义 Spark 按钮”新的> MXML 皮肤并基于spark.components.button。问题是我需要向按钮组件添加一个额外的文本字段并动态更改该文本...但是，当然，Spark 按钮无法识别该属性。

有没有一种简单的方法可以将此字段添加到我的自定义按钮皮肤和按钮皮肤中？它的属性可以解决吗？如果没有，是否有一种简单的方法可以采用我所做的事情并扩展 Spark 按钮？我似乎无法找到任何示例来说明如何在不将其全部写在 ActionScript 中的情况下执行此操作。

Answer 1

我很高兴你问了！这比您想象的要容易得多，所以不要灰心！一旦掌握了 ActionScript 的窍门，它就会变得非常简单。

首先，让我们定义我们想要什么。读完你的问题后，我相信你会想使用你的按钮，如下所示：

<local:MyCustomButton label="Hello" label2="World!"/>

所以让我们来看看如何实现这一点。

现在，我强烈建议使用 ActionScript 扩展 Button，但也可以在 mxml 中执行：

//MyCustomButton.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx">

</s:Button>

然后您可以在 中添加所需的 SkinPart 。 code>：

<?xml version="1.0" encoding="utf-8"?>
<s:Button 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[

            [SkinPart]
            public var secondLabelDisplay:spark.components.Label;


        ]]>
    </fx:Script>


</s:Button>

所以现在当您制作皮肤时，您应该包含类似于原始标签的内容，只是使用不同的 ID 来反映您的新 SkinPart：

但是等等！我们的第二个标签应该显示什么文本？好吧，我们需要添加另一个可以为按钮的每个单独实例设置的属性：

<?xml version="1.0" encoding="utf-8"?>
<s:Button 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[

            [SkinPart]
            public var secondLabelDisplay:spark.components.Label;


            private var _label2:String;

            public function get label2():String
            {
                return _label2;
            }

            public function set label2(value:String):void
            {
                _label2 = value;
            }


        ]]>
    </fx:Script>


</s:Button>

很酷，所以现在我们可以在使用按钮时设置 label2，但此时它不会更改标签的实际文本属性。我们需要将 label2 连接到 secondaryLabelDisplay。我们通过在 label2 更改时调用 invalidateProperties 来实现此目的，然后更改 commitProperties 中的标签（由于 invalidateProperties() 调用而调用该标签）：

  <?xml version="1.0" encoding="utf-8"?>
    <s:Button 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[

                [SkinPart]
                public var secondLabelDisplay:spark.components.Label;


                private var _label2:String;
                private var label2Changed:Boolean;

                public function get label2():String
                {
                    return _label2;
                }

                public function set label2(value:String):void
                {
                    _label2 = value;
                    label2Changed = true;
                    invalidateProperties();
                }

                override protected function commitProperties():void
                {
                    super.commitProperties();

                    if(label2Changed)
                    {
                        label2Changed = false;
                                            secondLabelDisplay.text = label2;
                    }

                }


            ]]>
        </fx:Script>


    </s:Button>

最后，您会注意到，如果您再次更改 label2运行后，标签将显示更改。但如果您像我们的目标用法一样设置初始 label2 ，则不会显示更改。 Flex 团队专门针对这种情况制定了一个特殊的方法，partAdded()。我不会详细介绍它，因为已经有大量关于该主题的文献。

最后，这是我们完成的自定义按钮，等待皮肤使用：

<fx:Script>
    <![CDATA[

        [SkinPart]
        public var secondLabelDisplay:spark.components.Label;


        private var _label2:String;
        private var label2Changed:Boolean;

        public function get label2():String
        {
            return _label2;
        }

        public function set label2(value:String):void
        {
            _label2 = value;
            label2Changed = true;
            invalidateProperties();
        }

        override protected function commitProperties():void
        {
            super.commitProperties();

            if(label2Changed)
            {
                label2Changed = false;
                                    secondLabelDisplay.text = label2;
            }

        }

        override protected function partAdded(partName:String, instance:Object):void
        {
            if(instance == secondLabelDisplay)
            {
                secondLabelDisplay.text = _label2;
            }

        }


    ]]>
</fx:Script>

祝你好运！