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

[Bindable]
public var numResults:int = 0;

// array to test slider

[Bindable] // you miss this line
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();

Answer 2

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.