2 Replies Latest reply on Mar 11, 2013 10:05 PM by Fredvb

    poor performance horizontal List (TileLayout) with custom ItemRenderer containing a vertical Scroll

    Fredvb

      I'm having performance issues with a mobile application layout approach that consists of the following.

       

      Pseudo code: (based on http://blogs.adobe.com/jasonsj/2011/11/mobile-list-paging-with-page-indicator-skin.html )

       

      VIEW:

      <View>

           <script>

                function getItemRenderer(data):IFactory {

                     return new ClassFactory(data.itemClass);

                }

           </script>

           <List id="pageList" width="100%" height="100% itemRendererFunction="getItemRenderer">

          

                <layout>

                     <TileLayout numRows="1" width="pageList.width" height="pageList.height" />

                </layout>

           </List>

      </View>

       

      ItemRenderer example:

      <Scrollerwidth="100%"

                height="100%">

          

           <VGroup>

          

                    <s:Label fontWeight="bold" text="Name 1:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 2:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 3:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 4:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 5:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 6:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 7:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 8:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 9:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 10:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 11:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 12:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 13:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 14:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 15:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 16:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 17:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 18:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 19:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 20:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 21:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 22:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 23:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 24:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 25:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 26:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 27:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 28:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 29:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                     <s:Label fontWeight="bold" text="Name 30:" />

                           <s:HGroup paddingLeft="50" width="100%">

                           <s:TextInput width="100%"  />

                      </s:HGroup>

                </VGroup>

      </Scroller>

       

      Basically, I have a lot of input fields, eventually also date choosers, and textareas in each of those item renderers.

       

      Is there a reason this is not performing well ?

      Is there something I can do to improve the performance ?

        • 1. Re: poor performance horizontal List (TileLayout) with custom ItemRenderer containing a vertical Scroll
          Flex harUI Adobe Employee

          That is just way too many controls.  And how many of these renderers are on screen at one time?

           

          You might want to consider having an edit mode per renderer so you only have to have TextInputs for one renderer but not all of them.

           

          For sure, instead of using Hgroup with padding, use a custom layout or custom component.

           

          And why use TileLayout for only one row?  Use HorizontalLayout or VerticalLayout instead.

          1 person found this helpful
          • 2. Re: poor performance horizontal List (TileLayout) with custom ItemRenderer containing a vertical Scroll
            Fredvb Level 1

            Thanks for the hints.

             

            Regarding TileLayout vs HorizontalLayout, I haven't seen much difference in performance.

             

            But I did manage to make everything go faster **.

              1st: not using the StageText on the TextInput's (changed that).

              2nd: there was a font using CFF on the Label fields, which wasn't supported (changed that).

            I'm not sure if those are what made the diff, but I'm happier!

            **: Might be almost viable like this.

             

            In all, I'm going to have about 7 custom item renderers in the List, but only 1 is visible at the time on screen (taking the whole visible area of the List). Some of the pages (i call them pages in such a case) will have some components that will be more elaborate, like permitting someone to do simple drawing within a region.

            Yes, I'm imagining that the List component still will have them in memory and maybe recycle them if he's smart, thus making it heavy whenever it creates them. Would be interesting to see if I can optmize the creation of the itemrenderer instances. I'm still not that keen about using this approach of using a List to support such a user experience.

            It  would have loved it if the ViewNagivator could better support sliding between Views, but I understand it would require the ViewNavigator to know which View will be the next View, etc.. Maybe something like a ListNavigatorView or something like that

            Details for now.

             

            Regarding using a Edit mode, I'll keep that in mind and see if it makes sense in this app and how the user experience will be with such a mode.

             

            Regarding using the HGroup for padding of the TextInput vs using a custom layout or custom component. You probably have a point. I'm kind of new to the Spark world, been using MX since Flex 2 and kind of got scared of the Spark world... No I'm diving head first. Thus, thanks for the hint on that. I'll digg and find some docs about the details on that!

             

            Thanks again!