Re: [flexcoders] how to fix poor performance in this example (AdvancedDataGrid and Binding)
Yes. A gigantic 15 items. ;) I wouldn't have thought going through a list
of 15 items would be quite so processor intensive.
Though even if it's just 5 items and I use Array instead of ArrayCollection,
it's still choppy.
The problem isn't so much that it's scanning through the entire collection,
as if you change item.highlighted = list.isItemHighlighted(item) to
trace('here');, the choppiness disappears.
So, the problem is that it's setting this bound variable highlighted 15
times (or even just 5) for each item as it rolls over them. And the strange
thing is that the data all gets set behind the scenes. What happens that
the grid cells don't get repainted properly. If you actually play with the
program a little, dragging your mouse around a bit, you'll see what I'm
talking about. Here's a video that might be helpful:
http://www.youtube.com/watch?v=7LQFlQtiHsc
So it seems odd to me that the data is getting updated but the grid is
losing track of the ability to highlight.
You know what's really interesting? Change the style function this:
private function getColStyle(data:Object,
column:AdvancedDataGridColumn):Object
{
return { fontWeight:(data.highlighted ? bold : normal) }
}
Now you'll see that the bolding tracks perfectly! The reason it failed
before was the same reason the blue mouseover highlight was failing.
Internally, the grid is losing the ability to highlight.
On Thu, Jun 4, 2009 at 11:28 PM, Alex Harui aha...@adobe.com wrote:
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
--
Jason
[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
RE: [flexcoders] how to fix poor performance in this example (AdvancedDataGrid and Binding)
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
