13 Replies Latest reply on Jun 9, 2010 10:28 AM by Shongrunden

    Scrolling in tilelayout causes re-align of items

    dan.biran Level 1

      I have a tilelist that is a part of a project that creates a component thats used in an application.

       

      The list renders thumbnails and displays some information.

       

      When I build a standalone test application with this control all in one project I have no issues.

       

      When I create the control as a seperate project and then import it into my new app project I encounter a problem.

       

      The first item gets swapped with some of the items farther down when I scroll quickly. If I repeat the action it undoes it. However, if i do a different quick scroll to a different location the items displayed are never in the correct index again.

       

      What could be causing this? I dont use a limit on the column count, I cannot force all items to render as I have 10k items and memory would kill the browser.

        • 1. Re: Scrolling in tilelayout causes re-align of items
          Shongrunden Adobe Employee

          Does your item renderer have a handler on the creationComplete event?

          • 2. Re: Scrolling in tilelayout causes re-align of items
            dan.biran Level 1

            Yes it appears theres some problem with using the creation complete handler to set data correctly...

             

            What do I need to do to work around this issue? I'm trying to cache image data and load it appropriately when the objects are brought back into view.

            • 3. Re: Scrolling in tilelayout causes re-align of items
              Shongrunden Adobe Employee

              You shouldn't listen to the creationComplete event of an ItemRenderer.  This is because List uses virtual layout by default and will only create roughly the number of renderers needed to show items in view and reuses those renderers as new items come into view.  So if you have a List with 10,000 items, but only 10 are in view at a time then the List only creates roughly 10 renderers rather than 10,000 (which as you know would likely kill the browser).

               

              Instead you should key off of the dataChange event or equivalently override the data setter.

               

              Take a look at these two posts for some example renderers:

               

              http://flexponential.com/2010/01/10/caching-images-loaded-from-a-spark-item-renderer/

               

              http://flexponential.com/2009/11/11/binding-warnings-when-using-object-in-a-list-dataprovi der/

              • 4. Re: Scrolling in tilelayout causes re-align of items
                dan.biran Level 1

                This seems to be the issue but now my items cannot drag. I am encapsulating the element in a bordercontainer and can reproduce the issue in those two samples if i change the comboboxes to lists, change the item renderer to use a bordercontainer, and enable drag and drop on the list. When I go to drag the item the application crashes on the set data when accessing the pic property of an item that is off screen is that because the renderer does not exist for that element? if I use a group instead of bordercontainer it works. Any idea how to resolve that? here's a snippet from the mxml for the renderer

                 

                <s:BorderContainer id="picBorder" x="0" y="0"
                                       alpha.normal="1" alpha.start="0" alpha.displayed="1"
                                       width="{ts.thumbSize}" height="{ts.thumbSize}"
                                       cornerRadius="20" borderWeight="3">
                       
                        <s:VGroup top="9" left="9" right="15" bottom="9">
                           
                            <mx1:Image id="pic" horizontalAlign="center"
                                       toolTip="{itemToolTip}"
                                       alpha.normal="1" alpha.start="0" alpha.displayed="1"
                                       width="90%" height="80%"/>       
                            <s:Label id="TxtPhotoTitle" width="100%" height="20%"/>
                        </s:VGroup>       
                       
                       
                    </s:BorderContainer>

                • 5. Re: Scrolling in tilelayout causes re-align of items
                  Shongrunden Adobe Employee

                  Sometimes the logic behind virtual layout sets the data property of the renderer to null.  You might want to try guarding against that before any other logic, for example:

                  override public function set data(value:Object):void {
                      super.data = value;
                      if (data == null)
                          return;

                   

                      ...
                  }

                  • 6. Re: Scrolling in tilelayout causes re-align of items
                    dan.biran Level 1

                    I have that protection but things like the UI objects in the layout specifically pic is null at that point but data is not.

                    • 7. Re: Scrolling in tilelayout causes re-align of items
                      Shongrunden Adobe Employee

                      Hmm, it's bizarre that it works when replacing your BorderContainer with a Group.  Any chance you could try to create a small application that demonstrates the issue?

                      • 9. Re: Scrolling in tilelayout causes re-align of items
                        flashflan_2000 Level 1

                        Dan, I can repro the behavior that you pointed out with the BorderContainer.

                        • 10. Re: Scrolling in tilelayout causes re-align of items
                          Shongrunden Adobe Employee

                          Looks like a bug.  Here is a slightly simpler case:

                          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                         xmlns:s="library://ns.adobe.com/flex/spark">
                             
                              <s:List dragEnabled="true">
                                  <s:dataProvider>
                                      <s:ArrayCollection>
                                          <fx:String>one</fx:String>
                                          <fx:String>two</fx:String>
                                      </s:ArrayCollection>
                                  </s:dataProvider>
                                  <s:itemRenderer>
                                      <fx:Component>
                                          <s:ItemRenderer>
                                              <fx:Script>
                                                  <![CDATA[
                                                      override public function set data(value:Object):void {
                                                          super.data = value;
                                                          if (data == null)
                                                              return;
                                                         
                                                          title.text = data as String;
                                                      }
                                                  ]]>
                                              </fx:Script>
                                              <s:SkinnableContainer>
                                                  <s:Label id="title" />
                                              </s:SkinnableContainer>
                                          </s:ItemRenderer>
                                      </fx:Component>
                                  </s:itemRenderer>
                              </s:List>
                          </s:Application>

                           

                          And here is the workaround:

                          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                         xmlns:s="library://ns.adobe.com/flex/spark">
                             
                              <s:List dragEnabled="true">
                                  <s:dataProvider>
                                      <s:ArrayCollection>
                                          <fx:String>one</fx:String>
                                          <fx:String>two</fx:String>
                                      </s:ArrayCollection>
                                  </s:dataProvider>
                                  <s:itemRenderer>
                                      <fx:Component>
                                          <s:ItemRenderer creationComplete="setData()">
                                              <fx:Script>
                                                  <![CDATA[
                                                      override public function set data(value:Object):void {
                                                          super.data = value;
                                                          if (data == null)
                                                              return;
                                                         
                                                          if (title != null)
                                                              setData();
                                                      }
                                                     
                                                      private function setData():void {
                                                          title.text = data as String;
                                                      }
                                                  ]]>
                                              </fx:Script>
                                              <s:SkinnableContainer>
                                                  <s:Label id="title" />
                                              </s:SkinnableContainer>
                                          </s:ItemRenderer>
                                      </fx:Component>
                                  </s:itemRenderer>
                              </s:List>
                          </s:Application>
                          • 11. Re: Scrolling in tilelayout causes re-align of items
                            Shongrunden Adobe Employee

                            Could you please file a bug for this at http://bugs.adobe.com/flex and post the link here?  If not let me know and I'll file it for you.

                            • 12. Re: Scrolling in tilelayout causes re-align of items
                              dan.biran Level 1

                              Can you please file the bug for me? I have been re-assigned to another project while that one is on hold.

                               

                              Thanks,

                              Dan