8 Replies Latest reply on Jun 26, 2011 9:10 PM by anynick

    Item Renderer Display Optimization

    anynick Level 1

      I have pretty basic row item renderer displayed within a data group, it is composed of a few labels and an icon. It has a few nested layouts to display everything properly, but I would not consider it a complicated layout by any means.

       

      Whenever I display a result set, 20 rows of data, it appears Flex is choking displaying the item renders. It takes about half a second from the moment all the item renders have been created to actually draw them on the screen and the Flex code that handles the drawing appears to be blocking because everything on the screen freezes during this half second period. This display blocking turns a very fluid display rich application into a choppy mess whenever results are displayed.

       

      I have gone great lengths to make sure none of my code is blocking and that I always give Flash Player the room it needs to breath to maintain it's frame rate, however I am stuck with this display issue. Any suggestions would be appreciated.

        • 1. Re: Item Renderer Display Optimization
          SashaKeith Adobe Employee

          Hard to know what the problem is without looking at your renderer. Some things that seem to usually help are AS renderers instead of MXML ones, avoiding data binding, using Basic Layout.

          1 person found this helpful
          • 2. Re: Item Renderer Display Optimization
            anynick Level 1

            Thanks for the reply Sasha. I will try an AS item renderer but I have to say that data binding and layout management are probably the two biggest reasons to use Flex in the first place. If I can't use those items and have a smooth interface I might as well go back to just writing everything using Flash. (this is a little bit irritating to say the least)

             

            Below is the code to one of the item renderers that is casuing probelms...if anything sticks out as wrong or out of place please let me know.

             

            I appreciate your time, and response. Thank you.

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark"
                            xmlns:mx="library://ns.adobe.com/flex/mx"
                            autoDrawBackground="false"
                            width="100%" height="76"
                            mouseChildren="true"
                            click="clickHandler(event)"
                            buttonMode="true"
                            useHandCursor="true" >
                   
                <fx:Script>
                    <![CDATA[
                           //removed
                    ]]>
                </fx:Script>
               
                <s:states>
                    <s:State name="hovered" />
                    <s:State name="normal"/>
                </s:states>
               
                <s:transitions>
                    <s:Transition fromState="normal" toState="hovered">
                        <s:Parallel>
                            <s:Fade target="{backgroundRollover}" alphaFrom="0" alphaTo="1" duration="0"/>
                        </s:Parallel>
                    </s:Transition>
                   
                    <s:Transition fromState="hovered" toState="normal">
                        <s:Parallel>
                            <s:Fade target="{backgroundRollover}" alphaFrom="1" alphaTo="0" duration="0"/>
                        </s:Parallel>
                    </s:Transition>
                </s:transitions>
               
                <!-- background fill -->
                <s:Rect id="background" width="100%" height="100%" alpha="0">

                    <s:fill>
                         <s:SolidColor color="#FFFFFF"/>
                     </s:fill>
                </s:Rect>
               
                <!-- background rollover fill -->
                <s:BorderContainer id="backgroundRollover" width="100%" height="76" styleName="borderContainerLight" cornerRadius="0" alpha="0" borderAlpha="0"/>
               
                <!-- border bottom-->   
                <controls:HDivLine bottom="0"/>

                <!-- content -->
                <s:HGroup id="row" width="100%" height="100%" gap="12" paddingLeft="12" paddingRight="12" verticalAlign="middle" horizontalAlign="center">
                    <!-- place -->
                    <s:Group>
                        <s:layout>
                            <s:VerticalLayout horizontalAlign="center"/>
                        </s:layout>
                        <s:Label id="position" text="{data.index}" styleName="small light" width="20" textAlign="center"/>
                    </s:Group>
                   
                    <!-- box art -->
                    <s:Group id="boxArtGroup" >       
                        <controls:ImageLoader id="boxart" source="{data.boxArtPath}" width="64" height="64" click="btnQuickView_clickHandler(event)"/>
                    </s:Group>
                   
                    <!-- title and esrb rating -->       
                    <s:Group width="60%" minWidth="160">
                        <s:layout><s:VerticalLayout horizontalAlign="left"/></s:layout>
                        <s:Label id="title" text="{data.title}" styleName="large bold" width="100%"/>
                        <s:Label text="ESRB: {data.esrbRating}" styleName="small light"/>
                    </s:Group>
                   
                    <!-- platform icon -->
                    <s:Group width="10%" minWidth="82">
                        <s:layout>
                            <s:HorizontalLayout horizontalAlign="center" />
                        </s:layout>
                        <s:BitmapImage source="{PlatformIcons.getIcon(data.platform)}"/>
                    </s:Group>
                   
                    <!-- release date -->
                    <s:Group width="20%" minWidth="74">
                        <s:layout><s:VerticalLayout horizontalAlign="center"/></s:layout>
                        <s:Label text="{data.releaseDate}" styleName="bold"/>
                        <s:Label text="release date" styleName="small light"/>
                    </s:Group>
                   
                    <!-- rating average -->
                    <s:Group width="10%" minWidth="74">
                        <s:layout><s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/></s:layout>
                        <controls:RatingBoxSmall width="48" height="48" ratingType="RATING" ratingNumber="{data.memberRating}"/>
                    </s:Group>
                   
                </s:HGroup>
            </s:ItemRenderer>

            • 3. Re: Item Renderer Display Optimization
              Flex harUI Adobe Employee

              Use the performance profiler.

              • 4. Re: Item Renderer Display Optimization
                CleanCoder Level 2

                At first glance I count 1 BorderContainer, 7 Groups, and about 8-10 additional UIComponent subclasses. Thats alot going on for a MXML itemRenderer. The sad truth seems to be that MXML is just not effiecient, nor does it promote effiecient design. It seems Adobe already ditched MXML completely for its Mobile skins in favor of pure AS3, if that is any clue.

                • 5. Re: Item Renderer Display Optimization
                  EvyatarBH

                  I would add that normally if a group contains a single element, you probably don't need a group.

                  Just place the element one level up and delete redundant groups.

                   

                  In addition, you can try commenting-out the transitions and see if there's any significant improvement.

                  • 6. Re: Item Renderer Display Optimization
                    anynick Level 1

                    Ugh, as unfortunate as it is after some basic testing this appears to be the correct answer:

                     

                    "The sad truth seems to be that MXML is just not effiecient, nor does it promote effiecient design."

                     

                     

                    The mxml layouts are so nice and saved me SOOO MUCH time. I can't believe I have to return to the x,y pixel positioning time sink that is pure AS3 in order to get something to render smoothly. Thanks everyone for the input.

                    • 7. Re: Item Renderer Display Optimization
                      Shongrunden Adobe Employee

                      Where are you seeing this performance problem, on a desktop computer or a mobile device?

                       

                      You might find Evtim's part of this presentation useful: http://flexponential.com/2011/04/20/flex-performance-tips-tricks/

                       

                      He walks through some ways of optimizing MXML item renderers.  Off the top of my head a few simple things you might be able to do here:

                       

                      1. Move the alpha="0" from the background Rect onto the SolidColor fill

                      2. Replace your s:BorderContainer with a s:Rect, or even get rid of it altogether and instead use a stroke on the background Rect

                      3. Replace HDivLine with a s:Line?

                      4. Use BitmapImage instead of controls:ImageLoader?

                       

                      If you make these simple changes does it perform better?

                      • 8. Re: Item Renderer Display Optimization
                        anynick Level 1

                        Thanks very much for the reply Shongunden. I have not had a chance to give your suggestions try yet but I will be sure to report the results when I do.