You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by OmPrakash Muppirala <bi...@gmail.com> on 2013/07/01 19:15:45 UTC
Flex mobile performance
On Mon, Jul 1, 2013 at 10:02 AM, Jonathan Campos <jo...@gmail.com>wrote:
> On Thu, Jun 27, 2013 at 4:43 PM, OmPrakash Muppirala
> <bi...@gmail.com>wrote:
>
> > So, when folks are saying that Flex does not perform well on mobile, can
> > you please post some examples, etc so we can try to figure out what the
> > real problems? As opposed to sweeping statements like Flex mobile sucks,
> > etc.
> >
>
> Just as a quick note. I've spent quite a bit of time over the last 2 years
> talking to teams that have had issues with their Flex Mobile apps and they
> all blame Flex for some really bad framerates and they "know their code is
> correct".
>
> The biggest issue I've found is item renderers. Wouldn't you know when I
> switch out their item renderers things seem to move very smoothly and
> almost all their complaints go away. Yes there is still that half-second
> lag for the new View to come in but other than that all the performance
> issues are gone.
>
> J
>
I have similar experiences as well. In fact, badly designed itemrenderers
cause lags even in non-Flex iOS and Android apps. I have seen this in
numerous apps.
Is there something we can do about this in terms of coding/compiler
warnings etc. ? Or perhaps have a Flex PMD rule for this?
At the very least, we should have documentation on our docbase that talks
about this issue. Is that something you could help with?
Thanks,
Om
Re: Flex mobile performance
Posted by Madhu Dutta <ia...@gmail.com>.
Another thing is,in flex there is no such thing to export vector pdf from
exact display with respective matrix and position..
On Jul 1, 2013 10:46 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
> On Mon, Jul 1, 2013 at 10:02 AM, Jonathan Campos <jonbcampos@gmail.com
> >wrote:
>
> > On Thu, Jun 27, 2013 at 4:43 PM, OmPrakash Muppirala
> > <bi...@gmail.com>wrote:
> >
> > > So, when folks are saying that Flex does not perform well on mobile,
> can
> > > you please post some examples, etc so we can try to figure out what the
> > > real problems? As opposed to sweeping statements like Flex mobile
> sucks,
> > > etc.
> > >
> >
> > Just as a quick note. I've spent quite a bit of time over the last 2
> years
> > talking to teams that have had issues with their Flex Mobile apps and
> they
> > all blame Flex for some really bad framerates and they "know their code
> is
> > correct".
> >
> > The biggest issue I've found is item renderers. Wouldn't you know when I
> > switch out their item renderers things seem to move very smoothly and
> > almost all their complaints go away. Yes there is still that half-second
> > lag for the new View to come in but other than that all the performance
> > issues are gone.
> >
> > J
> >
>
> I have similar experiences as well. In fact, badly designed itemrenderers
> cause lags even in non-Flex iOS and Android apps. I have seen this in
> numerous apps.
>
> Is there something we can do about this in terms of coding/compiler
> warnings etc. ? Or perhaps have a Flex PMD rule for this?
>
> At the very least, we should have documentation on our docbase that talks
> about this issue. Is that something you could help with?
>
> Thanks,
> Om
>
RE: Flex mobile performance
Posted by Tianzhen Lin <ta...@usa.net>.
Hmm,
No matter what code, JavaScript or ActionScript, they will run slower on a
slower processor, and mobile is slower because the processors are slow. I
cannot tell you how much I dislike PhoneGap because the UI is much less
responsible.
As for graphs, I am not sure if you are referring to Flex charts or any
other graph library. As far as I have done, I helped create an app
streaming 100k's of samples to be plotted on a chart in real time, I had a
smooth user experience. It requires some optimization on data bound the
chart (not the chart component itself). This is the same kind of discipline
no matter what technology the app is going to do. In my case, the
optimization is done through avoiding to plot more dots than needed, and
also implement a collection using vector as the underlying value holder
instead of ArrayCollection. It requires a few days of tuning, but the end
result is rewarding.
As for your case of loading graph, I used to have tricks to preload other
graphs once the first one is rendered, that would make subsequent switches
go more smoothly.
Tangent
-----Original Message-----
From: manish sharma [mailto:minisharma17@gmail.com]
Sent: Tuesday, July 02, 2013 10:28 AM
To: dev@flex.apache.org; jeffry@dot-com-it.com
Cc: OmPrakash Muppirala
Subject: Re: Flex mobile performance
I have created one app for the mobile banking they want to see the graphs
and in the app I have used 6-7 types of graphs. It will take time to load
the graphs and also taking time in switching one graph to another if I want
to go back to previous graph it will load again.
I think the main problem with the same in holding the instance of the
previous screen.
The performance is also the another issue.
Thanks & Regards* **?*
*MANISH SHARMA*
PHONE: +91 783 899 6886
e-mail: sharma.manish,gwl@gmail.com /
minisharma17@gmail.com<sh...@gmail.com>
Join my Network:*http://in.linkedin.com/pub/manish-sharma/23/513/b74*
*P *Please consider the environment and do not print this email unless
absolutely necessary. Please encourage environmental awareness. SAVE
TREES-SAVE WORLD
On Tue, Jul 2, 2013 at 1:35 AM, Jeffry Houser <je...@dot-com-it.com> wrote:
> On 7/1/2013 1:15 PM, OmPrakash Muppirala wrote:
>
>> On Mon, Jul 1, 2013 at 10:02 AM, Jonathan Campos
>> <jonbcampos@gmail.com
>> >wrote:
>>
>> On Thu, Jun 27, 2013 at 4:43 PM, OmPrakash Muppirala
>>> <bi...@gmail.com>wrote:
>>>
>>> So, when folks are saying that Flex does not perform well on
>>> mobile, can
>>>> you please post some examples, etc so we can try to figure out what
>>>> the real problems? As opposed to sweeping statements like Flex
>>>> mobile sucks, etc.
>>>>
>>>> Just as a quick note. I've spent quite a bit of time over the last
>>>> 2
>>> years
>>> talking to teams that have had issues with their Flex Mobile apps
>>> and they all blame Flex for some really bad framerates and they
>>> "know their code is correct".
>>>
>>> The biggest issue I've found is item renderers. Wouldn't you know
>>> when I switch out their item renderers things seem to move very
>>> smoothly and almost all their complaints go away. Yes there is still
>>> that half-second lag for the new View to come in but other than that
>>> all the performance issues are gone.
>>>
>>> J
>>>
>>> I have similar experiences as well. In fact, badly designed
>> itemrenderers
>> cause lags even in non-Flex iOS and Android apps. I have seen this
>> in numerous apps.
>>
>
> Even before mobile; the bulk of customer support complaints about the
> Flextras AutoCompleteComboBox were fixed when I showed customers how
> to re-write their itemRenderers not to use binding. All of a sudden
> the memory leaks--which everyone insisted came from my code--went away.
>
>
>
> --
> Jeffry Houser
> Technical Entrepreneur
> http://www.jeffryhouser.com
> 203-379-0773
>
>
Re: Flex mobile performance
Posted by manish sharma <mi...@gmail.com>.
I have created one app for the mobile banking they want to see the graphs
and in the app I have used 6-7 types of graphs. It will take time to load
the graphs and also taking time in switching one graph to another if I want
to go back to previous graph it will load again.
I think the main problem with the same in holding the instance of the
previous screen.
The performance is also the another issue.
Thanks & Regards* **?*
*MANISH SHARMA*
PHONE: +91 783 899 6886
e-mail: sharma.manish,gwl@gmail.com /
minisharma17@gmail.com<sh...@gmail.com>
Join my Network:*http://in.linkedin.com/pub/manish-sharma/23/513/b74*
*P *Please consider the environment and do not print this email unless
absolutely necessary. Please encourage environmental awareness. SAVE
TREES-SAVE WORLD
On Tue, Jul 2, 2013 at 1:35 AM, Jeffry Houser <je...@dot-com-it.com> wrote:
> On 7/1/2013 1:15 PM, OmPrakash Muppirala wrote:
>
>> On Mon, Jul 1, 2013 at 10:02 AM, Jonathan Campos <jonbcampos@gmail.com
>> >wrote:
>>
>> On Thu, Jun 27, 2013 at 4:43 PM, OmPrakash Muppirala
>>> <bi...@gmail.com>wrote:
>>>
>>> So, when folks are saying that Flex does not perform well on mobile, can
>>>> you please post some examples, etc so we can try to figure out what the
>>>> real problems? As opposed to sweeping statements like Flex mobile
>>>> sucks,
>>>> etc.
>>>>
>>>> Just as a quick note. I've spent quite a bit of time over the last 2
>>> years
>>> talking to teams that have had issues with their Flex Mobile apps and
>>> they
>>> all blame Flex for some really bad framerates and they "know their code
>>> is
>>> correct".
>>>
>>> The biggest issue I've found is item renderers. Wouldn't you know when I
>>> switch out their item renderers things seem to move very smoothly and
>>> almost all their complaints go away. Yes there is still that half-second
>>> lag for the new View to come in but other than that all the performance
>>> issues are gone.
>>>
>>> J
>>>
>>> I have similar experiences as well. In fact, badly designed
>> itemrenderers
>> cause lags even in non-Flex iOS and Android apps. I have seen this in
>> numerous apps.
>>
>
> Even before mobile; the bulk of customer support complaints about the
> Flextras AutoCompleteComboBox were fixed when I showed customers how to
> re-write their itemRenderers not to use binding. All of a sudden the
> memory leaks--which everyone insisted came from my code--went away.
>
>
>
> --
> Jeffry Houser
> Technical Entrepreneur
> http://www.jeffryhouser.com
> 203-379-0773
>
>
Re: Flex mobile performance
Posted by Jeffry Houser <je...@dot-com-it.com>.
On 7/1/2013 1:15 PM, OmPrakash Muppirala wrote:
> On Mon, Jul 1, 2013 at 10:02 AM, Jonathan Campos <jo...@gmail.com>wrote:
>
>> On Thu, Jun 27, 2013 at 4:43 PM, OmPrakash Muppirala
>> <bi...@gmail.com>wrote:
>>
>>> So, when folks are saying that Flex does not perform well on mobile, can
>>> you please post some examples, etc so we can try to figure out what the
>>> real problems? As opposed to sweeping statements like Flex mobile sucks,
>>> etc.
>>>
>> Just as a quick note. I've spent quite a bit of time over the last 2 years
>> talking to teams that have had issues with their Flex Mobile apps and they
>> all blame Flex for some really bad framerates and they "know their code is
>> correct".
>>
>> The biggest issue I've found is item renderers. Wouldn't you know when I
>> switch out their item renderers things seem to move very smoothly and
>> almost all their complaints go away. Yes there is still that half-second
>> lag for the new View to come in but other than that all the performance
>> issues are gone.
>>
>> J
>>
> I have similar experiences as well. In fact, badly designed itemrenderers
> cause lags even in non-Flex iOS and Android apps. I have seen this in
> numerous apps.
Even before mobile; the bulk of customer support complaints about the
Flextras AutoCompleteComboBox were fixed when I showed customers how to
re-write their itemRenderers not to use binding. All of a sudden the
memory leaks--which everyone insisted came from my code--went away.
--
Jeffry Houser
Technical Entrepreneur
http://www.jeffryhouser.com
203-379-0773
Re: Flex mobile performance - Question on itemRenderers
Posted by Alex Harui <ah...@adobe.com>.
On 7/22/13 6:16 AM, "Christian Kiefer" <ch...@goal-games.de>
wrote:
>Turning of cacheAsBitmap
>-> Scrolling got much slower (in the renderer there is nothing
>changing/animating)
>Am I right when I think all the fxg files are cached and using bitmap
>images won't have any advantage (at least when cachingAsBitmap)?
Well, it isn't 'caching' per-se. The fxg files should be converted to SWF
DefineSprites just like if you drew them in Flash Pro. But because of the
excess Groups, there are a bunch more DefineSprites than you would
probably get if you did draw them in Flash Pro.
Simple test: comment out all fxg images or maybe just all but one per
renderer and see how performance changes.
Bitmaps could be faster assuming they are embedded or cached. There is
always a trade-off between the size of the bitmaps and how fast the
renderer can draw them (which I believe is affected by whether there is
any scaling of the bitmap), and how many edges there are in the vector
description of the image. For simple images, vector is smaller and faster
and can scale cleanly, but for complex images, the number of vectors can
bog down the renderer. Basically it has to loop through every piece of
the paths, determine the exact pixel locations of the splines, then run
the scan-line edge detection on that database for every vertical row of
pixels. A bitmap image only has four edges (assuming no transparency),
but if you are scaling it, it has to run image processing algorithms on
the pixels in the image.
-Alex
Re: Flex mobile performance - Question on itemRenderers
Posted by Christian Kiefer <ch...@goal-games.de>.
Turning of cacheAsBitmap
-> Scrolling got much slower (in the renderer there is nothing
changing/animating)
Am I right when I think all the fxg files are cached and using bitmap
images won't have any advantage (at least when cachingAsBitmap)?
Turning of usage of virtual layout
-> Can't see any effect
Removing Empty Groups
-> FEELS a little bit better
Actually I had no time to performance-test it (use intellij idea but
don't like the intellij profiler... and Adobe Scout ... and have to
switch to FlashBuilder)... but will post if I'll find out something that
helps...
Thanks for all the tips,
Christian
PS: If you are interested in the rederers current performance - I am
talking about that:
http://beta.goal-games.de/ -> (beta just working on Android)
... register, choose a team name, close all popus, swipe to the right,
click on the "zum Kader" - Button on the "Mannschaft"- Screen and start
scrolling)
Am 22.07.2013 06:01, schrieb jude:
>>> Turning of cacheAsBitmap can help? Really?
>> CacheAsBitmap has some interesting performance implications. Sometimes it
>> is better to use it and sometimes, it is better to not use it.
>>
>>
> I suggested this to test if something is changing the display list in a way
> that cacheAsBitmap has to repeatedly recache the bitmap then it will be
> much slower. I think there is a feature in Scout to see if this is
> happening. You can also strategically use cacheAsBitmap when you are sure
> the content will stay the same.
> http://www.republicofcode.com/tutorials/flash/as3cacheasbitmap/
>
>
>
>>> And an mxml item renderer can
>>> improve performance?
>> MXML rarely outperforms good AS code.
>>
>>
> Right. I should have mentioned that. I suggested this so you could see if
> there is something in your code that is causing the performance loss. If
> you create the same renderer in MXML you can use that as a baseline to see
> how much performance you are gaining with your renderer.
>
> When I mentioned FXG optimizations I thought that was an option in Flash
> Builder but it's actually an option in Flash Catalyst. When you import an
> FXG file it converts it into MXMLG converting an FXG Group into a heavier
> Spark Group container. Choosing Optimize Vector Graphics just converts
> MXMLG back into an FXG file. So in this case you're already using FXG.
>
Re: Flex mobile performance - Question on itemRenderers
Posted by jude <fl...@gmail.com>.
> >Turning of cacheAsBitmap can help? Really?
> CacheAsBitmap has some interesting performance implications. Sometimes it
> is better to use it and sometimes, it is better to not use it.
>
>
I suggested this to test if something is changing the display list in a way
that cacheAsBitmap has to repeatedly recache the bitmap then it will be
much slower. I think there is a feature in Scout to see if this is
happening. You can also strategically use cacheAsBitmap when you are sure
the content will stay the same.
http://www.republicofcode.com/tutorials/flash/as3cacheasbitmap/
> >And an mxml item renderer can
> >improve performance?
> MXML rarely outperforms good AS code.
>
>
Right. I should have mentioned that. I suggested this so you could see if
there is something in your code that is causing the performance loss. If
you create the same renderer in MXML you can use that as a baseline to see
how much performance you are gaining with your renderer.
When I mentioned FXG optimizations I thought that was an option in Flash
Builder but it's actually an option in Flash Catalyst. When you import an
FXG file it converts it into MXMLG converting an FXG Group into a heavier
Spark Group container. Choosing Optimize Vector Graphics just converts
MXMLG back into an FXG file. So in this case you're already using FXG.
Re: Flex mobile performance - Question on itemRenderers
Posted by Alex Harui <ah...@adobe.com>.
On 7/19/13 1:28 AM, "Christian Kiefer" <ch...@goal-games.de>
wrote:
>I will see if the profiler tells me something... and if
>fxg-optimisations will help... as they have unnecessary levels of
>neseted groups inside.
You can dig into the renderer in the debugger and see how many display
objects are inside of the fxg images. I use the FB expressions window to
evaluate expressions like "this.numChildren", "this.getChildAt(0)",
"this.getChildAt(0).numChildren", etc.
>
>And I will test if turning off virtualisation will help (as it is a
>list with max. 24 renderers)... Thanks...
If the max is 24, turning off virtualization has a very good chance of
solving your issue.
>
>Turning of cacheAsBitmap can help? Really?
CacheAsBitmap has some interesting performance implications. Sometimes it
is better to use it and sometimes, it is better to not use it.
>And an mxml item renderer can
>improve performance?
MXML rarely outperforms good AS code.
Re: Flex mobile performance - Question on itemRenderers
Posted by Christian Kiefer <ch...@goal-games.de>.
I will see if the profiler tells me something... and if
fxg-optimisations will help... as they have unnecessary levels of
neseted groups inside.
And I will test if turning off virtualisation will help (as it is a
list with max. 24 renderers)... Thanks...
Turning of cacheAsBitmap can help? Really? And an mxml item renderer can
improve performance?
<Graphic version="2.0" viewHeight="37" viewWidth="31"
ATE:version="1.0.0" flm:version="1.0.0" d:id="1" d:using=""
xmlns="http://ns.adobe.com/fxg/2008"
xmlns:ATE="http://ns.adobe.com/ate/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
xmlns:flm="http://ns.adobe.com/flame/2008">
<Library/>
<Group blendMode="normal" d:type="layer" d:userLabel="Layer 1">
<Group flm:isDrawingObject="false">
<Path data="M31 11.9Q28.9 12.2 26.1 13.85 23.25 15.5 22.2 17.5
21.15 19.45 21.35 21.05 21.55 22.55 22.35 23.4 23.15 24.25 23.3 26.35
23.45 28.4 19.6 31.75 15.8 35.05 13.5 37L3.05 37Q0 37 0 34L0 30.7Q4.5
27.2 8.75 23.2 13 19.15 13.6 17.85 14.2 16.5 13.3
14.8 10.1 11.25 13.3 7.05 16.5 2.9 22.25 0.15 23.45 0.1 24.35
0.05L24.7 0 27.9 0Q30.9 0 30.9 3.1Z">
<fill>
<SolidColor color="#990000"/>
</fill>
</Path>
<Path data="M0 30.7 0 3.35Q0 0.25 3.05 0.25 6.65 0.15 13.9 0.15
18.6 0.2 21.7 0.15L21.8 0.15Q21.9 0.15 22 0.15 22.05 0.15 22.15 0.15
22.2 0.1 22.25 0.15 16.5 2.9 13.3 7.05 10.1 11.25 13.3 14.8 14.2 16.5
13.6 17.85 13 19.15 8.75 23.2 4.5 27.2 0 30.7ZM1.45
6.15Q1.4 8.3 1.5 9.2 1.6 10.1 2.75 10 3.85 9.9 4.5 9.4 5.2 8.95 5.9
8.25 6.5 7.5 8.05 6.1 12.85 1.65 13 1.35 10.65 1.35 6.95 1.45 3.25 1.5
2.7 1.9 2.15 2.25 1.85 3.15 1.5 4 1.45 6.15Z">
<fill>
<SolidColor color="#FF0000"/>
</fill>
</Path>
<Path data="M31 11.9 30.9 34Q30.9 37 27.9 37L13.5 37Q15.8 35.05
19.6 31.75 23.45 28.4 23.3 26.35 23.15 24.25 22.35 23.4 21.55 22.55
21.35 21.05 21.15 19.45 22.2 17.5 23.25 15.5 26.1 13.85 28.9 12.2 31 11.9Z">
<fill>
<SolidColor color="#790000"/>
</fill>
</Path>
<Path data="M1.45 6.15Q1.5 4 1.85 3.15 2.15 2.25 2.7 1.9 3.25 1.5
6.95 1.45 10.65 1.35 13 1.35 12.85 1.65 8.05 6.1 6.5 7.5 5.9 8.25 5.2
8.95 4.5 9.4 3.85 9.9 2.75 10 1.6 10.1 1.5 9.2 1.4 8.3 1.45 6.15Z">
<fill>
<SolidColor color="#FF8080"/>
</fill>
</Path>
</Group>
</Group>
<Private>
<xfl:PrivateElement d:ref="#1"
xmlns:xfl="http://ns.adobe.com/xfl/2008/">
<xfl:publishSettings xfl:source=""/>
<xfl:mobileSettings xfl:source=""/>
<xfl:as3ExportItems/>
</xfl:PrivateElement>
</Private>
</Graphic>
Am 18.07.2013 21:21, schrieb Alex Harui:
> The profiler can help measure performance. Besides creation and
> validation, another issue may be rendering. Look for [render] near the
> top of the performance profile.
>
> I recently discovered that fxg can be very non-optimal. There can be lots
> of empty groups or unnecessary levels of groups and that can make fxg
> images very costly. The authoring tools do that to preserve layers needed
> at authoring but there can be a cost at runtime. One quick test: comment
> out the FXG images and/or replace them with pngs and see if scrolling is
> better.
>
> On 7/18/13 11:25 AM, "flexcapacitor@gmail.com" <fl...@gmail.com>
> wrote:
>
>> I would try creating a MXML based renderer, turn off virtualization on the
>> list and then compare the results. Virtualization allows reusing a
>> renderer
>> but if you are seeing issues during scrolling then either creation or
>> validation is too heavy. When you turn off virtualization the row is only
>> created once. The tradeoff is you use more memory.
>>
>> You might also try to optimize the FXG (either manually or with the
>> compiler).
>>
>> Also, things like this,
>> BitmapImage(iconDisplay).smooth = true;
>>
>> could be costly. Also, try disabling cacheAsBitmap.
>>
>> But you won't know unless you measure the performance. I had some code for
>> testing an item renderer. I'll see if I can dig it up.
>>
>> On Wed, Jul 17, 2013 at 4:29 AM, Christian Kiefer <
>> christian.kiefer@goal-games.de> wrote:
>>
>>> About the itemRenderer-Performance-**Issues...
>>>
>>> I've written an itemRenderer based no IconItemRenderer with some texts
>>> and
>>> a lot of (fxg) images... and the scrolling is horrible...
>>>
>>> Maybe someone can tell me what's wrong with my itemRenderer as all my
>>> other renderers performe quite good...
>>>
>>> Code is something like that (replaced some things with pseudo code...
>>> for
>>> better understanding)...
>>>
>>> /**
>>> * Created with IntelliJ IDEA.
>>> * User: Christian
>>> * Date: 11.03.13
>>> * Time: 14:09
>>> * To change this template use File | Settings | File Templates.
>>> */
>>> package de.somePackage {
>>> import flash.display.GradientType;
>>> import flash.events.Event;
>>> import flash.events.MouseEvent;
>>> import flash.geom.Matrix;
>>>
>>> import spark.components.**IconItemRenderer;
>>> import spark.components.**supportClasses.**StyleableTextField;
>>> import spark.core.**SpriteVisualElement;
>>> import spark.primitives.BitmapImage;
>>>
>>> public class MyRenderer extends IconItemRenderer{
>>>
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>> // CONSTANTS
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>>
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>> // FIELDS
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>>
>>> private var matrix:Matrix;
>>>
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>> // USER INTERFACE COMPONENTS
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>>
>>>
>>> private var textDisplay1:**StyleableTextField;
>>> private var textDisplay2:**StyleableTextField;
>>> private var textDisplay3:**StyleableTextField;
>>>
>>> private var fxgImg1:SpriteVisualElement;
>>> private var fxgImg2:SpriteVisualElement;
>>> private var fxgImg3:SpriteVisualElement;
>>>
>>> private var fxgImg4:SpriteVisualElement;
>>> private var fxgImg5:SpriteVisualElement;
>>> private var fxgImg6:SpriteVisualElement;
>>>
>>>
>>> private var dataChanged:Boolean;
>>>
>>> override public function set data(value:Object):void
>>> {
>>> super.data = value;
>>> dataChanged = true;
>>> invalidateProperties();
>>> invalidateDisplayList()
>>> }
>>>
>>>
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>> // CONSTRUCTOR
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>>
>>> public function MyRenderer ()
>>> {
>>> super();
>>> //cacheAsBitmap = true; -> Already setted in
>>> LabelItemRenderer
>>> height = 55;
>>> iconWidth = 51;
>>> iconHeight = 51;
>>>
>>> mouseChildren = false;
>>> addEventListener(MouseEvent.**CLICK, handleMouseClick);
>>>
>>> iconScaleMode = "letterbox";
>>>
>>> iconFunction = assignBitmap;
>>> messageFunction = assignMessage;
>>> labelFunction = assignLabel;
>>> }
>>>
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>> // ITEM RENDERER OVERRIDES
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>>
>>> override protected function createLabelDisplay():void
>>> {
>>> labelDisplay = StyleableTextField(**createInFontContext(**
>>> StyleableTextField));
>>> labelDisplay.styleName = this;
>>> labelDisplay.editable = false;
>>> labelDisplay.selectable = false;
>>> labelDisplay.multiline = false;
>>> labelDisplay.wordWrap = false;
>>> labelDisplay.styleDeclaration = styleManager.**
>>> getStyleDeclaration(".**textField_S3_C1");
>>> labelDisplay.commitStyles();
>>> addChild(labelDisplay);
>>> }
>>>
>>> override protected function createMessageDisplay():void
>>> {
>>> messageDisplay = StyleableTextField(**createInFontContext(**
>>> StyleableTextField));
>>> messageDisplay.styleName = this;
>>> messageDisplay.editable = false;
>>> messageDisplay.selectable = false;
>>> messageDisplay.multiline = false;
>>> messageDisplay.wordWrap = false;
>>> messageDisplay.**styleDeclaration = styleManager.**
>>> getStyleDeclaration(".**textField_S3_C1");
>>> messageDisplay.commitStyles();
>>> messageDisplay.setStyle("**textAlign", "center");
>>> addChild(messageDisplay);
>>> }
>>>
>>> protected function createTextDisplay1():void
>>> {
>>> textDisplay1 = StyleableTextField(**createInFontContext(**
>>> StyleableTextField));
>>> textDisplay1.styleName = this;
>>> textDisplay1.editable = false;
>>> textDisplay1.selectable = false;
>>> textDisplay1.multiline = false;
>>> textDisplay1.wordWrap = false;
>>> textDisplay1.styleDeclaration = styleManager.**
>>> getStyleDeclaration(".**textField_S3_C1");
>>> textDisplay1.commitStyles();
>>> textDisplay1.setStyle("**textAlign", "center");
>>> addChild(textDisplay1);
>>> }
>>>
>>> protected function createTextDisplay2():void
>>> {
>>> textDisplay2 = StyleableTextField(**createInFontContext(**
>>> StyleableTextField));
>>> textDisplay2.styleName = this;
>>> textDisplay2.editable = false;
>>> textDisplay2.selectable = false;
>>> textDisplay2.multiline = false;
>>> textDisplay2.wordWrap = false;
>>> textDisplay2.styleDeclaration = styleManager.**
>>> getStyleDeclaration(".**textField_S3_C0");
>>> textDisplay2.commitStyles();
>>> textDisplay2.setStyle("**textAlign", "center");
>>> addChild(textDisplay2);
>>> }
>>>
>>> protected function createTextDisplay3():void
>>> {
>>> textDisplay3 = StyleableTextField(**createInFontContext(**
>>> StyleableTextField));
>>> textDisplay3.styleName = this;
>>> textDisplay3.editable = false;
>>> textDisplay3.selectable = false;
>>> textDisplay3.multiline = false;
>>> textDisplay3.wordWrap = false;
>>> textDisplay3.styleDeclaration = styleManager.**
>>> getStyleDeclaration(".**textField_S3_C0");
>>> textDisplay3.commitStyles();
>>> textDisplay3.setStyle("**textAlign", "center");
>>> addChild(textDisplay3);
>>> }
>>>
>>> private function get nameDisplay():**StyleableTextField
>>> {
>>> return labelDisplay;
>>> }
>>>
>>> private function get ageDisplay():**StyleableTextField
>>> {
>>> return messageDisplay;
>>> }
>>>
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>> //
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>>
>>> protected function assignMessage(value:Object):**String
>>> {
>>> return value.age + "";
>>> }
>>>
>>> protected function assignLabel(value:Object):**String
>>> {
>>> return value.firstName.charAt(0) + ". " + value.lastName;
>>> }
>>>
>>> protected function assignBitmap(value:Object):**Object
>>> {
>>> if(value == null)
>>> {
>>> return null;
>>> }
>>>
>>> return "GET_IMAGE_FROM_A_CACHE";
>>> }
>>>
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>> // LIFECYCLE STANDARD METHODS
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>>
>>> override protected function createChildren():void
>>> {
>>> super.createChildren();
>>>
>>> fxgImg1 = new FXG1();
>>> addChild(fxgImg1);
>>>
>>> fxgImg2 = new FXG2();
>>> addChild(fxgImg2);
>>>
>>> fxgImg3 = new FXG3();
>>> addChild(fxgImg3);
>>>
>>> fxgImg4 = new FXG4();
>>> addChild(fxgImg4);
>>>
>>> fxgImg5 = new FXG5();
>>> addChild(fxgImg5);
>>>
>>> fxgImg6 = new FXG6();
>>> addChild(fxgImg6);
>>>
>>> createTextDisplay1();
>>> createTextDisplay2();
>>> createTextDisplay3();
>>>
>>> }
>>>
>>> override protected function commitProperties():void
>>> {
>>>
>>> if(dataChanged)
>>> {
>>> setImportantIcon();
>>> }
>>>
>>> super.commitProperties();
>>>
>>> if(dataChanged)
>>> {
>>> textDisplay1.text = data.someText + "";
>>> dataChanged = false;
>>> }
>>> }
>>>
>>> override protected function measure():void
>>> {
>>> super.measure();
>>> }
>>>
>>> override protected function
>>> updateDisplayList(**unscaledWidth:Number,
>>> unscaledHeight:Number):void
>>> {
>>> super.updateDisplayList(**unscaledWidth, unscaledHeight);
>>> if(iconDisplay && iconDisplay is BitmapImage)
>>> {
>>> BitmapImage(iconDisplay).**smooth = true;
>>> }
>>> }
>>>
>>> override protected function
>>> drawBackground(unscaledWidth:**Number,
>>> unscaledHeight:Number):void
>>> {
>>> if(!matrix)
>>> {
>>> matrix = new Matrix();
>>> }
>>>
>>> matrix.createGradientBox(**unscaledWidth, unscaledHeight ,
>>> Math.PI/2);
>>>
>>> graphics.clear();
>>> graphics.beginGradientFill(**GradientType.LINEAR, [0x333333,
>>> 0x353535, 0x232323, 0x4E4E4E], [1,1,1,1], [0, 110, 115, 255], matrix);
>>> graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
>>> graphics.endFill();
>>>
>>> drawVerticalStroke(56, unscaledHeight);
>>> drawVerticalStroke(125, unscaledHeight);
>>> drawVerticalStroke(406, unscaledHeight);
>>> drawVerticalStroke(446, unscaledHeight);
>>> drawVerticalStroke(495, unscaledHeight);
>>> drawVerticalStroke(546, unscaledHeight);
>>> }
>>>
>>> override protected function
>>> layoutContents(unscaledWidth:**Number,
>>> unscaledHeight:Number):void
>>> {
>>>
>>> var yPosForTexts:Number = (unscaledHeight -
>>> getElementPreferredHeight(**nameDisplay)) / 2;
>>>
>>> setElementSize(ageDisplay, 35, getElementPreferredHeight(**
>>> ageDisplay));
>>> setElementPosition(ageDisplay, 408, yPosForTexts);
>>>
>>> setElementSize(nameDisplay, 236,
>>> getElementPreferredHeight(**
>>> nameDisplay));
>>> setElementPosition(**nameDisplay, 148, yPosForTexts);
>>>
>>> setElementSize(textDisplay1, 45,
>>> getElementPreferredHeight(**
>>> textDisplay1));
>>> setElementPosition(**textDisplay1, 550, yPosForTexts);
>>>
>>> setElementSize(iconDisplay, this.iconWidth,
>>> this.iconHeight);
>>> setElementPosition(**iconDisplay, 67, 2);
>>>
>>>
>>> if(decoratorDisplay)
>>> {
>>> decoratorDisplay.smooth = true;
>>> setElementSize(**decoratorDisplay, 55, 55);
>>> setElementPosition(**decoratorDisplay, 0, 0);
>>> }
>>>
>>> setElementPosition(fxgImg1, 502, 13);
>>> setElementPosition(fxgImg2, 502, 13);
>>> setElementPosition(fxgImg3, 510, 4);
>>>
>>> setElementPosition(fxgImg4, 452, 13);
>>> setElementPosition(fxgImg5, 452, 13);
>>> setElementPosition(fxgImg6, 460, 4);
>>>
>>> setElementPosition(**textDisplay3, 457, 23);
>>> setElementSize(textDisplay3,
>>> textDisplay3.**getPreferredBoundsWidth(),
>>> textDisplay3.**getPreferredBoundsHeight());
>>>
>>> setElementPosition(**textDisplay2, 507, 23);
>>> setElementSize(textDisplay2,
>>> textDisplay2.**getPreferredBoundsWidth(),
>>> textDisplay2.**getPreferredBoundsHeight());
>>> }
>>>
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>> // EVENT HANDLER
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>>
>>> private function handleMouseClick(event:**MouseEvent):void
>>> {
>>> dispatchEvent(new Event("SomeEvent"));
>>> }
>>>
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>> // HELPER METHODS
>>> //////////////////////////////**//////////////////////////////**
>>> ////////////////
>>>
>>> protected function drawVerticalStroke(xPos:int,
>>> unscaledHeight:Number):void
>>> {
>>> graphics.beginFill(0xCCCCCC);
>>> graphics.drawRect(xPos, 0, 3, unscaledHeight);
>>> graphics.endFill();
>>>
>>> graphics.beginFill(0x666666);
>>> graphics.drawRect(xPos + 1, 0, 1, unscaledHeight);
>>> graphics.endFill();
>>>
>>> }
>>>
>>> private function setImportantIcon():void
>>> {
>>> if(decoratorDisplay)
>>> {
>>> decoratorDisplay.visible = true;
>>> }
>>>
>>> if(data.important1)
>>> {
>>> decorator = FXGImg1;
>>> }
>>> else if(data.important2)
>>> {
>>> decorator = FXGImg2;
>>> }
>>> else if(data.important3)
>>> {
>>> decorator = FXGImg3;
>>> }
>>> else
>>> {
>>> if(decoratorDisplay)
>>> {
>>> decoratorDisplay.visible = false;
>>> }
>>> decorator = null;
>>> }
>>> invalidateDisplayList();
>>> }
>>>
>>> override public function styleChanged(styleName:String)**:void
>>> {
>>> if(getStyle("messageStyleName"**))
>>> {
>>> setStyle("messageStyleName", null);
>>> }
>>> super.styleChanged(styleName);
>>> }
>>>
>>>
>>>
>>> }
>>>
>>> }
>>>
>
Re: Flex mobile performance - Question on itemRenderers
Posted by Alex Harui <ah...@adobe.com>.
The profiler can help measure performance. Besides creation and
validation, another issue may be rendering. Look for [render] near the
top of the performance profile.
I recently discovered that fxg can be very non-optimal. There can be lots
of empty groups or unnecessary levels of groups and that can make fxg
images very costly. The authoring tools do that to preserve layers needed
at authoring but there can be a cost at runtime. One quick test: comment
out the FXG images and/or replace them with pngs and see if scrolling is
better.
On 7/18/13 11:25 AM, "flexcapacitor@gmail.com" <fl...@gmail.com>
wrote:
>I would try creating a MXML based renderer, turn off virtualization on the
>list and then compare the results. Virtualization allows reusing a
>renderer
>but if you are seeing issues during scrolling then either creation or
>validation is too heavy. When you turn off virtualization the row is only
>created once. The tradeoff is you use more memory.
>
>You might also try to optimize the FXG (either manually or with the
>compiler).
>
>Also, things like this,
>BitmapImage(iconDisplay).smooth = true;
>
>could be costly. Also, try disabling cacheAsBitmap.
>
>But you won't know unless you measure the performance. I had some code for
>testing an item renderer. I'll see if I can dig it up.
>
>On Wed, Jul 17, 2013 at 4:29 AM, Christian Kiefer <
>christian.kiefer@goal-games.de> wrote:
>
>> About the itemRenderer-Performance-**Issues...
>>
>> I've written an itemRenderer based no IconItemRenderer with some texts
>>and
>> a lot of (fxg) images... and the scrolling is horrible...
>>
>> Maybe someone can tell me what's wrong with my itemRenderer as all my
>> other renderers performe quite good...
>>
>> Code is something like that (replaced some things with pseudo code...
>>for
>> better understanding)...
>>
>> /**
>> * Created with IntelliJ IDEA.
>> * User: Christian
>> * Date: 11.03.13
>> * Time: 14:09
>> * To change this template use File | Settings | File Templates.
>> */
>> package de.somePackage {
>> import flash.display.GradientType;
>> import flash.events.Event;
>> import flash.events.MouseEvent;
>> import flash.geom.Matrix;
>>
>> import spark.components.**IconItemRenderer;
>> import spark.components.**supportClasses.**StyleableTextField;
>> import spark.core.**SpriteVisualElement;
>> import spark.primitives.BitmapImage;
>>
>> public class MyRenderer extends IconItemRenderer{
>>
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>> // CONSTANTS
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>>
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>> // FIELDS
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>>
>> private var matrix:Matrix;
>>
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>> // USER INTERFACE COMPONENTS
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>>
>>
>> private var textDisplay1:**StyleableTextField;
>> private var textDisplay2:**StyleableTextField;
>> private var textDisplay3:**StyleableTextField;
>>
>> private var fxgImg1:SpriteVisualElement;
>> private var fxgImg2:SpriteVisualElement;
>> private var fxgImg3:SpriteVisualElement;
>>
>> private var fxgImg4:SpriteVisualElement;
>> private var fxgImg5:SpriteVisualElement;
>> private var fxgImg6:SpriteVisualElement;
>>
>>
>> private var dataChanged:Boolean;
>>
>> override public function set data(value:Object):void
>> {
>> super.data = value;
>> dataChanged = true;
>> invalidateProperties();
>> invalidateDisplayList()
>> }
>>
>>
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>> // CONSTRUCTOR
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>>
>> public function MyRenderer ()
>> {
>> super();
>> //cacheAsBitmap = true; -> Already setted in
>>LabelItemRenderer
>> height = 55;
>> iconWidth = 51;
>> iconHeight = 51;
>>
>> mouseChildren = false;
>> addEventListener(MouseEvent.**CLICK, handleMouseClick);
>>
>> iconScaleMode = "letterbox";
>>
>> iconFunction = assignBitmap;
>> messageFunction = assignMessage;
>> labelFunction = assignLabel;
>> }
>>
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>> // ITEM RENDERER OVERRIDES
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>>
>> override protected function createLabelDisplay():void
>> {
>> labelDisplay = StyleableTextField(**createInFontContext(**
>> StyleableTextField));
>> labelDisplay.styleName = this;
>> labelDisplay.editable = false;
>> labelDisplay.selectable = false;
>> labelDisplay.multiline = false;
>> labelDisplay.wordWrap = false;
>> labelDisplay.styleDeclaration = styleManager.**
>> getStyleDeclaration(".**textField_S3_C1");
>> labelDisplay.commitStyles();
>> addChild(labelDisplay);
>> }
>>
>> override protected function createMessageDisplay():void
>> {
>> messageDisplay = StyleableTextField(**createInFontContext(**
>> StyleableTextField));
>> messageDisplay.styleName = this;
>> messageDisplay.editable = false;
>> messageDisplay.selectable = false;
>> messageDisplay.multiline = false;
>> messageDisplay.wordWrap = false;
>> messageDisplay.**styleDeclaration = styleManager.**
>> getStyleDeclaration(".**textField_S3_C1");
>> messageDisplay.commitStyles();
>> messageDisplay.setStyle("**textAlign", "center");
>> addChild(messageDisplay);
>> }
>>
>> protected function createTextDisplay1():void
>> {
>> textDisplay1 = StyleableTextField(**createInFontContext(**
>> StyleableTextField));
>> textDisplay1.styleName = this;
>> textDisplay1.editable = false;
>> textDisplay1.selectable = false;
>> textDisplay1.multiline = false;
>> textDisplay1.wordWrap = false;
>> textDisplay1.styleDeclaration = styleManager.**
>> getStyleDeclaration(".**textField_S3_C1");
>> textDisplay1.commitStyles();
>> textDisplay1.setStyle("**textAlign", "center");
>> addChild(textDisplay1);
>> }
>>
>> protected function createTextDisplay2():void
>> {
>> textDisplay2 = StyleableTextField(**createInFontContext(**
>> StyleableTextField));
>> textDisplay2.styleName = this;
>> textDisplay2.editable = false;
>> textDisplay2.selectable = false;
>> textDisplay2.multiline = false;
>> textDisplay2.wordWrap = false;
>> textDisplay2.styleDeclaration = styleManager.**
>> getStyleDeclaration(".**textField_S3_C0");
>> textDisplay2.commitStyles();
>> textDisplay2.setStyle("**textAlign", "center");
>> addChild(textDisplay2);
>> }
>>
>> protected function createTextDisplay3():void
>> {
>> textDisplay3 = StyleableTextField(**createInFontContext(**
>> StyleableTextField));
>> textDisplay3.styleName = this;
>> textDisplay3.editable = false;
>> textDisplay3.selectable = false;
>> textDisplay3.multiline = false;
>> textDisplay3.wordWrap = false;
>> textDisplay3.styleDeclaration = styleManager.**
>> getStyleDeclaration(".**textField_S3_C0");
>> textDisplay3.commitStyles();
>> textDisplay3.setStyle("**textAlign", "center");
>> addChild(textDisplay3);
>> }
>>
>> private function get nameDisplay():**StyleableTextField
>> {
>> return labelDisplay;
>> }
>>
>> private function get ageDisplay():**StyleableTextField
>> {
>> return messageDisplay;
>> }
>>
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>> //
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>>
>> protected function assignMessage(value:Object):**String
>> {
>> return value.age + "";
>> }
>>
>> protected function assignLabel(value:Object):**String
>> {
>> return value.firstName.charAt(0) + ". " + value.lastName;
>> }
>>
>> protected function assignBitmap(value:Object):**Object
>> {
>> if(value == null)
>> {
>> return null;
>> }
>>
>> return "GET_IMAGE_FROM_A_CACHE";
>> }
>>
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>> // LIFECYCLE STANDARD METHODS
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>>
>> override protected function createChildren():void
>> {
>> super.createChildren();
>>
>> fxgImg1 = new FXG1();
>> addChild(fxgImg1);
>>
>> fxgImg2 = new FXG2();
>> addChild(fxgImg2);
>>
>> fxgImg3 = new FXG3();
>> addChild(fxgImg3);
>>
>> fxgImg4 = new FXG4();
>> addChild(fxgImg4);
>>
>> fxgImg5 = new FXG5();
>> addChild(fxgImg5);
>>
>> fxgImg6 = new FXG6();
>> addChild(fxgImg6);
>>
>> createTextDisplay1();
>> createTextDisplay2();
>> createTextDisplay3();
>>
>> }
>>
>> override protected function commitProperties():void
>> {
>>
>> if(dataChanged)
>> {
>> setImportantIcon();
>> }
>>
>> super.commitProperties();
>>
>> if(dataChanged)
>> {
>> textDisplay1.text = data.someText + "";
>> dataChanged = false;
>> }
>> }
>>
>> override protected function measure():void
>> {
>> super.measure();
>> }
>>
>> override protected function
>>updateDisplayList(**unscaledWidth:Number,
>> unscaledHeight:Number):void
>> {
>> super.updateDisplayList(**unscaledWidth, unscaledHeight);
>> if(iconDisplay && iconDisplay is BitmapImage)
>> {
>> BitmapImage(iconDisplay).**smooth = true;
>> }
>> }
>>
>> override protected function
>>drawBackground(unscaledWidth:**Number,
>> unscaledHeight:Number):void
>> {
>> if(!matrix)
>> {
>> matrix = new Matrix();
>> }
>>
>> matrix.createGradientBox(**unscaledWidth, unscaledHeight ,
>> Math.PI/2);
>>
>> graphics.clear();
>> graphics.beginGradientFill(**GradientType.LINEAR, [0x333333,
>> 0x353535, 0x232323, 0x4E4E4E], [1,1,1,1], [0, 110, 115, 255], matrix);
>> graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
>> graphics.endFill();
>>
>> drawVerticalStroke(56, unscaledHeight);
>> drawVerticalStroke(125, unscaledHeight);
>> drawVerticalStroke(406, unscaledHeight);
>> drawVerticalStroke(446, unscaledHeight);
>> drawVerticalStroke(495, unscaledHeight);
>> drawVerticalStroke(546, unscaledHeight);
>> }
>>
>> override protected function
>>layoutContents(unscaledWidth:**Number,
>> unscaledHeight:Number):void
>> {
>>
>> var yPosForTexts:Number = (unscaledHeight -
>> getElementPreferredHeight(**nameDisplay)) / 2;
>>
>> setElementSize(ageDisplay, 35, getElementPreferredHeight(**
>> ageDisplay));
>> setElementPosition(ageDisplay, 408, yPosForTexts);
>>
>> setElementSize(nameDisplay, 236,
>>getElementPreferredHeight(**
>> nameDisplay));
>> setElementPosition(**nameDisplay, 148, yPosForTexts);
>>
>> setElementSize(textDisplay1, 45,
>>getElementPreferredHeight(**
>> textDisplay1));
>> setElementPosition(**textDisplay1, 550, yPosForTexts);
>>
>> setElementSize(iconDisplay, this.iconWidth,
>>this.iconHeight);
>> setElementPosition(**iconDisplay, 67, 2);
>>
>>
>> if(decoratorDisplay)
>> {
>> decoratorDisplay.smooth = true;
>> setElementSize(**decoratorDisplay, 55, 55);
>> setElementPosition(**decoratorDisplay, 0, 0);
>> }
>>
>> setElementPosition(fxgImg1, 502, 13);
>> setElementPosition(fxgImg2, 502, 13);
>> setElementPosition(fxgImg3, 510, 4);
>>
>> setElementPosition(fxgImg4, 452, 13);
>> setElementPosition(fxgImg5, 452, 13);
>> setElementPosition(fxgImg6, 460, 4);
>>
>> setElementPosition(**textDisplay3, 457, 23);
>> setElementSize(textDisplay3,
>>textDisplay3.**getPreferredBoundsWidth(),
>> textDisplay3.**getPreferredBoundsHeight());
>>
>> setElementPosition(**textDisplay2, 507, 23);
>> setElementSize(textDisplay2,
>>textDisplay2.**getPreferredBoundsWidth(),
>> textDisplay2.**getPreferredBoundsHeight());
>> }
>>
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>> // EVENT HANDLER
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>>
>> private function handleMouseClick(event:**MouseEvent):void
>> {
>> dispatchEvent(new Event("SomeEvent"));
>> }
>>
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>> // HELPER METHODS
>> //////////////////////////////**//////////////////////////////**
>> ////////////////
>>
>> protected function drawVerticalStroke(xPos:int,
>> unscaledHeight:Number):void
>> {
>> graphics.beginFill(0xCCCCCC);
>> graphics.drawRect(xPos, 0, 3, unscaledHeight);
>> graphics.endFill();
>>
>> graphics.beginFill(0x666666);
>> graphics.drawRect(xPos + 1, 0, 1, unscaledHeight);
>> graphics.endFill();
>>
>> }
>>
>> private function setImportantIcon():void
>> {
>> if(decoratorDisplay)
>> {
>> decoratorDisplay.visible = true;
>> }
>>
>> if(data.important1)
>> {
>> decorator = FXGImg1;
>> }
>> else if(data.important2)
>> {
>> decorator = FXGImg2;
>> }
>> else if(data.important3)
>> {
>> decorator = FXGImg3;
>> }
>> else
>> {
>> if(decoratorDisplay)
>> {
>> decoratorDisplay.visible = false;
>> }
>> decorator = null;
>> }
>> invalidateDisplayList();
>> }
>>
>> override public function styleChanged(styleName:String)**:void
>> {
>> if(getStyle("messageStyleName"**))
>> {
>> setStyle("messageStyleName", null);
>> }
>> super.styleChanged(styleName);
>> }
>>
>>
>>
>> }
>>
>> }
>>
Re: Flex mobile performance - Question on itemRenderers
Posted by jude <fl...@gmail.com>.
I would try creating a MXML based renderer, turn off virtualization on the
list and then compare the results. Virtualization allows reusing a renderer
but if you are seeing issues during scrolling then either creation or
validation is too heavy. When you turn off virtualization the row is only
created once. The tradeoff is you use more memory.
You might also try to optimize the FXG (either manually or with the
compiler).
Also, things like this,
BitmapImage(iconDisplay).smooth = true;
could be costly. Also, try disabling cacheAsBitmap.
But you won't know unless you measure the performance. I had some code for
testing an item renderer. I'll see if I can dig it up.
On Wed, Jul 17, 2013 at 4:29 AM, Christian Kiefer <
christian.kiefer@goal-games.de> wrote:
> About the itemRenderer-Performance-**Issues...
>
> I've written an itemRenderer based no IconItemRenderer with some texts and
> a lot of (fxg) images... and the scrolling is horrible...
>
> Maybe someone can tell me what's wrong with my itemRenderer as all my
> other renderers performe quite good...
>
> Code is something like that (replaced some things with pseudo code... for
> better understanding)...
>
> /**
> * Created with IntelliJ IDEA.
> * User: Christian
> * Date: 11.03.13
> * Time: 14:09
> * To change this template use File | Settings | File Templates.
> */
> package de.somePackage {
> import flash.display.GradientType;
> import flash.events.Event;
> import flash.events.MouseEvent;
> import flash.geom.Matrix;
>
> import spark.components.**IconItemRenderer;
> import spark.components.**supportClasses.**StyleableTextField;
> import spark.core.**SpriteVisualElement;
> import spark.primitives.BitmapImage;
>
> public class MyRenderer extends IconItemRenderer{
>
> //////////////////////////////**//////////////////////////////**
> ////////////////
> // CONSTANTS
> //////////////////////////////**//////////////////////////////**
> ////////////////
>
> //////////////////////////////**//////////////////////////////**
> ////////////////
> // FIELDS
> //////////////////////////////**//////////////////////////////**
> ////////////////
>
> private var matrix:Matrix;
>
> //////////////////////////////**//////////////////////////////**
> ////////////////
> // USER INTERFACE COMPONENTS
> //////////////////////////////**//////////////////////////////**
> ////////////////
>
>
> private var textDisplay1:**StyleableTextField;
> private var textDisplay2:**StyleableTextField;
> private var textDisplay3:**StyleableTextField;
>
> private var fxgImg1:SpriteVisualElement;
> private var fxgImg2:SpriteVisualElement;
> private var fxgImg3:SpriteVisualElement;
>
> private var fxgImg4:SpriteVisualElement;
> private var fxgImg5:SpriteVisualElement;
> private var fxgImg6:SpriteVisualElement;
>
>
> private var dataChanged:Boolean;
>
> override public function set data(value:Object):void
> {
> super.data = value;
> dataChanged = true;
> invalidateProperties();
> invalidateDisplayList()
> }
>
>
> //////////////////////////////**//////////////////////////////**
> ////////////////
> // CONSTRUCTOR
> //////////////////////////////**//////////////////////////////**
> ////////////////
>
> public function MyRenderer ()
> {
> super();
> //cacheAsBitmap = true; -> Already setted in LabelItemRenderer
> height = 55;
> iconWidth = 51;
> iconHeight = 51;
>
> mouseChildren = false;
> addEventListener(MouseEvent.**CLICK, handleMouseClick);
>
> iconScaleMode = "letterbox";
>
> iconFunction = assignBitmap;
> messageFunction = assignMessage;
> labelFunction = assignLabel;
> }
>
> //////////////////////////////**//////////////////////////////**
> ////////////////
> // ITEM RENDERER OVERRIDES
> //////////////////////////////**//////////////////////////////**
> ////////////////
>
> override protected function createLabelDisplay():void
> {
> labelDisplay = StyleableTextField(**createInFontContext(**
> StyleableTextField));
> labelDisplay.styleName = this;
> labelDisplay.editable = false;
> labelDisplay.selectable = false;
> labelDisplay.multiline = false;
> labelDisplay.wordWrap = false;
> labelDisplay.styleDeclaration = styleManager.**
> getStyleDeclaration(".**textField_S3_C1");
> labelDisplay.commitStyles();
> addChild(labelDisplay);
> }
>
> override protected function createMessageDisplay():void
> {
> messageDisplay = StyleableTextField(**createInFontContext(**
> StyleableTextField));
> messageDisplay.styleName = this;
> messageDisplay.editable = false;
> messageDisplay.selectable = false;
> messageDisplay.multiline = false;
> messageDisplay.wordWrap = false;
> messageDisplay.**styleDeclaration = styleManager.**
> getStyleDeclaration(".**textField_S3_C1");
> messageDisplay.commitStyles();
> messageDisplay.setStyle("**textAlign", "center");
> addChild(messageDisplay);
> }
>
> protected function createTextDisplay1():void
> {
> textDisplay1 = StyleableTextField(**createInFontContext(**
> StyleableTextField));
> textDisplay1.styleName = this;
> textDisplay1.editable = false;
> textDisplay1.selectable = false;
> textDisplay1.multiline = false;
> textDisplay1.wordWrap = false;
> textDisplay1.styleDeclaration = styleManager.**
> getStyleDeclaration(".**textField_S3_C1");
> textDisplay1.commitStyles();
> textDisplay1.setStyle("**textAlign", "center");
> addChild(textDisplay1);
> }
>
> protected function createTextDisplay2():void
> {
> textDisplay2 = StyleableTextField(**createInFontContext(**
> StyleableTextField));
> textDisplay2.styleName = this;
> textDisplay2.editable = false;
> textDisplay2.selectable = false;
> textDisplay2.multiline = false;
> textDisplay2.wordWrap = false;
> textDisplay2.styleDeclaration = styleManager.**
> getStyleDeclaration(".**textField_S3_C0");
> textDisplay2.commitStyles();
> textDisplay2.setStyle("**textAlign", "center");
> addChild(textDisplay2);
> }
>
> protected function createTextDisplay3():void
> {
> textDisplay3 = StyleableTextField(**createInFontContext(**
> StyleableTextField));
> textDisplay3.styleName = this;
> textDisplay3.editable = false;
> textDisplay3.selectable = false;
> textDisplay3.multiline = false;
> textDisplay3.wordWrap = false;
> textDisplay3.styleDeclaration = styleManager.**
> getStyleDeclaration(".**textField_S3_C0");
> textDisplay3.commitStyles();
> textDisplay3.setStyle("**textAlign", "center");
> addChild(textDisplay3);
> }
>
> private function get nameDisplay():**StyleableTextField
> {
> return labelDisplay;
> }
>
> private function get ageDisplay():**StyleableTextField
> {
> return messageDisplay;
> }
>
> //////////////////////////////**//////////////////////////////**
> ////////////////
> //
> //////////////////////////////**//////////////////////////////**
> ////////////////
>
> protected function assignMessage(value:Object):**String
> {
> return value.age + "";
> }
>
> protected function assignLabel(value:Object):**String
> {
> return value.firstName.charAt(0) + ". " + value.lastName;
> }
>
> protected function assignBitmap(value:Object):**Object
> {
> if(value == null)
> {
> return null;
> }
>
> return "GET_IMAGE_FROM_A_CACHE";
> }
>
> //////////////////////////////**//////////////////////////////**
> ////////////////
> // LIFECYCLE STANDARD METHODS
> //////////////////////////////**//////////////////////////////**
> ////////////////
>
> override protected function createChildren():void
> {
> super.createChildren();
>
> fxgImg1 = new FXG1();
> addChild(fxgImg1);
>
> fxgImg2 = new FXG2();
> addChild(fxgImg2);
>
> fxgImg3 = new FXG3();
> addChild(fxgImg3);
>
> fxgImg4 = new FXG4();
> addChild(fxgImg4);
>
> fxgImg5 = new FXG5();
> addChild(fxgImg5);
>
> fxgImg6 = new FXG6();
> addChild(fxgImg6);
>
> createTextDisplay1();
> createTextDisplay2();
> createTextDisplay3();
>
> }
>
> override protected function commitProperties():void
> {
>
> if(dataChanged)
> {
> setImportantIcon();
> }
>
> super.commitProperties();
>
> if(dataChanged)
> {
> textDisplay1.text = data.someText + "";
> dataChanged = false;
> }
> }
>
> override protected function measure():void
> {
> super.measure();
> }
>
> override protected function updateDisplayList(**unscaledWidth:Number,
> unscaledHeight:Number):void
> {
> super.updateDisplayList(**unscaledWidth, unscaledHeight);
> if(iconDisplay && iconDisplay is BitmapImage)
> {
> BitmapImage(iconDisplay).**smooth = true;
> }
> }
>
> override protected function drawBackground(unscaledWidth:**Number,
> unscaledHeight:Number):void
> {
> if(!matrix)
> {
> matrix = new Matrix();
> }
>
> matrix.createGradientBox(**unscaledWidth, unscaledHeight ,
> Math.PI/2);
>
> graphics.clear();
> graphics.beginGradientFill(**GradientType.LINEAR, [0x333333,
> 0x353535, 0x232323, 0x4E4E4E], [1,1,1,1], [0, 110, 115, 255], matrix);
> graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
> graphics.endFill();
>
> drawVerticalStroke(56, unscaledHeight);
> drawVerticalStroke(125, unscaledHeight);
> drawVerticalStroke(406, unscaledHeight);
> drawVerticalStroke(446, unscaledHeight);
> drawVerticalStroke(495, unscaledHeight);
> drawVerticalStroke(546, unscaledHeight);
> }
>
> override protected function layoutContents(unscaledWidth:**Number,
> unscaledHeight:Number):void
> {
>
> var yPosForTexts:Number = (unscaledHeight -
> getElementPreferredHeight(**nameDisplay)) / 2;
>
> setElementSize(ageDisplay, 35, getElementPreferredHeight(**
> ageDisplay));
> setElementPosition(ageDisplay, 408, yPosForTexts);
>
> setElementSize(nameDisplay, 236, getElementPreferredHeight(**
> nameDisplay));
> setElementPosition(**nameDisplay, 148, yPosForTexts);
>
> setElementSize(textDisplay1, 45, getElementPreferredHeight(**
> textDisplay1));
> setElementPosition(**textDisplay1, 550, yPosForTexts);
>
> setElementSize(iconDisplay, this.iconWidth, this.iconHeight);
> setElementPosition(**iconDisplay, 67, 2);
>
>
> if(decoratorDisplay)
> {
> decoratorDisplay.smooth = true;
> setElementSize(**decoratorDisplay, 55, 55);
> setElementPosition(**decoratorDisplay, 0, 0);
> }
>
> setElementPosition(fxgImg1, 502, 13);
> setElementPosition(fxgImg2, 502, 13);
> setElementPosition(fxgImg3, 510, 4);
>
> setElementPosition(fxgImg4, 452, 13);
> setElementPosition(fxgImg5, 452, 13);
> setElementPosition(fxgImg6, 460, 4);
>
> setElementPosition(**textDisplay3, 457, 23);
> setElementSize(textDisplay3, textDisplay3.**getPreferredBoundsWidth(),
> textDisplay3.**getPreferredBoundsHeight());
>
> setElementPosition(**textDisplay2, 507, 23);
> setElementSize(textDisplay2, textDisplay2.**getPreferredBoundsWidth(),
> textDisplay2.**getPreferredBoundsHeight());
> }
>
> //////////////////////////////**//////////////////////////////**
> ////////////////
> // EVENT HANDLER
> //////////////////////////////**//////////////////////////////**
> ////////////////
>
> private function handleMouseClick(event:**MouseEvent):void
> {
> dispatchEvent(new Event("SomeEvent"));
> }
>
> //////////////////////////////**//////////////////////////////**
> ////////////////
> // HELPER METHODS
> //////////////////////////////**//////////////////////////////**
> ////////////////
>
> protected function drawVerticalStroke(xPos:int,
> unscaledHeight:Number):void
> {
> graphics.beginFill(0xCCCCCC);
> graphics.drawRect(xPos, 0, 3, unscaledHeight);
> graphics.endFill();
>
> graphics.beginFill(0x666666);
> graphics.drawRect(xPos + 1, 0, 1, unscaledHeight);
> graphics.endFill();
>
> }
>
> private function setImportantIcon():void
> {
> if(decoratorDisplay)
> {
> decoratorDisplay.visible = true;
> }
>
> if(data.important1)
> {
> decorator = FXGImg1;
> }
> else if(data.important2)
> {
> decorator = FXGImg2;
> }
> else if(data.important3)
> {
> decorator = FXGImg3;
> }
> else
> {
> if(decoratorDisplay)
> {
> decoratorDisplay.visible = false;
> }
> decorator = null;
> }
> invalidateDisplayList();
> }
>
> override public function styleChanged(styleName:String)**:void
> {
> if(getStyle("messageStyleName"**))
> {
> setStyle("messageStyleName", null);
> }
> super.styleChanged(styleName);
> }
>
>
>
> }
>
> }
>
Re: Flex mobile performance - Question on itemRenderers
Posted by Jonathan Campos <jo...@gmail.com>.
On Wed, Jul 17, 2013 at 4:29 AM, Christian Kiefer <
christian.kiefer@goal-games.de> wrote:
> Maybe someone can tell me what's wrong with my itemRenderer as all my
> other renderers performe quite good...
I've never created a renderer with quite so many images but I have some
with up to 6 (if my memory serves me) text fields and there wasn't an
issue. The question is why so many images? Is it because you are showing
statuses and have some on and off based on state? Could you not use one
image with the various states baked in? Just food for thought. There are
usually many ways to handle the solution. If you're needing to click on
each individual image then you could still have one image and use x/y
position from the click event to determine which image was pressed.
Maybe if you provide an image of what you are trying to achieve it may be
easier.
J
--
Jonathan Campos
Flex mobile performance - Question on itemRenderers
Posted by Christian Kiefer <ch...@goal-games.de>.
About the itemRenderer-Performance-Issues...
I've written an itemRenderer based no IconItemRenderer with some texts
and a lot of (fxg) images... and the scrolling is horrible...
Maybe someone can tell me what's wrong with my itemRenderer as all my
other renderers performe quite good...
Code is something like that (replaced some things with pseudo code...
for better understanding)...
/**
* Created with IntelliJ IDEA.
* User: Christian
* Date: 11.03.13
* Time: 14:09
* To change this template use File | Settings | File Templates.
*/
package de.somePackage {
import flash.display.GradientType;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import spark.components.IconItemRenderer;
import spark.components.supportClasses.StyleableTextField;
import spark.core.SpriteVisualElement;
import spark.primitives.BitmapImage;
public class MyRenderer extends IconItemRenderer{
////////////////////////////////////////////////////////////////////////////
// CONSTANTS
////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
// FIELDS
////////////////////////////////////////////////////////////////////////////
private var matrix:Matrix;
////////////////////////////////////////////////////////////////////////////
// USER INTERFACE COMPONENTS
////////////////////////////////////////////////////////////////////////////
private var textDisplay1:StyleableTextField;
private var textDisplay2:StyleableTextField;
private var textDisplay3:StyleableTextField;
private var fxgImg1:SpriteVisualElement;
private var fxgImg2:SpriteVisualElement;
private var fxgImg3:SpriteVisualElement;
private var fxgImg4:SpriteVisualElement;
private var fxgImg5:SpriteVisualElement;
private var fxgImg6:SpriteVisualElement;
private var dataChanged:Boolean;
override public function set data(value:Object):void
{
super.data = value;
dataChanged = true;
invalidateProperties();
invalidateDisplayList()
}
////////////////////////////////////////////////////////////////////////////
// CONSTRUCTOR
////////////////////////////////////////////////////////////////////////////
public function MyRenderer ()
{
super();
//cacheAsBitmap = true; -> Already setted in LabelItemRenderer
height = 55;
iconWidth = 51;
iconHeight = 51;
mouseChildren = false;
addEventListener(MouseEvent.CLICK, handleMouseClick);
iconScaleMode = "letterbox";
iconFunction = assignBitmap;
messageFunction = assignMessage;
labelFunction = assignLabel;
}
////////////////////////////////////////////////////////////////////////////
// ITEM RENDERER OVERRIDES
////////////////////////////////////////////////////////////////////////////
override protected function createLabelDisplay():void
{
labelDisplay =
StyleableTextField(createInFontContext(StyleableTextField));
labelDisplay.styleName = this;
labelDisplay.editable = false;
labelDisplay.selectable = false;
labelDisplay.multiline = false;
labelDisplay.wordWrap = false;
labelDisplay.styleDeclaration =
styleManager.getStyleDeclaration(".textField_S3_C1");
labelDisplay.commitStyles();
addChild(labelDisplay);
}
override protected function createMessageDisplay():void
{
messageDisplay =
StyleableTextField(createInFontContext(StyleableTextField));
messageDisplay.styleName = this;
messageDisplay.editable = false;
messageDisplay.selectable = false;
messageDisplay.multiline = false;
messageDisplay.wordWrap = false;
messageDisplay.styleDeclaration =
styleManager.getStyleDeclaration(".textField_S3_C1");
messageDisplay.commitStyles();
messageDisplay.setStyle("textAlign", "center");
addChild(messageDisplay);
}
protected function createTextDisplay1():void
{
textDisplay1 =
StyleableTextField(createInFontContext(StyleableTextField));
textDisplay1.styleName = this;
textDisplay1.editable = false;
textDisplay1.selectable = false;
textDisplay1.multiline = false;
textDisplay1.wordWrap = false;
textDisplay1.styleDeclaration =
styleManager.getStyleDeclaration(".textField_S3_C1");
textDisplay1.commitStyles();
textDisplay1.setStyle("textAlign", "center");
addChild(textDisplay1);
}
protected function createTextDisplay2():void
{
textDisplay2 =
StyleableTextField(createInFontContext(StyleableTextField));
textDisplay2.styleName = this;
textDisplay2.editable = false;
textDisplay2.selectable = false;
textDisplay2.multiline = false;
textDisplay2.wordWrap = false;
textDisplay2.styleDeclaration =
styleManager.getStyleDeclaration(".textField_S3_C0");
textDisplay2.commitStyles();
textDisplay2.setStyle("textAlign", "center");
addChild(textDisplay2);
}
protected function createTextDisplay3():void
{
textDisplay3 =
StyleableTextField(createInFontContext(StyleableTextField));
textDisplay3.styleName = this;
textDisplay3.editable = false;
textDisplay3.selectable = false;
textDisplay3.multiline = false;
textDisplay3.wordWrap = false;
textDisplay3.styleDeclaration =
styleManager.getStyleDeclaration(".textField_S3_C0");
textDisplay3.commitStyles();
textDisplay3.setStyle("textAlign", "center");
addChild(textDisplay3);
}
private function get nameDisplay():StyleableTextField
{
return labelDisplay;
}
private function get ageDisplay():StyleableTextField
{
return messageDisplay;
}
////////////////////////////////////////////////////////////////////////////
//
////////////////////////////////////////////////////////////////////////////
protected function assignMessage(value:Object):String
{
return value.age + "";
}
protected function assignLabel(value:Object):String
{
return value.firstName.charAt(0) + ". " + value.lastName;
}
protected function assignBitmap(value:Object):Object
{
if(value == null)
{
return null;
}
return "GET_IMAGE_FROM_A_CACHE";
}
////////////////////////////////////////////////////////////////////////////
// LIFECYCLE STANDARD METHODS
////////////////////////////////////////////////////////////////////////////
override protected function createChildren():void
{
super.createChildren();
fxgImg1 = new FXG1();
addChild(fxgImg1);
fxgImg2 = new FXG2();
addChild(fxgImg2);
fxgImg3 = new FXG3();
addChild(fxgImg3);
fxgImg4 = new FXG4();
addChild(fxgImg4);
fxgImg5 = new FXG5();
addChild(fxgImg5);
fxgImg6 = new FXG6();
addChild(fxgImg6);
createTextDisplay1();
createTextDisplay2();
createTextDisplay3();
}
override protected function commitProperties():void
{
if(dataChanged)
{
setImportantIcon();
}
super.commitProperties();
if(dataChanged)
{
textDisplay1.text = data.someText + "";
dataChanged = false;
}
}
override protected function measure():void
{
super.measure();
}
override protected function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(iconDisplay && iconDisplay is BitmapImage)
{
BitmapImage(iconDisplay).smooth = true;
}
}
override protected function
drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
{
if(!matrix)
{
matrix = new Matrix();
}
matrix.createGradientBox(unscaledWidth, unscaledHeight ,
Math.PI/2);
graphics.clear();
graphics.beginGradientFill(GradientType.LINEAR, [0x333333,
0x353535, 0x232323, 0x4E4E4E], [1,1,1,1], [0, 110, 115, 255], matrix);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
drawVerticalStroke(56, unscaledHeight);
drawVerticalStroke(125, unscaledHeight);
drawVerticalStroke(406, unscaledHeight);
drawVerticalStroke(446, unscaledHeight);
drawVerticalStroke(495, unscaledHeight);
drawVerticalStroke(546, unscaledHeight);
}
override protected function layoutContents(unscaledWidth:Number,
unscaledHeight:Number):void
{
var yPosForTexts:Number = (unscaledHeight -
getElementPreferredHeight(nameDisplay)) / 2;
setElementSize(ageDisplay, 35,
getElementPreferredHeight(ageDisplay));
setElementPosition(ageDisplay, 408, yPosForTexts);
setElementSize(nameDisplay, 236,
getElementPreferredHeight(nameDisplay));
setElementPosition(nameDisplay, 148, yPosForTexts);
setElementSize(textDisplay1, 45,
getElementPreferredHeight(textDisplay1));
setElementPosition(textDisplay1, 550, yPosForTexts);
setElementSize(iconDisplay, this.iconWidth, this.iconHeight);
setElementPosition(iconDisplay, 67, 2);
if(decoratorDisplay)
{
decoratorDisplay.smooth = true;
setElementSize(decoratorDisplay, 55, 55);
setElementPosition(decoratorDisplay, 0, 0);
}
setElementPosition(fxgImg1, 502, 13);
setElementPosition(fxgImg2, 502, 13);
setElementPosition(fxgImg3, 510, 4);
setElementPosition(fxgImg4, 452, 13);
setElementPosition(fxgImg5, 452, 13);
setElementPosition(fxgImg6, 460, 4);
setElementPosition(textDisplay3, 457, 23);
setElementSize(textDisplay3,
textDisplay3.getPreferredBoundsWidth(),
textDisplay3.getPreferredBoundsHeight());
setElementPosition(textDisplay2, 507, 23);
setElementSize(textDisplay2,
textDisplay2.getPreferredBoundsWidth(),
textDisplay2.getPreferredBoundsHeight());
}
////////////////////////////////////////////////////////////////////////////
// EVENT HANDLER
////////////////////////////////////////////////////////////////////////////
private function handleMouseClick(event:MouseEvent):void
{
dispatchEvent(new Event("SomeEvent"));
}
////////////////////////////////////////////////////////////////////////////
// HELPER METHODS
////////////////////////////////////////////////////////////////////////////
protected function drawVerticalStroke(xPos:int,
unscaledHeight:Number):void
{
graphics.beginFill(0xCCCCCC);
graphics.drawRect(xPos, 0, 3, unscaledHeight);
graphics.endFill();
graphics.beginFill(0x666666);
graphics.drawRect(xPos + 1, 0, 1, unscaledHeight);
graphics.endFill();
}
private function setImportantIcon():void
{
if(decoratorDisplay)
{
decoratorDisplay.visible = true;
}
if(data.important1)
{
decorator = FXGImg1;
}
else if(data.important2)
{
decorator = FXGImg2;
}
else if(data.important3)
{
decorator = FXGImg3;
}
else
{
if(decoratorDisplay)
{
decoratorDisplay.visible = false;
}
decorator = null;
}
invalidateDisplayList();
}
override public function styleChanged(styleName:String):void
{
if(getStyle("messageStyleName"))
{
setStyle("messageStyleName", null);
}
super.styleChanged(styleName);
}
}
}
Re: Flex mobile performance
Posted by Jonathan Campos <jo...@gmail.com>.
On Mon, Jul 1, 2013 at 12:15 PM, OmPrakash Muppirala
<bi...@gmail.com>wrote:
> Is there something we can do about this in terms of coding/compiler
> warnings etc. ? Or perhaps have a Flex PMD rule for this?
>
I think there are plenty of articles out there telling developers how to
get good performance and to write out their item renderers. Just not
everyone does it. I'm not sure what can be done on this other than working
on the SDK to make even sloppy itemrenderers fast. And I don't think that
should be the top of our agenda.
J
J
--
Jonathan Campos