フレックス4：スパークボタンを簡単に拡張する方法はありますか？

Question

ファイル>新規> MXMLスキンを作成し、それをspark.components.buttonに基づいて作成して、いくらかカスタムのSparkボタンを作成しました。問題は、ボタンコンポーネントに余分なテキストフィールドを追加し、そのテキストを動的に変更する必要があることです。もちろん、スパークボタンではプロパティは認識されません。

カスタムボタンスキン&にこのフィールドを追加する簡単な方法はありますか？もしそうでなければ、私がやったことを取ってスパークボタンを伸ばす簡単な方法はありますか？私は、ActionScriptですべて記述することなくそれを行う方法を示すサンプルを見つけることができないようです。

Answer 1

嬉しいです。これはあなたが思うよりずっと簡単ですので、落胆しないでください！ ActionScriptは、いったん取得すると非常に簡単です。

まず、私たちが望むものを定義しましょう。あなたの質問を読んだ後、あなたはこのようなボタンを使用したいと考えています：

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

これを実現する方法を考えてみましょう。

は今、私は非常にActionScriptを使用してボタンを拡張することをお勧めしますが、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"> 

    <fx:Script> 
     <![CDATA[ 

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


     ]]> 
    </fx:Script> 


</s:Button> 

：

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

次に、あなたが<fx:Script>に必要なSkinPart秒を追加することができます

これでスキンを作成するときに、元のラベルのようなものを追加する必要があります。新しいSkinPartを反映するために別のIDを使用してください：

しかし、待って！私たちの2番目のラベルはどんなテキストを表示すべきですか？

<?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に接続する必要があります。我々は（理由はinvalidateProperties void次に（）の呼び出しで呼び出されます）にcommitPropertiesにラベルを変更後、ときLABEL2の変更invalidateProperties void次にを呼び出して、これを行う：

<?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> 

！