[flexcoders] event listeners on Sprites - performance problem

ibo Wed, 23 Jul 2008 08:04:41 -0700

MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="0-617774704-1216825475=:34053"


--0-617774704-1216825475=:34053
Content-Type: text/plain; charset=us-ascii

I created a component what I call bookmark bar where there are markers that you 
can click
to jump/scroll to a particular portion of a list (given the index). Similar to 
Eclipse/Flexbuilder when you have
errors and there are markers on the right side pane that lets you jump to the 
erroneous line. I am using 
this for a datagrid using Canvas as parent component.

                var uiComponent:UIComponent = new UIComponent();        
                addChild(uiComponent);

                for (var i:int=0; i<_dataProvider.length; i++) {
                    var bm:Bookmark = _dataProvider[i] as Bookmark;             
       
                    ....
                    sprite = new MySprite();   // extends Sprite. Creates an 
instance Sprite for each marker
                    sprite.graphics.lineStyle(3, bm.color, 1, false, 
LineScaleMode.NORMAL, CapsStyle.SQUARE);                    
                    sprite.graphics.moveTo(x,  y);
                    sprite.graphics.lineTo(x + xOffset, y);
                    ...                    
                    sprite.addEventListener(MouseEvent.CLICK, scrollToLine);
                    sprite.buttonMode = true;
                    ...
                    uiComponent.addChild(sprite);                        
                }

It works as expected but I noticed it is heavy on CPU and affects the 
responsiveness of the
UI. CPU spikes at 55% to 60% even if I only have a few markers (10 to 15).
The lag is very noticeable because just hovering the mouse pointer over the 
list,
the item highlighter, delay in rendering the display is very evident.
It doesnt happen on my app when I turn it off.

Am I doing this right? any workaround?

Regards,
Stephen

--0-617774704-1216825475=:34053
Content-Type: text/html; charset=us-ascii

<html><head><style type="text/css"><!-- DIV {margin:0px;} 
--></style></head><body><div style="font-family:times new roman, new york, 
times, serif;font-size:12pt"><div>I created a component what I call bookmark 
bar where there are markers that you can click<br>to jump/scroll to a 
particular portion of a list (given the index). Similar to Eclipse/Flexbuilder 
when you have<br>errors and there are markers on the right side pane that lets 
you jump to the erroneous line. I am using <br>this for a datagrid using Canvas 
as parent component.<br><br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var uiComponent:UIComponent = new 
UIComponent();&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
addChild(uiComponent);<br><br>&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; for (var i:int=0; 
i&lt;_dataProvider.length; i++)
 {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var bm:Bookmark = _dataProvider[i] as 
Bookmark;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
....<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 sprite = new MySprite();&nbsp;&nbsp; // extends Sprite. Creates an instance 
Sprite for each marker<br>&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; sprite.graphics.lineStyle(3, bm.color, 1, false, 
LineScaleMode.NORMAL, CapsStyle.SQUARE);&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp; sprite.graphics.moveTo(x,&nbsp; y);<br>&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; sprite.graphics.lineTo(x + xOffset, 
y);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ... &nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; sprite.addEventListener(MouseEvent.CLICK, 
scrollToLine);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; sprite.buttonMode = 
true;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...<br>&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
uiComponent.addChild(sprite);&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br><br>It works 
as expected but I noticed it is heavy on CPU and affects the responsiveness of 
the<br>UI. CPU spikes at 55% to 60% even if I only have a few markers (10 to 
15).<br>The lag is very noticeable because just hovering the mouse pointer over 
the list,<br>the item highlighter, delay in rendering the display is very 
evident.<br>It doesnt happen on my app when I turn it off.<br><br>Am I doing 
this right? any 
workaround?<br><br>Regards,<br>Stephen<br></div></div></body></html>
--0-617774704-1216825475=:34053--

[flexcoders] event listeners on Sprites - performance problem

Reply via email to