2 Replies Latest reply on Jul 12, 2010 9:50 PM by sugarsonic

    Dispatched event when a LONG list of custom item renderers has completely rendered?

    sugarsonic

      I have a custom <s:List> Component:

       

      <local:ThumbnailList id="list" top="0" bottom="0" left="0" right="0" dataProvider="{imageFiles}"  allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true" />


      That extends sparks List and uses the itemRendererFunction to create the custom ItemRenderer:

       

      public class ThumbnailList extends List
      {

           public function ThumbnailList()
           {
                super();
                itemRendererFunction = getItemRenderer;

           }

       

           protected function getItemRenderer( data : Object ):ClassFactory
           {
                var clz : Class = DefaultItemRenderer;

                clz = ThumbnailRendererImpl;

                // *** does not work: cannot add event listener to ItemRenderer

                // clz.addEventListener( "renderComplete", function complete ( event : Event ) : void { Alert.show ('render complete...'); } );
                return new ClassFactory(clz);
           }

       

      }

       

      And my custom ItemRenderer:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer dataChange="dataChangeHandler(event)" xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" >

       

           <fx:Script>
           <![CDATA

           protected function dataChangeHandler(event:FlexEvent): void  {
                img.soruce = data as String;

           }

           private function loadComplete( event : Event ) : void  {
                dispatchEvent( new Event( "renderComplete" ) );
           }
           ]]>
          </fx:Script>
          <s:Graphic>
              <s:Group id="group" >
                  <s:layout><s:HorizontalLayout /></s:layout>
                  <mx:Image id="img" horizontalCenter="0" verticalCenter="0" complete="loadComplete(event);" />   
              </s:Group>
          </s:Graphic>
      </s:ItemRenderer>

       

      The dataprovider for this list is very large and the thumbnails that are being created are also very large... which means

      the List takes a long time to render completely.  Once the List is completely rendered, it functions nicely.  Now since it

      takes a long time to render, I want to add a popup or progress bar to show the user that the list is being rendered.  So,

      my question:  is there a way to tell when ALL the custom thumbnail renderers have all finished loading their respective

      image data?

       

      I have tried everything I can think of, and am unable to move forward on this project until I find a resolution.

       

      Thanks!

        • 1. Re: Dispatched event when a LONG list of custom item renderers has completely rendered?
          james.lyon Level 1

          You can compare the number of events dispatched to the length of the dataProvider.

           

           

          This could be included in your custom List component to then dispatch progress events and a final complete event...

           

          OR

          You could handle all of that from outside the List component in your app.  Just set the events to bubble from the ItemRenderer up and out

           

          dispatchEvent( new Event( "renderComplete", true ) );
          • 2. Re: Dispatched event when a LONG list of custom item renderers has completely rendered?
            sugarsonic Level 1

            Yep... that did the trick... thanks a ton!  Here is the final solution for others who might run into this same issue:

             

            public class ThumbnailList extends List
            {

                 public function ThumbnailList()
                  {
                      super();
                      itemRendererFunction =  getItemRenderer;

                      addEventListener( 'rendered', renderedHandler );

                 }

             

                 public function renderedHandler( event : MyEvent ) : void
                 {
                         var totalRendered : Number = parent.numRendered;  // held in public parent field
                         var n : int = dataProvider.length;  // total number of image renderers

                                 parent.numRendered = totalRendered +  + event.data as Number;  // add one to parent total
                                 if ( n == totalRendered )
                                 {
                                       Alert.show ('all images loaded...');  // or remove popup window, etc
                                 }
                          }

             

            }

             

            <?xml version="1.0"  encoding="utf-8"?>
            <s:ItemRenderer  dataChange="dataChangeHandler(event)" xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:mx="library://ns.adobe.com/flex/mx"  xmlns:s="library://ns.adobe.com/flex/spark" >

             

                 <fx:Script>
                 <![CDATA

                 protected function  dataChangeHandler(event:FlexEvent): void  {
                      img.soruce =  data as String;

                 }

                 private function loadComplete( event :  Event ) : void  {

                      dispatchEvent( new MyCustomEvent( 1, 'rendered', true ) );
                 }
                 ]]>
                </fx:Script>
                 <s:Graphic>
                    <s:Group id="group" >
                         <s:layout><s:HorizontalLayout /></s:layout>
                         <mx:Image id="img" horizontalCenter="0" verticalCenter="0" complete="loadComplete(event);" />    
                    </s:Group>
                </s:Graphic>
            </s:ItemRenderer>

             

             

            The renderedHandler function is a bit kludgey, and is done differently in my final app... I changed it here for

            clarity.  Make adjustments as necessary to your code base.

             

            Hope this helps someone out.