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> 

祝您好運！