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

Question

我通过File> New> MXML皮肤创建了一个有点自定义的Spark按钮，并将其基于spark.components.button。问题是我需要为按钮组件添加一个额外的文本字段并动态地更改该文本......但是当然，该属性在Spark Button上无法识别。

是否有一个简单的方法可以将此字段添加到我的自定义按钮皮肤&其属性中，以便可以解决？如果没有，是否有一种简单的方法来采取我所做的并且只是扩展Spark Button？我似乎无法找到任何示例显示如何在ActionScript中完全编写它。

Answer 1

我很高兴你问了！这比你想象的要容易得多，所以不要气馁！一旦你掌握了它，ActionScript很容易。

首先，让我们定义我们想要的。阅读您的问题后，我相信你想用你的按钮是这样的：

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

所以，让我们在如何使之成为现实。

现在，我会强烈建议使用ActionScript伸长按钮，但它也可以在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> 

酷，所以现在当我们使用我们的按钮，我们可以设置标签2，但在这一点上不会更改标签的实际文本属性。我们需要将我们的label2连接到我们的第二个LabelDisplay。我们这样做是通过调用invalidateProperties当LABEL2变化，然后改变的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> 

祝您好运！