You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Federico De Maddalena <f....@patente.it> on 2013/09/03 15:16:56 UTC
Improve spark List performance
Hi! I'm working on a mobile project.
I created a spark List, which item renderer is an extension of
ItemRenderer. Each of my item renderer contains one spark Image, one
Label and a number of small buttons which varies from 3 to 20.
Now, scrolling the list is terribly slow. There are ways to improve
scroll speed? I spent a lot of time but without success.
Regards
federico
Re: R: Improve spark List performance
Posted by Alex Harui <ah...@adobe.com>.
On 9/3/13 7:18 AM, "Evyatar Ben Halevi-Arbib" <ev...@gmail.com> wrote:
>Hey,
>
>One more thing I suggest is having the buttons click event listener
>defined
>with weak reference -
> button.addEventListener(MouseEvent.CLICK,
>handleMouseClick*,false,0,true*);
I haven't looked at the code, but why? Weak references can cause
intermittent behavior. And these days, for future-proofing, it is best to
avoid them so you code will more easily port to JS if you need to do that
someday.
-Alex
Re: R: Improve spark List performance
Posted by Evyatar Ben Halevi-Arbib <ev...@gmail.com>.
Hey,
One more thing I suggest is having the buttons click event listener defined
with weak reference -
button.addEventListener(MouseEvent.CLICK, handleMouseClick*,false,0,true*);
Regards,
Evyatar
On Tue, Sep 3, 2013 at 4:46 PM, Angelo Lazzari <la...@gmail.com>wrote:
> Hi,
> this should be a good starting point to tuning your item render:
>
>
> http://solu-pedia.com/2013/04/10/apache-flex-mobile-app-performance-tuning-articles/
>
> Cheers
> Angelo
>
> www.redtulp.com
>
>
>
> 2013/9/3 Peter Ent <pe...@adobe.com>
>
> > Each time the itemRenderer's data is set, you are wiping out all of the
> > button in the TileGroup and re-creating them. That's a source of your
> slow
> > scrolling performance.
> >
> > As nice-and-easy as your approach is, it is better to add some more code
> > complexity and re-use those buttons.
> >
> > Here's one example: you could, for each itemRenderer, have a cache of
> > previously created buttons, which would be empty the first time the
> > itemRenderer was used. If you need 10 buttons but have less than 10
> (e.g.,
> > 0 the first time), "use" the buttons (explained below) you have
> previously
> > created and create the remaining, being sure to also put references to
> > them into your cache.
> >
> > If you have more buttons in your cache than you need, "use" the amount
> you
> > need and "deactivate" the ones you don't. That is, if you have 20 buttons
> > in the cache but only need 8, you'll deactivate the remaining 12.
> >
> > So "use" means to set a button's visible and includeInLayout properties
> to
> > true. "Deactivate" means to set a button's visible and includeInLayout
> > properties to false.
> >
> > I think an approach like this would have better performance for you. If
> > you can avoid setting includeInLayout, it will be even better since all
> > you will be doing is hiding/showing the buttons, but the itemRenederers
> > might not look right if you also don't remove them from the layout.
> >
> > Peter Ent
> > Flex SDK Team
> > Adobe Systems
> >
> > On 9/3/13 9:29 AM, "Federico De Maddalena" <f....@patente.it>
> > wrote:
> >
> > >Hi Ben
> > >I'm developing a mobile project, not desktop!
> > >Images in use are very small.
> > >Usevirtuallayout is set on true.
> > >The code is here:
> > >
> > > <fx:Script>
> > > <![CDATA[
> > > import spark.components.Button;
> > > import spark.core.ContentCache;
> > >
> > > import events.SchedaEvent;
> > >
> > > static public const s_imageCache:ContentCache=new
> > ContentCache();
> > >
> > > override public function set
> > data(value:Object):void
> > > {
> > > super.data=value;
> > > lezione.text=value.titolo;
> > >
> > img.source="img/lez/"+value.lezione+"g.png";
> > >
> > > schede.removeAllElements();
> > > for(var i:int=0; i<value.schede.length;
> > i++)
> > > {
> > > var button:Button=new Button();
> > > button.label=String(i+1);
> > > button.id=value.schede[i];
> > > button.height=40;
> > > button.width=40;
> > >
> > button.addEventListener(MouseEvent.CLICK, handleMouseClick);
> > > schede.addElement(button);
> > > }
> > > }
> > >
> > > private function
> > handleMouseClick(event:MouseEvent):void
> > > {
> > > sendEvent(parseInt(
> event.currentTarget.id
> > ));
> > > }
> > >
> > > private function sendEvent(id:int):void
> > > {
> > > var e:SchedaEvent=new
> > SchedaEvent(SchedaEvent.LOAD_SCHEDA);
> > > e.Id=id;
> > >
> > > this.owner.dispatchEvent(e);
> > > }
> > > ]]>
> > > </fx:Script>
> > >
> > > <s:HGroup width="100%" height="100%" paddingTop="3">
> > > <s:VGroup height="100%" width="20%" verticalAlign="top"
> > >horizontalAlign="center">
> > > <s:Image width="80%" height="80%" id="img"
> > >contentLoader="{s_imageCache}"/>
> > > </s:VGroup>
> > > <s:VGroup height="100%" width="70%">
> > > <s:Label width="100%" height="20%" id="lezione"/>
> > > <s:TileGroup width="100%" height="80%"
> > id="schede"/>
> > > </s:VGroup>
> > >
> > > </s:HGroup>
> > >
> > >-----Messaggio originale-----
> > >Da: Ben Smeets [mailto:ben@okapion.com]
> > >Inviato: martedì 3 settembre 2013 15.22
> > >A: users@flex.apache.org
> > >Oggetto: Re: Improve spark List performance
> > >
> > >How many rows in the list? (i.c.w. useVirtualLayout)
> > >
> > >The setup you mention shouldn't be a problem I think (unless the image
> > >you talk about is 200MB a pop), but depends on the implementation
> > >(details). E.g., if the buttons are created every scroll, instead of
> > >reused, that might be a cause.
> > >
> > >Any code you can share, can help (me at least) to track down the
> culprit.
> > >
> > >Not a guru here though, so maybe others will know off the top of their
> > >heads :)
> > >
> > >Ben
> > >
> > >P.S. We are talking desktop app here right? Mobile is a different beast
> > >all together (for me).
> > >
> > >
> > >
> > >On 3 sep. 2013, at 15:16, Federico De Maddalena
> > ><f....@patente.it> wrote:
> > >
> > >> Hi! I'm working on a mobile project.
> > >> I created a spark List, which item renderer is an extension of
> > >> ItemRenderer. Each of my item renderer contains one spark Image, one
> > >> Label and a number of small buttons which varies from 3 to 20.
> > >> Now, scrolling the list is terribly slow. There are ways to improve
> > >> scroll speed? I spent a lot of time but without success.
> > >> Regards
> > >> federico
> > >>
> > >
> >
> >
>
>
> --
> Angelo Lazzari
> mobile: 0039 347 0090 452
> mail: lazzari.angelo@gmail.com
>
>
> ----------------------------
> Verificate la corrispondenza del destinatario; in caso contrario vogliate
> notificare ciò al mittente e, consci della responsabilita'per l'uso
> indebito, cancellare il messaggio e sue copie / Verify the correspondence
> of the addressee; otherwise, notify that to the sender and, conscious of
> the responsibility for the undue use, destroy the message and its copies.
> ----------------------------
>
Re: R: Improve spark List performance
Posted by Angelo Lazzari <la...@gmail.com>.
Hi,
this should be a good starting point to tuning your item render:
http://solu-pedia.com/2013/04/10/apache-flex-mobile-app-performance-tuning-articles/
Cheers
Angelo
www.redtulp.com
2013/9/3 Peter Ent <pe...@adobe.com>
> Each time the itemRenderer's data is set, you are wiping out all of the
> button in the TileGroup and re-creating them. That's a source of your slow
> scrolling performance.
>
> As nice-and-easy as your approach is, it is better to add some more code
> complexity and re-use those buttons.
>
> Here's one example: you could, for each itemRenderer, have a cache of
> previously created buttons, which would be empty the first time the
> itemRenderer was used. If you need 10 buttons but have less than 10 (e.g.,
> 0 the first time), "use" the buttons (explained below) you have previously
> created and create the remaining, being sure to also put references to
> them into your cache.
>
> If you have more buttons in your cache than you need, "use" the amount you
> need and "deactivate" the ones you don't. That is, if you have 20 buttons
> in the cache but only need 8, you'll deactivate the remaining 12.
>
> So "use" means to set a button's visible and includeInLayout properties to
> true. "Deactivate" means to set a button's visible and includeInLayout
> properties to false.
>
> I think an approach like this would have better performance for you. If
> you can avoid setting includeInLayout, it will be even better since all
> you will be doing is hiding/showing the buttons, but the itemRenederers
> might not look right if you also don't remove them from the layout.
>
> Peter Ent
> Flex SDK Team
> Adobe Systems
>
> On 9/3/13 9:29 AM, "Federico De Maddalena" <f....@patente.it>
> wrote:
>
> >Hi Ben
> >I'm developing a mobile project, not desktop!
> >Images in use are very small.
> >Usevirtuallayout is set on true.
> >The code is here:
> >
> > <fx:Script>
> > <![CDATA[
> > import spark.components.Button;
> > import spark.core.ContentCache;
> >
> > import events.SchedaEvent;
> >
> > static public const s_imageCache:ContentCache=new
> ContentCache();
> >
> > override public function set
> data(value:Object):void
> > {
> > super.data=value;
> > lezione.text=value.titolo;
> >
> img.source="img/lez/"+value.lezione+"g.png";
> >
> > schede.removeAllElements();
> > for(var i:int=0; i<value.schede.length;
> i++)
> > {
> > var button:Button=new Button();
> > button.label=String(i+1);
> > button.id=value.schede[i];
> > button.height=40;
> > button.width=40;
> >
> button.addEventListener(MouseEvent.CLICK, handleMouseClick);
> > schede.addElement(button);
> > }
> > }
> >
> > private function
> handleMouseClick(event:MouseEvent):void
> > {
> > sendEvent(parseInt(event.currentTarget.id
> ));
> > }
> >
> > private function sendEvent(id:int):void
> > {
> > var e:SchedaEvent=new
> SchedaEvent(SchedaEvent.LOAD_SCHEDA);
> > e.Id=id;
> >
> > this.owner.dispatchEvent(e);
> > }
> > ]]>
> > </fx:Script>
> >
> > <s:HGroup width="100%" height="100%" paddingTop="3">
> > <s:VGroup height="100%" width="20%" verticalAlign="top"
> >horizontalAlign="center">
> > <s:Image width="80%" height="80%" id="img"
> >contentLoader="{s_imageCache}"/>
> > </s:VGroup>
> > <s:VGroup height="100%" width="70%">
> > <s:Label width="100%" height="20%" id="lezione"/>
> > <s:TileGroup width="100%" height="80%"
> id="schede"/>
> > </s:VGroup>
> >
> > </s:HGroup>
> >
> >-----Messaggio originale-----
> >Da: Ben Smeets [mailto:ben@okapion.com]
> >Inviato: martedì 3 settembre 2013 15.22
> >A: users@flex.apache.org
> >Oggetto: Re: Improve spark List performance
> >
> >How many rows in the list? (i.c.w. useVirtualLayout)
> >
> >The setup you mention shouldn't be a problem I think (unless the image
> >you talk about is 200MB a pop), but depends on the implementation
> >(details). E.g., if the buttons are created every scroll, instead of
> >reused, that might be a cause.
> >
> >Any code you can share, can help (me at least) to track down the culprit.
> >
> >Not a guru here though, so maybe others will know off the top of their
> >heads :)
> >
> >Ben
> >
> >P.S. We are talking desktop app here right? Mobile is a different beast
> >all together (for me).
> >
> >
> >
> >On 3 sep. 2013, at 15:16, Federico De Maddalena
> ><f....@patente.it> wrote:
> >
> >> Hi! I'm working on a mobile project.
> >> I created a spark List, which item renderer is an extension of
> >> ItemRenderer. Each of my item renderer contains one spark Image, one
> >> Label and a number of small buttons which varies from 3 to 20.
> >> Now, scrolling the list is terribly slow. There are ways to improve
> >> scroll speed? I spent a lot of time but without success.
> >> Regards
> >> federico
> >>
> >
>
>
--
Angelo Lazzari
mobile: 0039 347 0090 452
mail: lazzari.angelo@gmail.com
----------------------------
Verificate la corrispondenza del destinatario; in caso contrario vogliate
notificare ciò al mittente e, consci della responsabilita'per l'uso
indebito, cancellare il messaggio e sue copie / Verify the correspondence
of the addressee; otherwise, notify that to the sender and, conscious of
the responsibility for the undue use, destroy the message and its copies.
----------------------------
Re: Improve spark List performance
Posted by Ben Smeets <be...@okapion.com>.
Ok, than it's a challenge for me as well :) (take that into account when measuring the value of my answer :) ).
The biggest problem i see from the get-go, is this one.
override public function set data(value:Object):void
{
...
schede.removeAllElements();
for(var i:int=0; i<value.schede.length; i++)
{
var button:Button=new Button();
button.label=String(i+1);
button.id=value.schede[i];
button.height=40;
button.width=40;
button.addEventListener(MouseEvent.CLICK, handleMouseClick);
schede.addElement(button);
}
}
This means that everytime you (re)set the data, all buttons need to be created again. I think your best bet is to move that to commitProperties and instead of creating and removing, set them hidden/not included in layout.
My 0,02
Ben
On 3 sep. 2013, at 15:29, "Federico De Maddalena" <f....@patente.it> wrote:
> Hi Ben
> I'm developing a mobile project, not desktop!
> Images in use are very small.
> Usevirtuallayout is set on true.
> The code is here:
>
> <fx:Script>
> <![CDATA[
> import spark.components.Button;
> import spark.core.ContentCache;
>
> import events.SchedaEvent;
>
> static public const s_imageCache:ContentCache=new ContentCache();
>
> override public function set data(value:Object):void
> {
> super.data=value;
> lezione.text=value.titolo;
> img.source="img/lez/"+value.lezione+"g.png";
>
> schede.removeAllElements();
> for(var i:int=0; i<value.schede.length; i++)
> {
> var button:Button=new Button();
> button.label=String(i+1);
> button.id=value.schede[i];
> button.height=40;
> button.width=40;
> button.addEventListener(MouseEvent.CLICK, handleMouseClick);
> schede.addElement(button);
> }
> }
>
> private function handleMouseClick(event:MouseEvent):void
> {
> sendEvent(parseInt(event.currentTarget.id));
> }
>
> private function sendEvent(id:int):void
> {
> var e:SchedaEvent=new SchedaEvent(SchedaEvent.LOAD_SCHEDA);
> e.Id=id;
>
> this.owner.dispatchEvent(e);
> }
> ]]>
> </fx:Script>
>
> <s:HGroup width="100%" height="100%" paddingTop="3">
> <s:VGroup height="100%" width="20%" verticalAlign="top" horizontalAlign="center">
> <s:Image width="80%" height="80%" id="img" contentLoader="{s_imageCache}"/>
> </s:VGroup>
> <s:VGroup height="100%" width="70%">
> <s:Label width="100%" height="20%" id="lezione"/>
> <s:TileGroup width="100%" height="80%" id="schede"/>
> </s:VGroup>
>
> </s:HGroup>
>
> -----Messaggio originale-----
> Da: Ben Smeets [mailto:ben@okapion.com]
> Inviato: martedì 3 settembre 2013 15.22
> A: users@flex.apache.org
> Oggetto: Re: Improve spark List performance
>
> How many rows in the list? (i.c.w. useVirtualLayout)
>
> The setup you mention shouldn't be a problem I think (unless the image you talk about is 200MB a pop), but depends on the implementation (details). E.g., if the buttons are created every scroll, instead of reused, that might be a cause.
>
> Any code you can share, can help (me at least) to track down the culprit.
>
> Not a guru here though, so maybe others will know off the top of their heads :)
>
> Ben
>
> P.S. We are talking desktop app here right? Mobile is a different beast all together (for me).
>
>
>
> On 3 sep. 2013, at 15:16, Federico De Maddalena <f....@patente.it> wrote:
>
>> Hi! I'm working on a mobile project.
>> I created a spark List, which item renderer is an extension of
>> ItemRenderer. Each of my item renderer contains one spark Image, one
>> Label and a number of small buttons which varies from 3 to 20.
>> Now, scrolling the list is terribly slow. There are ways to improve
>> scroll speed? I spent a lot of time but without success.
>> Regards
>> federico
>>
>
>
Re: Improve spark List performance
Posted by Deepak MS <me...@gmail.com>.
It's always best to use actionscript based renderers for mobile projects,
instead of mxml based.
http://tv.adobe.com/watch/adc-presents/create-itemrenderers-for-flex-mobile-projects/
That might help you.
On Tue, Sep 3, 2013 at 6:59 PM, Federico De Maddalena <
f.demaddalena@patente.it> wrote:
> Hi Ben
> I'm developing a mobile project, not desktop!
> Images in use are very small.
> Usevirtuallayout is set on true.
> The code is here:
>
> <fx:Script>
> <![CDATA[
> import spark.components.Button;
> import spark.core.ContentCache;
>
> import events.SchedaEvent;
>
> static public const s_imageCache:ContentCache=new
> ContentCache();
>
> override public function set
> data(value:Object):void
> {
> super.data=value;
> lezione.text=value.titolo;
>
> img.source="img/lez/"+value.lezione+"g.png";
>
> schede.removeAllElements();
> for(var i:int=0; i<value.schede.length;
> i++)
> {
> var button:Button=new Button();
> button.label=String(i+1);
> button.id=value.schede[i];
> button.height=40;
> button.width=40;
>
> button.addEventListener(MouseEvent.CLICK, handleMouseClick);
> schede.addElement(button);
> }
> }
>
> private function
> handleMouseClick(event:MouseEvent):void
> {
> sendEvent(parseInt(event.currentTarget.id
> ));
> }
>
> private function sendEvent(id:int):void
> {
> var e:SchedaEvent=new
> SchedaEvent(SchedaEvent.LOAD_SCHEDA);
> e.Id=id;
>
> this.owner.dispatchEvent(e);
> }
> ]]>
> </fx:Script>
>
> <s:HGroup width="100%" height="100%" paddingTop="3">
> <s:VGroup height="100%" width="20%" verticalAlign="top"
> horizontalAlign="center">
> <s:Image width="80%" height="80%" id="img"
> contentLoader="{s_imageCache}"/>
> </s:VGroup>
> <s:VGroup height="100%" width="70%">
> <s:Label width="100%" height="20%" id="lezione"/>
> <s:TileGroup width="100%" height="80%"
> id="schede"/>
> </s:VGroup>
>
> </s:HGroup>
>
> -----Messaggio originale-----
> Da: Ben Smeets [mailto:ben@okapion.com]
> Inviato: martedì 3 settembre 2013 15.22
> A: users@flex.apache.org
> Oggetto: Re: Improve spark List performance
>
> How many rows in the list? (i.c.w. useVirtualLayout)
>
> The setup you mention shouldn't be a problem I think (unless the image you
> talk about is 200MB a pop), but depends on the implementation (details).
> E.g., if the buttons are created every scroll, instead of reused, that
> might be a cause.
>
> Any code you can share, can help (me at least) to track down the culprit.
>
> Not a guru here though, so maybe others will know off the top of their
> heads :)
>
> Ben
>
> P.S. We are talking desktop app here right? Mobile is a different beast
> all together (for me).
>
>
>
> On 3 sep. 2013, at 15:16, Federico De Maddalena <f....@patente.it>
> wrote:
>
> > Hi! I'm working on a mobile project.
> > I created a spark List, which item renderer is an extension of
> > ItemRenderer. Each of my item renderer contains one spark Image, one
> > Label and a number of small buttons which varies from 3 to 20.
> > Now, scrolling the list is terribly slow. There are ways to improve
> > scroll speed? I spent a lot of time but without success.
> > Regards
> > federico
> >
>
>
RE: Improve spark List performance
Posted by Mark Line <ma...@gmail.com>.
The flex compiler compiles everything to AS3 before compiling it to
bytecode.
You can add an extra compiler option to mxml "-keep-generated-actionscript"
to see what it is doing.
Pure AS3 may be faster as you may not need all the code that the
conversation from mxml to as3 generates. Or you might code things "better",
for example binding values is very expensive and you could do that quicker
by using getter and setters etc
Just to confirm the conversion between mxml to as3 is done at compile time,
not run time so you only get the hit when developing
-----Original Message-----
From: Abdul Sattar [mailto:sattar786@gmail.com]
Sent: 04 September 2013 15:13
To: users@flex.apache.org
Subject: Re: Improve spark List performance
I am novice to Flex. Please guide me why pure action script item renders are
faster than MXML based ones. Is it true that flex compiler compiles .mxml
files to .swf or .swcs.
Regards,
--
Abdul Sattar
*+92 321 6433805*
Director IT & Operations
Powersoft
S3 Mian Building, Faiz Road,
Old Muslim Town,
Lahore - Pakistan
+92 423 6139876
*
*
Powersoft
S3 Mian Building, Faiz Road, Old Muslim Town, Lahore - Pakistan
*POWERSOFT :: NOTICE AND DISCLAIMER*
This e-mail and any attachment(s) may be confidential and may be legally
privileged. It is intended solely for the addressee. If you are not the
addressee, dissemination, copying or use of this e-mail or any of its
content is prohibited and may be unlawful. If you are not the intended
recipient please inform the sender immediately and destroy the e-mail, any
attachment(s) and any copies. All liability for virus infection and/or
external compromise of security in relation to transmissions by email is
excluded to the fullest extent permitted by law. It is your responsibility
to scan or otherwise check this email and any attachment(s). Unless
otherwise stated (i) views expressed in this message are those of the
individual sender (ii) no contract may be construed by this e-mail.
On Wed, Sep 4, 2013 at 3:06 PM, Matyas Szabo
<ma...@plumbee.co.uk>wrote:
> Id make a UIComponent, that implements the Itemrenderer interfaces,
> and then do everything inside it without in pure actionscript not
> Flex. Here is an example ive made:
>
> https://github.com/matyasf/DividedList/blob/master/src/dividedlist/DLi
> stRenderer.as I think this is the only way to go, if you want speed
> with complex renderers.
>
>
> On 4 September 2013 10:59, Harbs <ha...@gmail.com> wrote:
>
> > Wow. Sounds very painful. ;-)
> >
> > On Sep 4, 2013, at 2:16 AM, Alex Harui wrote:
> >
> > > and I've seen folks put a DataGrid in a renderer.
> >
> >
>
RE: Improve spark List performance
Posted by "Raj U. Shaikh" <Ra...@mastek.com>.
Flex compiler can compile your .mxml files to .swc as well as .swf as per your choice.
If you are developing library you will create .swc file and it can be shared and used at compile time.
While .swf file is final outcome of your project which will run on flash player.
I normally used to implement as3 classes instead of mxml.
I don't think so, is there any major diffrence at runtime performance but if you use as3 you will get finular access of apis.(such as removing listeners)
-----Original Message-----
From: Abdul Sattar [mailto:sattar786@gmail.com]
Sent: Wednesday, September 04, 2013 7:43 PM
To: users@flex.apache.org
Subject: Re: Improve spark List performance
I am novice to Flex. Please guide me why pure action script item renders
are faster than MXML based ones. Is it true that flex compiler compiles
.mxml files to .swf or .swcs.
Regards,
--
Abdul Sattar
*+92 321 6433805*
Director IT & Operations
Powersoft
S3 Mian Building, Faiz Road,
Old Muslim Town,
Lahore - Pakistan
+92 423 6139876
*
*
Powersoft
S3 Mian Building, Faiz Road, Old Muslim Town, Lahore - Pakistan
*POWERSOFT :: NOTICE AND DISCLAIMER*
This e-mail and any attachment(s) may be confidential and may be legally
privileged. It is intended solely for the addressee. If you are not the
addressee, dissemination, copying or use of this e-mail or any of its
content is prohibited and may be unlawful. If you are not the intended
recipient please inform the sender immediately and destroy the e-mail, any
attachment(s) and any copies. All liability for virus infection and/or
external compromise of security in relation to transmissions by email is
excluded to the fullest extent permitted by law. It is your responsibility
to scan or otherwise check this email and any attachment(s). Unless
otherwise stated (i) views expressed in this message are those of the
individual sender (ii) no contract may be construed by this e-mail.
On Wed, Sep 4, 2013 at 3:06 PM, Matyas Szabo <ma...@plumbee.co.uk>wrote:
> Id make a UIComponent, that implements the Itemrenderer interfaces, and
> then do everything inside it without in pure actionscript not Flex. Here is
> an example ive made:
>
> https://github.com/matyasf/DividedList/blob/master/src/dividedlist/DListRenderer.as
> I think this is the only way to go, if you want speed with complex
> renderers.
>
>
> On 4 September 2013 10:59, Harbs <ha...@gmail.com> wrote:
>
> > Wow. Sounds very painful... ;-)
> >
> > On Sep 4, 2013, at 2:16 AM, Alex Harui wrote:
> >
> > > and I've seen folks put a DataGrid in a renderer.
> >
> >
>
MASTEK LTD.
In the US, we're called MAJESCOMASTEK
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Opinions expressed in this e-mail are those of the individual and not that of Mastek Limited, unless specifically indicated to that effect. Mastek Limited does not accept any responsibility or liability for it. This e-mail and attachments (if any) transmitted with it are confidential and/or privileged and solely for the use of the intended person or entity to which it is addressed. Any review, re-transmission, dissemination or other use of or taking of any action in reliance upon this information by persons or entities other than the intended recipient is prohibited. This e-mail and its attachments have been scanned for the presence of computer viruses. It is the responsibility of the recipient to run the virus check on e-mails and attachments before opening them. If you have received this e-mail in error, kindly delete this e-mail from desktop and server.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Re: Improve spark List performance
Posted by Abdul Sattar <sa...@gmail.com>.
I am novice to Flex. Please guide me why pure action script item renders
are faster than MXML based ones. Is it true that flex compiler compiles
.mxml files to .swf or .swcs.
Regards,
--
Abdul Sattar
*+92 321 6433805*
Director IT & Operations
Powersoft
S3 Mian Building, Faiz Road,
Old Muslim Town,
Lahore - Pakistan
+92 423 6139876
*
*
Powersoft
S3 Mian Building, Faiz Road, Old Muslim Town, Lahore - Pakistan
*POWERSOFT :: NOTICE AND DISCLAIMER*
This e-mail and any attachment(s) may be confidential and may be legally
privileged. It is intended solely for the addressee. If you are not the
addressee, dissemination, copying or use of this e-mail or any of its
content is prohibited and may be unlawful. If you are not the intended
recipient please inform the sender immediately and destroy the e-mail, any
attachment(s) and any copies. All liability for virus infection and/or
external compromise of security in relation to transmissions by email is
excluded to the fullest extent permitted by law. It is your responsibility
to scan or otherwise check this email and any attachment(s). Unless
otherwise stated (i) views expressed in this message are those of the
individual sender (ii) no contract may be construed by this e-mail.
On Wed, Sep 4, 2013 at 3:06 PM, Matyas Szabo <ma...@plumbee.co.uk>wrote:
> Id make a UIComponent, that implements the Itemrenderer interfaces, and
> then do everything inside it without in pure actionscript not Flex. Here is
> an example ive made:
>
> https://github.com/matyasf/DividedList/blob/master/src/dividedlist/DListRenderer.as
> I think this is the only way to go, if you want speed with complex
> renderers.
>
>
> On 4 September 2013 10:59, Harbs <ha...@gmail.com> wrote:
>
> > Wow. Sounds very painful… ;-)
> >
> > On Sep 4, 2013, at 2:16 AM, Alex Harui wrote:
> >
> > > and I've seen folks put a DataGrid in a renderer.
> >
> >
>
Re: Improve spark List performance
Posted by Matyas Szabo <ma...@plumbee.co.uk>.
Id make a UIComponent, that implements the Itemrenderer interfaces, and
then do everything inside it without in pure actionscript not Flex. Here is
an example ive made:
https://github.com/matyasf/DividedList/blob/master/src/dividedlist/DListRenderer.as
I think this is the only way to go, if you want speed with complex
renderers.
On 4 September 2013 10:59, Harbs <ha...@gmail.com> wrote:
> Wow. Sounds very painful… ;-)
>
> On Sep 4, 2013, at 2:16 AM, Alex Harui wrote:
>
> > and I've seen folks put a DataGrid in a renderer.
>
>
Re: Improve spark List performance
Posted by Harbs <ha...@gmail.com>.
Wow. Sounds very painful… ;-)
On Sep 4, 2013, at 2:16 AM, Alex Harui wrote:
> and I've seen folks put a DataGrid in a renderer.
Re: Improve spark List performance
Posted by Alex Harui <ah...@adobe.com>.
On 9/3/13 9:19 AM, "Harbs" <ha...@gmail.com> wrote:
>Interesting that you are saying that states would be more performant than
>resizing.
Actually, I'm not saying that. I'm just pointing out different options.
Some components could have very expensive resize algorithms or issues
being shrunk to zero and restored. For example, mx:DataGrid will probably
forget its column sizes when shrunk, and I've seen folks put a DataGrid in
a renderer.
>
>Probably, the most performant method would be to calculate the placement
>of each object programmatically without resizing anything.
>(i.e. each obect has a placement position and you place the object based
>on its placement and how many objects before its placement are visible.)
>
>That way all the built-in layout calculations should not be needed.
>
>On Sep 3, 2013, at 7:01 PM, Alex Harui wrote:
>
>>
>>
>> On 9/3/13 7:15 AM, "Harbs" <ha...@gmail.com> wrote:
>>
>>> To expand on Peter's response:
>>>
>>> Like Peter said, you create all the elements you need when the item
>>> renderer is first created. If you don't want to show a button, set the
>>> visibility to false and depending on how you are laying them out, you
>>> might need to set the size to 0 as well. That way you can simulate them
>>> being added and removed and have things reflow properly. You'll have to
>>> set gap to 0 and you might need to play around with spacers as well for
>>> this to work.
>> FWIW, instead of "size to 0" others use includeInLayout and/or states to
>> manage the existence and placement of widgets. Each strategy has
>> different memory/performance trade-offs.
>>
>> -Alex
>>
>
Re: Improve spark List performance
Posted by Harbs <ha...@gmail.com>.
Interesting that you are saying that states would be more performant than resizing.
Probably, the most performant method would be to calculate the placement of each object programmatically without resizing anything.
(i.e. each obect has a placement position and you place the object based on its placement and how many objects before its placement are visible.)
That way all the built-in layout calculations should not be needed.
On Sep 3, 2013, at 7:01 PM, Alex Harui wrote:
>
>
> On 9/3/13 7:15 AM, "Harbs" <ha...@gmail.com> wrote:
>
>> To expand on Peter's response:
>>
>> Like Peter said, you create all the elements you need when the item
>> renderer is first created. If you don't want to show a button, set the
>> visibility to false and depending on how you are laying them out, you
>> might need to set the size to 0 as well. That way you can simulate them
>> being added and removed and have things reflow properly. You'll have to
>> set gap to 0 and you might need to play around with spacers as well for
>> this to work.
> FWIW, instead of "size to 0" others use includeInLayout and/or states to
> manage the existence and placement of widgets. Each strategy has
> different memory/performance trade-offs.
>
> -Alex
>
Re: Improve spark List performance
Posted by Alex Harui <ah...@adobe.com>.
On 9/3/13 7:15 AM, "Harbs" <ha...@gmail.com> wrote:
>To expand on Peter's response:
>
>Like Peter said, you create all the elements you need when the item
>renderer is first created. If you don't want to show a button, set the
>visibility to false and depending on how you are laying them out, you
>might need to set the size to 0 as well. That way you can simulate them
>being added and removed and have things reflow properly. You'll have to
>set gap to 0 and you might need to play around with spacers as well for
>this to work.
FWIW, instead of "size to 0" others use includeInLayout and/or states to
manage the existence and placement of widgets. Each strategy has
different memory/performance trade-offs.
-Alex
Re: Improve spark List performance
Posted by Harbs <ha...@gmail.com>.
To expand on Peter's response:
Like Peter said, you create all the elements you need when the item renderer is first created. If you don't want to show a button, set the visibility to false and depending on how you are laying them out, you might need to set the size to 0 as well. That way you can simulate them being added and removed and have things reflow properly. You'll have to set gap to 0 and you might need to play around with spacers as well for this to work.
HTH,
Harbs
On Sep 3, 2013, at 4:40 PM, Peter Ent wrote:
> Each time the itemRenderer's data is set, you are wiping out all of the
> button in the TileGroup and re-creating them. That's a source of your slow
> scrolling performance.
>
> As nice-and-easy as your approach is, it is better to add some more code
> complexity and re-use those buttons.
>
> Here's one example: you could, for each itemRenderer, have a cache of
> previously created buttons, which would be empty the first time the
> itemRenderer was used. If you need 10 buttons but have less than 10 (e.g.,
> 0 the first time), "use" the buttons (explained below) you have previously
> created and create the remaining, being sure to also put references to
> them into your cache.
>
> If you have more buttons in your cache than you need, "use" the amount you
> need and "deactivate" the ones you don't. That is, if you have 20 buttons
> in the cache but only need 8, you'll deactivate the remaining 12.
>
> So "use" means to set a button's visible and includeInLayout properties to
> true. "Deactivate" means to set a button's visible and includeInLayout
> properties to false.
>
> I think an approach like this would have better performance for you. If
> you can avoid setting includeInLayout, it will be even better since all
> you will be doing is hiding/showing the buttons, but the itemRenederers
> might not look right if you also don't remove them from the layout.
>
> Peter Ent
> Flex SDK Team
> Adobe Systems
>
> On 9/3/13 9:29 AM, "Federico De Maddalena" <f....@patente.it>
> wrote:
>
>> Hi Ben
>> I'm developing a mobile project, not desktop!
>> Images in use are very small.
>> Usevirtuallayout is set on true.
>> The code is here:
>>
>> <fx:Script>
>> <![CDATA[
>> import spark.components.Button;
>> import spark.core.ContentCache;
>>
>> import events.SchedaEvent;
>>
>> static public const s_imageCache:ContentCache=new ContentCache();
>>
>> override public function set data(value:Object):void
>> {
>> super.data=value;
>> lezione.text=value.titolo;
>> img.source="img/lez/"+value.lezione+"g.png";
>>
>> schede.removeAllElements();
>> for(var i:int=0; i<value.schede.length; i++)
>> {
>> var button:Button=new Button();
>> button.label=String(i+1);
>> button.id=value.schede[i];
>> button.height=40;
>> button.width=40;
>> button.addEventListener(MouseEvent.CLICK, handleMouseClick);
>> schede.addElement(button);
>> }
>> }
>>
>> private function handleMouseClick(event:MouseEvent):void
>> {
>> sendEvent(parseInt(event.currentTarget.id));
>> }
>>
>> private function sendEvent(id:int):void
>> {
>> var e:SchedaEvent=new SchedaEvent(SchedaEvent.LOAD_SCHEDA);
>> e.Id=id;
>>
>> this.owner.dispatchEvent(e);
>> }
>> ]]>
>> </fx:Script>
>>
>> <s:HGroup width="100%" height="100%" paddingTop="3">
>> <s:VGroup height="100%" width="20%" verticalAlign="top"
>> horizontalAlign="center">
>> <s:Image width="80%" height="80%" id="img"
>> contentLoader="{s_imageCache}"/>
>> </s:VGroup>
>> <s:VGroup height="100%" width="70%">
>> <s:Label width="100%" height="20%" id="lezione"/>
>> <s:TileGroup width="100%" height="80%" id="schede"/>
>> </s:VGroup>
>>
>> </s:HGroup>
>>
>> -----Messaggio originale-----
>> Da: Ben Smeets [mailto:ben@okapion.com]
>> Inviato: martedì 3 settembre 2013 15.22
>> A: users@flex.apache.org
>> Oggetto: Re: Improve spark List performance
>>
>> How many rows in the list? (i.c.w. useVirtualLayout)
>>
>> The setup you mention shouldn't be a problem I think (unless the image
>> you talk about is 200MB a pop), but depends on the implementation
>> (details). E.g., if the buttons are created every scroll, instead of
>> reused, that might be a cause.
>>
>> Any code you can share, can help (me at least) to track down the culprit.
>>
>> Not a guru here though, so maybe others will know off the top of their
>> heads :)
>>
>> Ben
>>
>> P.S. We are talking desktop app here right? Mobile is a different beast
>> all together (for me).
>>
>>
>>
>> On 3 sep. 2013, at 15:16, Federico De Maddalena
>> <f....@patente.it> wrote:
>>
>>> Hi! I'm working on a mobile project.
>>> I created a spark List, which item renderer is an extension of
>>> ItemRenderer. Each of my item renderer contains one spark Image, one
>>> Label and a number of small buttons which varies from 3 to 20.
>>> Now, scrolling the list is terribly slow. There are ways to improve
>>> scroll speed? I spent a lot of time but without success.
>>> Regards
>>> federico
>>>
>>
>
Re: R: Improve spark List performance
Posted by Peter Ent <pe...@adobe.com>.
Each time the itemRenderer's data is set, you are wiping out all of the
button in the TileGroup and re-creating them. That's a source of your slow
scrolling performance.
As nice-and-easy as your approach is, it is better to add some more code
complexity and re-use those buttons.
Here's one example: you could, for each itemRenderer, have a cache of
previously created buttons, which would be empty the first time the
itemRenderer was used. If you need 10 buttons but have less than 10 (e.g.,
0 the first time), "use" the buttons (explained below) you have previously
created and create the remaining, being sure to also put references to
them into your cache.
If you have more buttons in your cache than you need, "use" the amount you
need and "deactivate" the ones you don't. That is, if you have 20 buttons
in the cache but only need 8, you'll deactivate the remaining 12.
So "use" means to set a button's visible and includeInLayout properties to
true. "Deactivate" means to set a button's visible and includeInLayout
properties to false.
I think an approach like this would have better performance for you. If
you can avoid setting includeInLayout, it will be even better since all
you will be doing is hiding/showing the buttons, but the itemRenederers
might not look right if you also don't remove them from the layout.
Peter Ent
Flex SDK Team
Adobe Systems
On 9/3/13 9:29 AM, "Federico De Maddalena" <f....@patente.it>
wrote:
>Hi Ben
>I'm developing a mobile project, not desktop!
>Images in use are very small.
>Usevirtuallayout is set on true.
>The code is here:
>
> <fx:Script>
> <![CDATA[
> import spark.components.Button;
> import spark.core.ContentCache;
>
> import events.SchedaEvent;
>
> static public const s_imageCache:ContentCache=new ContentCache();
>
> override public function set data(value:Object):void
> {
> super.data=value;
> lezione.text=value.titolo;
> img.source="img/lez/"+value.lezione+"g.png";
>
> schede.removeAllElements();
> for(var i:int=0; i<value.schede.length; i++)
> {
> var button:Button=new Button();
> button.label=String(i+1);
> button.id=value.schede[i];
> button.height=40;
> button.width=40;
> button.addEventListener(MouseEvent.CLICK, handleMouseClick);
> schede.addElement(button);
> }
> }
>
> private function handleMouseClick(event:MouseEvent):void
> {
> sendEvent(parseInt(event.currentTarget.id));
> }
>
> private function sendEvent(id:int):void
> {
> var e:SchedaEvent=new SchedaEvent(SchedaEvent.LOAD_SCHEDA);
> e.Id=id;
>
> this.owner.dispatchEvent(e);
> }
> ]]>
> </fx:Script>
>
> <s:HGroup width="100%" height="100%" paddingTop="3">
> <s:VGroup height="100%" width="20%" verticalAlign="top"
>horizontalAlign="center">
> <s:Image width="80%" height="80%" id="img"
>contentLoader="{s_imageCache}"/>
> </s:VGroup>
> <s:VGroup height="100%" width="70%">
> <s:Label width="100%" height="20%" id="lezione"/>
> <s:TileGroup width="100%" height="80%" id="schede"/>
> </s:VGroup>
>
> </s:HGroup>
>
>-----Messaggio originale-----
>Da: Ben Smeets [mailto:ben@okapion.com]
>Inviato: martedì 3 settembre 2013 15.22
>A: users@flex.apache.org
>Oggetto: Re: Improve spark List performance
>
>How many rows in the list? (i.c.w. useVirtualLayout)
>
>The setup you mention shouldn't be a problem I think (unless the image
>you talk about is 200MB a pop), but depends on the implementation
>(details). E.g., if the buttons are created every scroll, instead of
>reused, that might be a cause.
>
>Any code you can share, can help (me at least) to track down the culprit.
>
>Not a guru here though, so maybe others will know off the top of their
>heads :)
>
>Ben
>
>P.S. We are talking desktop app here right? Mobile is a different beast
>all together (for me).
>
>
>
>On 3 sep. 2013, at 15:16, Federico De Maddalena
><f....@patente.it> wrote:
>
>> Hi! I'm working on a mobile project.
>> I created a spark List, which item renderer is an extension of
>> ItemRenderer. Each of my item renderer contains one spark Image, one
>> Label and a number of small buttons which varies from 3 to 20.
>> Now, scrolling the list is terribly slow. There are ways to improve
>> scroll speed? I spent a lot of time but without success.
>> Regards
>> federico
>>
>
R: Improve spark List performance
Posted by Federico De Maddalena <f....@patente.it>.
Hi Ben
I'm developing a mobile project, not desktop!
Images in use are very small.
Usevirtuallayout is set on true.
The code is here:
<fx:Script>
<![CDATA[
import spark.components.Button;
import spark.core.ContentCache;
import events.SchedaEvent;
static public const s_imageCache:ContentCache=new ContentCache();
override public function set data(value:Object):void
{
super.data=value;
lezione.text=value.titolo;
img.source="img/lez/"+value.lezione+"g.png";
schede.removeAllElements();
for(var i:int=0; i<value.schede.length; i++)
{
var button:Button=new Button();
button.label=String(i+1);
button.id=value.schede[i];
button.height=40;
button.width=40;
button.addEventListener(MouseEvent.CLICK, handleMouseClick);
schede.addElement(button);
}
}
private function handleMouseClick(event:MouseEvent):void
{
sendEvent(parseInt(event.currentTarget.id));
}
private function sendEvent(id:int):void
{
var e:SchedaEvent=new SchedaEvent(SchedaEvent.LOAD_SCHEDA);
e.Id=id;
this.owner.dispatchEvent(e);
}
]]>
</fx:Script>
<s:HGroup width="100%" height="100%" paddingTop="3">
<s:VGroup height="100%" width="20%" verticalAlign="top" horizontalAlign="center">
<s:Image width="80%" height="80%" id="img" contentLoader="{s_imageCache}"/>
</s:VGroup>
<s:VGroup height="100%" width="70%">
<s:Label width="100%" height="20%" id="lezione"/>
<s:TileGroup width="100%" height="80%" id="schede"/>
</s:VGroup>
</s:HGroup>
-----Messaggio originale-----
Da: Ben Smeets [mailto:ben@okapion.com]
Inviato: martedì 3 settembre 2013 15.22
A: users@flex.apache.org
Oggetto: Re: Improve spark List performance
How many rows in the list? (i.c.w. useVirtualLayout)
The setup you mention shouldn't be a problem I think (unless the image you talk about is 200MB a pop), but depends on the implementation (details). E.g., if the buttons are created every scroll, instead of reused, that might be a cause.
Any code you can share, can help (me at least) to track down the culprit.
Not a guru here though, so maybe others will know off the top of their heads :)
Ben
P.S. We are talking desktop app here right? Mobile is a different beast all together (for me).
On 3 sep. 2013, at 15:16, Federico De Maddalena <f....@patente.it> wrote:
> Hi! I'm working on a mobile project.
> I created a spark List, which item renderer is an extension of
> ItemRenderer. Each of my item renderer contains one spark Image, one
> Label and a number of small buttons which varies from 3 to 20.
> Now, scrolling the list is terribly slow. There are ways to improve
> scroll speed? I spent a lot of time but without success.
> Regards
> federico
>
Re: Improve spark List performance
Posted by Ben Smeets <be...@okapion.com>.
How many rows in the list? (i.c.w. useVirtualLayout)
The setup you mention shouldn't be a problem I think (unless the image you talk about is 200MB a pop), but depends on the implementation (details). E.g., if the buttons are created every scroll, instead of reused, that might be a cause.
Any code you can share, can help (me at least) to track down the culprit.
Not a guru here though, so maybe others will know off the top of their heads :)
Ben
P.S. We are talking desktop app here right? Mobile is a different beast all together (for me).
On 3 sep. 2013, at 15:16, Federico De Maddalena <f....@patente.it> wrote:
> Hi! I'm working on a mobile project.
> I created a spark List, which item renderer is an extension of
> ItemRenderer. Each of my item renderer contains one spark Image, one
> Label and a number of small buttons which varies from 3 to 20.
> Now, scrolling the list is terribly slow. There are ways to improve
> scroll speed? I spent a lot of time but without success.
> Regards
> federico
>