Flex: Components bound to empty ArrayCollection at load time don't render as expected when the ArrayCollection is updated

Question

I'm new to Flex and am using TileList bound to an ArrayCollection. The array collection is empty at load time, and then updates with the results from am HTTPService call. The problem is that the item renderers aren't being rendered as expected, I'm guessing because there was no data when they were first rendered at load time. Here's simplified example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

  <mx:Script>
    <![CDATA[

      import mx.collections.ArrayCollection;

      [Bindable]
      public var myList1:ArrayCollection = new ArrayCollection();

      [Bindable]
      public var myList2:ArrayCollection = new ArrayCollection([{item:"foo"}, {item:"bar"}]);

      public function updateMyList():void
      {
          myList1.source = [{item:"foo"}, {item:"bar"}];
      }

    ]]>
  </mx:Script>

<mx:Button id="myButton" label="Update My List"
           click="updateMyList();"/>


  <mx:TileList dataProvider="{myList1}"
           direction="vertical"
           width="800" >

    <mx:itemRenderer>

      <mx:Component >

    <mx:Canvas backgroundColor="yellow" >
      <mx:Label text="{data.item}" width="800"  />
    </mx:Canvas>

      </mx:Component>

    </mx:itemRenderer>

  </mx:TileList>


<!-- This one renders as expected  -->

  <mx:TileList dataProvider="{myList2}"
           direction="vertical"
           width="800" >

    <mx:itemRenderer>

      <mx:Component >

    <mx:Canvas backgroundColor="yellow" >
      <mx:Label text="{data.item}" width="800"  />
    </mx:Canvas>

      </mx:Component>

    </mx:itemRenderer>

  </mx:TileList>

</mx:Application>

You will notice that the second TileList whose bindings has data at load time renders as expected (800px wide), bit the first TileList is rendered is not the correct width and has scrollbars around it.

Could anyone explain why this is happening or even provide some work arounds to avoid this?

Regards,

Chris

Answer 1

It's likely that this section is causing the problems:

public function updateMyList():void
          {
              myList1.source = [{item:"foo"}, {item:"bar"}];
          }

From here:

source of data in the ArrayCollection. The ArrayCollection object does not represent any changes that you make directly to the source array. Always use the ICollectionView or IList methods to modify the collection.

This property can be used as the source for data binding. When this property is modified, it dispatches the listChanged event.

So I'd probably change the line to:

myList1= new ArrayCollection([{item:"foo"}, {item:"bar"}]);

Answer 2

http://livedocs.adobe.com/flex/3/langref/mx/controls/TileList.html Check the API.

Set the columnWidth and rowHeight properties like this,

  <mx:TileList dataProvider="{myList1}"
                   direction="vertical"
                   width="800" columnWidth="800" rowHeight="25">

There is probably a more "proper" way to do it, but that should get you started.