RE: [flexcoders] how to fix poor performance in this example (AdvancedDataGrid and Binding)

[Alex Harui]

The rollover handler is scanning the entire arraycollection.

Alex Harui
Flex SDK Developer
Adobe Systems Inc.<http://www.adobe.com/>
Blog: http://blogs.adobe.com/aharui

From: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On Behalf 
Of Pan Troglodytes
Sent: Thursday, June 04, 2009 12:00 PM
To: flexcoders
Subject: [flexcoders] how to fix poor performance in this example 
(AdvancedDataGrid and Binding)





I have the following example that is a very simplified form of what I need to 
do in my much larger program.  The goal is to have a mouseover on a grid item 
set a variable in the data object.  In the real program, this fires off some 
other code which makes that item visible and the others hidden, etc.  But here, 
I'm just trying the first part.

TestObject.as:
package
{
  public class TestObject
  {
    [Bindable] public var label:String;
    [Bindable] public var highlighted:Boolean;
  }
}

GenericTest.mxml:
<?xml version="1.0" encoding="utf-8"?>
<Application
  xmlns="http://www.adobe.com/2006/mxml";
  creationComplete="cc()"
  layout="horizontal"
  >
  <Script>
    <![CDATA[
      import mx.events.ListEvent;
      import mx.collections.ArrayCollection;
      [Bindable] public var d:ArrayCollection = new ArrayCollection([]);

      private const ITEM_COUNT:int = 15;

      private function cc():void
      {
        for (var i:int = 0; i < ITEM_COUNT; i++)
        {
          var item:TestObject = new TestObject;
          item.label = "Item " + i;
          d.addItem(item);
        }
      }

      private function listRollover(e:ListEvent):void
      {
        for each (var item:TestObject in d)
          item.highlighted = list.isItemHighlighted(item);
      }

      private function getColStyle(data:Object, 
column:AdvancedDataGridColumn):Object
      {
        return { fontWeight:(list.isItemHighlighted(data) ? "bold" : "normal") }
      }

      private function getColStyle2(data:Object, 
column:AdvancedDataGridColumn):Object
      {
        return { fontWeight:(list2.isItemHighlighted(data) ? "bold" : "normal") 
}
      }

    ]]>
  </Script>
  <AdvancedDataGrid id="list" dataProvider="{d}" height="100%" 
itemRollOver="listRollover(event)">
    <columns>
      <AdvancedDataGridColumn styleFunction="getColStyle" dataField="label"/>
    </columns>
  </AdvancedDataGrid>
  <AdvancedDataGrid id="list2" dataProvider="{d}" height="100%">
    <columns>
      <AdvancedDataGridColumn styleFunction="getColStyle2" dataField="label"/>
    </columns>
  </AdvancedDataGrid>
</Application>

To see the problem, run your mouse up and down the list on the left and the 
list on the right.  If you get the same results I do with SDK 3.0.2 and player 
10,0,12,36 (FF 3.0.6 or IE 7), you'll see that the list on the right tracks 
very smoothly but the one on the left is choppy.  The only difference between 
the two is that the one on the left has a rollOver handler that sets a Bindable 
variable in the data object.

If you comment out the [Bindable] on TestObject's highlighted variable, the 
choppiness goes away.  So it's something to do with all the binding glue being 
fired behind the scenes.  Is there some good way to work around this while 
still being able to use binding in this way?

--
Jason