Flex HSlider tooltip array population

Question

I want to be able to populate the tool tip array for a HSlider via a web service.

Below is my code and all I'm doing here is populating anotherArray in the init() function from the arrayValues array just to test that much.

However when I launch the application anotherArray contains only "null" and not the rest of the data.

Any ideas?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:containers="com.dougmccune.containers.*" 
    backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#353535, #353535]" creationComplete="init()">
    <mx:Script>
     <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.containers.Canvas;
      import mx.containers.Panel;
      import mx.controls.TextArea;
      import generated.webservices.*;

      import com.polecat.ui.customUIComponent.slider.SliderTrack;
      import com.polecat.ui.customUIComponent.slider.CSpSliderThumb;

      public var articlePanel:Panel;
      public var articleCanvas:Canvas;
      public var articleTextArea:TextArea;

      // create web service
      public var service:ICarouselService = new CarouselService();

      [Bindable]
      public var numResults:int = 0;

      // array to test slider


      var arrayValues:Array = ["null","January '08", "February '08", "March '08", "April '08", "May '08", "June '08", "July '08", "August '08",
             "September '08", "October '08", "November '08", "December '08"];

      [Bindable]
      public var anotherArray:Array = new Array();


      [Bindable]
      var gobbitArray:Array = ["null"];

      private function init() : void
      {
       service.addregisterSearchSetEventListener(registerSearchSetListener);
       service.addgetArticleSetEventListener(getArticleSetListener);

       // library_id
       //service.registerSearchSet(1);
       // need to wait here before calling next method
       // searchKey, startRecord, endRecord
       service.getArticleSet(1, 1, 2);
       for each(var s:String in arrayValues)
       {
        anotherArray.push(s);
       }
      }

      // -- Our Event Handlers --

      private function registerSearchSetListener(event:RegisterSearchSetResultEvent):void
      {
       var searchData:SearchMetaData = event.result;
       numResults = searchData.noOfResults;
      }

      private function getArticleSetListener(event:GetArticleSetResultEvent):void
      {
       var searchData:Array = event.result;

       for each (var article:VisualisationArticle in searchData)
       {
        // add the gobbit to the array
        //var numGobbits:int = gobbitArray.push(article.gobbit);
        //trace(numGobbits);

        // CoverFlow stuff
        articlePanel = new Panel();
        articleTextArea = new TextArea();
        articlePanel.addChild(articleTextArea);
        articlePanel.title = article.title;
        articleTextArea.text = article.sourceName + "\n" + article.url + "\n" + article.gobbit + "\n" + "Number of coverflow children: " + coverflow.numChildren + "\n" + "Size of searchData: " + searchData.length;
        articlePanel.width = 200;
        articlePanel.height = 200;

        coverflow.addChild(articlePanel);

       }
      }  
     ]]>
    </mx:Script>
    <mx:Style>
     Panel {
        borderColor: #99CDEE;
        borderAlpha: 1;
        borderThickness: 1;
        borderThicknessLeft: 1;
        borderThicknessTop: 0;
        borderThicknessBottom: 1;
        borderThicknessRight: 1;
        roundedBottomCorners: false;
        cornerRadius: 5;
        headerColors: #b5e6f3, #81b3e6;
        dropShadowEnabled: false;
        titleStyleName: "mypanelTitle";
        vertical-align:middle;
        horizontal-align:center;
     }

     .mypanelTitle {
        letterSpacing: 1;
        color: #333333;
        fontSize: 12;
        fontWeight: bold;
     }
</mx:Style>
    <mx:VBox id="box" verticalGap="0" height="247" width="100%" maxWidth="600" maxHeight="300" >
      <containers:CoverFlowContainer id="coverflow" width="100%" height="244" 
       horizontalGap="40" borderStyle="inset" backgroundColor="0x000000"
       reflectionEnabled="true"/>


    </mx:VBox>
    <mx:Canvas width="599" height="146">
     <mx:HSlider id="s" 
      showDataTip="false" 
      values="{anotherArray}"
      creationComplete="{s.value=1}"
      snapInterval="1"
      minimum="1"
      maximum="{anotherArray.length-1}"
      liveDragging="true"
      trackSkin="{SliderTrack}"
      sliderThumbClass="{CSpSliderThumb}"
      width="502" x="48.5" y="10">
     </mx:HSlider>

      </mx:Canvas>


</mx:Application>

Answer 1

Flex's support for data binding with the Array type is limited. The HSlider will not receive change events when you call Array.push(). I really recommend using ArrayCollection instead of Array in nearly every case. The overhead is really pretty negligible compared to the complexity of all the UIComponents in your application.