Question

我通过执行文件＆gt;创建了一个有点自定义的Spark按钮。新＆gt; MXML皮肤并以spark.components.button为基础。问题是我需要在按钮组件中添加一个额外的文本字段并动态更改该文本...但当然，在Spark按钮上无法识别该属性。

是否有一种简单的方法可以将此字段添加到我的自定义按钮皮肤＆amp;它的属性可以解决吗？如果没有，是否有一种简单的方法来完成我所做的并只是扩展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：

中添加所需的<fx:Script>

<?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连接到secondLabelDisplay。我们这样做是通过在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>

祝你好运！

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

1 个答案: