mx.controls.PopUpButtonに添付されたメニューは変更されません

Question

私は問題をデモするための非常に簡単なテストケースを用意しました。

以下の2つのファイルをFlash Builder 4.6プロジェクトに配置すると、すぐに実行されます。

私の問題は、カスタムのPopUpButtonが変化したことがない私に添付メニューは（わずかに変更された）ということです - あなたはそれの右側にある3つのボタンのいずれかをクリックすると、基本となる配列データプロバイダが変更されたにもかかわらず：

AuxButtonTest.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:comps="*" 
    creationComplete="init()"> 

    <fx:Script> 
     <![CDATA[ 
      import mx.controls.Alert; 
      import mx.events.FlexEvent; 

      private const XML1:XML = 
       <pref> 
        <aux event="1">One</aux> 
        <aux event="2">Two</aux> 
        <aux event="3">Three</aux> 
        <aux event="4">Four</aux> 
        <aux event="5">Five</aux> 
       </pref>; 

      private const XML2:XML = 
       <pref> 
        <aux event="1">One</aux> 
        <aux event="2">Two</aux> 
       </pref>; 

      private const XML3:XML = 
       <pref> 
        <aux event="3">Three</aux> 
       </pref>; 

      public function init():void { 
       _auxBtn.update(XML1.aux); 
      } 

      //private function handleAuxChosen(event:PrefEvent):void { 
       //Alert.show(event.toString()); 
      //} 
     ]]> 
    </fx:Script> 

    <s:controlBarContent> 
      <!-- commented: aux_chosen="handleAuxChosen(event)" --> 
     <comps:AuxButton id="_auxBtn" /> 
     <s:Button id="_btn1" label="XML 1" click="_auxBtn.update(XML1.aux);" /> 
     <s:Button id="_btn2" label="XML 2" click="_auxBtn.update(XML2.aux);" /> 
     <s:Button id="_btn3" label="XML 3" click="_auxBtn.update(XML3.aux);" /> 
    </s:controlBarContent> 
</s:Application> 

AuxButton.mxml（私のカスタムコPopUpButtonに基づく数値）：

<?xml version="1.0" encoding="utf-8"?> 
<mx:PopUpButton 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    popUp="{_menu}" 
    creationComplete="init(event)"> 

    <fx:Metadata> 
     <!-- [Event(name="aux_chosen", type="PrefEvent")] --> 
    </fx:Metadata> 

    <fx:Script> 
     <![CDATA[ 
      import mx.controls.Menu; 
      import mx.events.MenuEvent; 
      import mx.events.FlexEvent; 

      private var _str:String; 

      [Bindable] 
      private var _data:Array = new Array(); 

      [Bindable] 
      private var _menu:Menu = new Menu(); 

      private function init(event:FlexEvent):void { 
       _menu.dataProvider = _data; 
       _menu.addEventListener('itemClick', handleMenu); 
       addEventListener('click', handleClick); 
      } 

      public function update(xlist:XMLList):void { 
       _data.length = 0; 
       for each (var xml:XML in xlist) { 
        _data.push({label: xml, event: xml.@event}); 
       } 

       label = _data[0].label; 
       _str = _data[0].event; 

       enabled = true; 
      } 

      private function handleMenu(event:MenuEvent):void { 
       label = event.label; 
       _str = event.item.event; 
      }   

      private function handleClick(event:MouseEvent):void { 
       enabled = false; 
       //dispatchEvent(new PrefEvent(PrefEvent.AUX_CHOSEN, _str)); 
      } 
     ]]> 
    </fx:Script> 

</mx:PopUpButton> 

私はカスタムイベントをコメントアウトしました。ここでは問題ありません。

ボタンを数回クリックしてメニューを表示してください。常に5つの項目があり、間違っています。

更新：答えをいただきありがとうございます。次のコードは今すぐ使用できます。私はまだなぜArrayListがサポートされていないのだろうと思っていますが、ArrayCollectionはうまく動作します。

AuxButtonText.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<mx:PopUpButton 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    popUp="{_menu}" 
    creationComplete="init(event)"> 

    <fx:Script> 
     <![CDATA[ 
      import mx.controls.*; 
      import mx.events.*; 
      import mx.collections.*; 

      private var _str:String; 

      [Bindable] 
      private var _data:ArrayCollection = new ArrayCollection(); 
      //private var _data:ArrayList = new ArrayList(); 

      [Bindable] 
      private var _menu:Menu = new Menu(); 

      private function init(event:FlexEvent):void { 
       _menu.dataProvider = _data; 
       _menu.addEventListener('itemClick', handleMenu); 
       addEventListener('click', handleClick); 
      } 

      public function update(xlist:XMLList):void { 
       _data.removeAll(); 

       if (xlist == null || xlist.length() == 0) { 
        enabled = false; 
        return; 
       } 

       for each (var xml:XML in xlist) 
        _data.addItem({label: xml, event: xml.@event}); 

       label = _data.getItemAt(0).label; 
       _str = _data.getItemAt(0).event; 

       enabled = true; 
      } 

      private function handleMenu(event:MenuEvent):void { 
       label = event.label; 
       _str = event.item.event; 
      }   

      private function handleClick(event:MouseEvent):void { 
       enabled = false; 
       //dispatchEvent(new PrefEvent(PrefEvent.AUX_CHOSEN, _str)); 
      } 
     ]]> 
    </fx:Script> 

</mx:PopUpButton> 

AuxButton.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:comps="*" 
    initialize="init()"> 

    <fx:Script> 
     <![CDATA[ 
      private const XML1:XML = 
       <pref> 
        <aux event="1">One</aux> 
        <aux event="2">Two</aux> 
        <aux event="3">Three</aux> 
        <aux event="4">Four</aux> 
        <aux event="5">Five</aux> 
       </pref>; 

      private const XML2:XML = 
       <pref> 
        <aux event="1">One</aux> 
        <aux event="2">Two</aux> 
       </pref>; 

      private const XML3:XML = 
       <pref> 
        <aux event="3">Three</aux> 
       </pref>; 

      private const XML4:XML = 
       <pref> 
       </pref>; 

      public function init():void { 
       _auxBtn.update(XML1.aux); 
      } 
     ]]> 
    </fx:Script> 

    <s:controlBarContent> 
     <comps:AuxButton id="_auxBtn" /> 
     <s:Button id="_btn1" label="XML 1" click="_auxBtn.update(XML1.aux);" /> 
     <s:Button id="_btn2" label="XML 2" click="_auxBtn.update(XML2.aux);" /> 
     <s:Button id="_btn3" label="XML 3" click="_auxBtn.update(XML3.aux);" /> 
     <s:Button id="_btn4" label="LEN=0" click="_auxBtn.update(XML4.aux);" /> 
     <s:Button id="_btn5" label="NULL" click="_auxBtn.update(null);" /> 
    </s:controlBarContent> 
</s:Application> 

Answer 1

配列は、任意のイベント、その内容の変更を派遣していません。経験則として、[Bindable]を配列に使用し、それをある種のdataProviderとして使用するとです。通常はです。追加/削除はイベントをディスパッチしないため、いずれのコンポーネントでも処理されないため、悪い考えです。

Arrayの代わりに、コンテンツが変更されたときにタイプCollectionEvent.COLLECTION_CHANGEのイベントをディスパッチするArrayCollectionを使用してください。 Flex SDKのほとんどのコンポーネントは、これらのイベントを処理し、それに応じて自身を更新します。したがって、新しいsourceをArrayCollectionに割り当てるとにメニュー項目を更新させるCollectionEventが送出されるので、次のコードが機能します。

// you don't need [Bindable] on _data 
private var _data:ArrayCollection = new ArrayCollection(); 

public function update(xlist:XMLList):void 
{ 
    var items:Array = []; 

    for each (var xml:XML in xlist) 
    { 
     items.push({label: xml, event: xml.@event}); 
    } 

    _data.source = items; 

    if (items.length > 0) 
    { 
     label = items[0].label; 
     _str = items[0].event; 
    } 

    enabled = true; 
} 

Answer 2

私の問題は私に添付メニューは（わずかに変更された）ということですカスタム のPopUpButtonは変化しない - 基本となる配列データ プロバイダが

を変化させても、この本明細書中には、あなたの問題があります。メニューのdataProviderを変更するか、プライベート_data変数と同期させるコードはありません。 _data配列は実際には変更されますが、_dataと_menu.dataProviderの間の関係はコーディングされていません。それは、データの変更として変更されることはありません、

 private function init(event:FlexEvent):void { 
      _menu.dataProvider = _data; 
      _menu.addEventListener('itemClick', handleMenu); 
      addEventListener('click', handleClick); 
     } 

しかし：

初期値は、あなたのinitメソッドで設定されています。

ここでは、init（）メソッドがcreationCompleteで呼び出されることを追加します。これはコンポーネントが一度完全なライフサイクルを経ることを意味します。 _menuのdataProviderを変更し、新しいdataProviderで再描画するためにライフサイクルを再度実行します。これは通常望ましくないことです。どのイベントが発生したかを理解するには、Flex Component Lifecycleをお読みください。 createChildren（）を実行した後、子がサイズ変更されて測定される前に、caleldであるdataProviderをinitializeに設定することをお勧めします。

とにかく、クイックフィックスは自分のアップデートでその場で_menu.dataProviderを変更することです：

 public function update(xlist:XMLList):void { 
      _data.length = 0; 
      for each (var xml:XML in xlist) { 
       _data.push({label: xml, event: xml.@event}); 
      } 

      label = _data[0].label; 
      _str = _data[0].event; 

      enabled = true; 
         // new code 
         _menu.dataProvider = _data; 
     }