3 Replies Latest reply on Dec 14, 2011 12:47 AM by rjoshicool

    Scroll issue with Flex Spark List and ItemRenderer

    rjoshicool Level 2

      I have an issue with the Flex Spark List component when an Item renderer is used to display content in it. The issue is that, I set an image's visibility depending on certain condition for the item renderers in the list. When I scroll the list the image's visibility is not set correctly. It starts showing up from some components where its visibility was set to false and doesn't shows up for some where its visibility was true. I set the visibility in commitProperties method as I get the required details in that method. I understand this could be because of the fact that Flex spark List reuses the item renderers instead of creating separate for all.

      Any idea or workaround for this?

       

      Here is the code:

       

       

      TestList.mxml


      <?xml version="1.0" encoding="utf-8"?>
      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                             xmlns:s="library://ns.adobe.com/flex/spark" 
                             xmlns:mx="library://ns.adobe.com/flex/mx"
                             width="500" height="500"
                             creationComplete="windowedapplication1_creationCompleteHandler(event)">
          <fx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.controls.Alert;
                  import mx.events.FlexEvent;
                  
                  private var xmlLoader:URLLoader = new URLLoader();
                  private var xml:XML;
                  private var arr:Array = [];
                  [Bindable]
                  private var arrColl:ArrayCollection;
                  
                  protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
                  {
                      // TODO Auto-generated method stub
                      xmlLoader.addEventListener(Event.COMPLETE, onLoadComplete);
                      xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, onLoadError);
                      xmlLoader.load(new URLRequest("items.xml"));
                  }
                  
                  protected function onLoadComplete(e:Event):void
                  {
                      xml = new XML(e.target.data);
                      
                      for each( var item:XML in xml.item)
                      {
                          arr.push( { itemId:item.@itemId, title:item.@title } );
                      }
                      
                      arrColl = new ArrayCollection(arr);
                  }
                  
                  protected function onLoadError(e:IOErrorEvent):void
                  {
                      Alert.show("Error!");
                  }
                  
                  
              ]]>
          </fx:Script>
          
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          
          <s:VGroup width="100%" height="100%" top="20" bottom="20" left="20" right="20">
              <s:List id="itemList" width="100%" height="100%" itemRenderer="ListRenderer" dataProvider="{arrColl}" />
          </s:VGroup>
          
      </s:WindowedApplication>
      

       

       

      ListRenderer.mxml

       

      <?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="true">
      
          <fx:Script>
              <![CDATA[
      
                  override public function get data():Object
                  {
                      // TODO Auto Generated method stub
                      return super.data;
                  }
      
                  override public function set data(value:Object):void
                  {
                      // TODO Auto Generated method stub
                      super.data = value;
                      lbl.text = data.title;
                  }
      
                  override protected function commitProperties():void
                  {
                      // TODO Auto Generated method stub
                      super.commitProperties();
      
                      if(data.itemId == 4 || data.itemId == 9)
                      {
                          img.visible = true;
                      }
                      else
                      {
                          img.visible = false;
                      }
                  }
      
              ]]>
          </fx:Script>
      
          <s:HGroup width="100%" height="50" verticalAlign="middle">
              <s:Image id="img" source="@Embed('promotion.png')" />
              <s:Label id="lbl" width="100%"/>
          </s:HGroup>
      
      </s:ItemRenderer>
      

       

       

      items.xml

       

      <?xml version="1.0" encoding="utf-8" ?>
      <data>
          <item itemId="1" title="Some Name 1" />
          <item itemId="2" title="Some Name 2" />
          <item itemId="3" title="Some Name 3" />
          <item itemId="4" title="Some Name 4" />
          <item itemId="5" title="Some Name 5" />
          <item itemId="6" title="Some Name 6" />
          <item itemId="7" title="Some Name 7" />
          <item itemId="8" title="Some Name 8" />
          <item itemId="9" title="Some Name 9" />
          <item itemId="10" title="Some Name 10" />
          <item itemId="11" title="Some Name 11" />
          <item itemId="12" title="Some Name 12" />
          <item itemId="13" title="Some Name 13" />
          <item itemId="14" title="Some Name 14" />
          <item itemId="15" title="Some Name 15" />
          <item itemId="16" title="Some Name 16" />
          <item itemId="17" title="Some Name 17" />
          <item itemId="18" title="Some Name 18" />
          <item itemId="19" title="Some Name 19" />
          <item itemId="20" title="Some Name 20" />
      </data>
      
        • 1. Re: Scroll issue with Flex Spark List and ItemRenderer
          rjoshicool Level 2

          If I update the visibility on creationComplete instead of commitProperties, the issue is still there.

          • 2. Re: Scroll issue with Flex Spark List and ItemRenderer
            Flex harUI Adobe Employee

            You definitely do not want to use creationComplete.  It only gets called once and therefore isn’t helpful with recycling.  I think you might just need a call to invalidateProperties in your data setter override.

            • 3. Re: Scroll issue with Flex Spark List and ItemRenderer
              rjoshicool Level 2

              I checked this but it doesn't works well. I made a bit modifications to the code and show an image when one of the itemrenderers is clicked. But when I scroll the list, I see it visible on other item renderer also even though it was not selected. Below is the updated itemrenderer.mxml

               

              <?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="true"
                              click="itemrenderer1_clickHandler(event)">
              
                  <fx:Script>
                      <![CDATA[
              
                          private var isSelected:Boolean = false;
              
                          override public function get data():Object
                          {
                              // TODO Auto Generated method stub
                              return super.data;
                          }
              
                          override public function set data(value:Object):void
                          {
                              // TODO Auto Generated method stub
                              super.data = value;
                              lbl.text = data.title;
              
                              /*if(this.isSelected)
                              {
                                  img.visible = true;
                              }
                              else
                              {
                                  img.visible = false;
                              }*/
              
                              //invalidateProperties();
                          }
              
                          override protected function commitProperties():void
                          {
                              // TODO Auto Generated method stub
                              super.commitProperties();
                          }
              
                          protected function itemrenderer1_clickHandler(event:MouseEvent):void
                          {
                              // TODO Auto-generated method stub
                              this.isSelected = true;
                              img.visible = true;
                          }
              
                      ]]>
                  </fx:Script>
              
                  <s:HGroup width="100%" height="50" verticalAlign="middle">
                      <s:Image id="img" source="@Embed('promotion.png')" visible="false" />
                      <s:Label id="lbl" width="100%"/>
                  </s:HGroup>
              
              </s:ItemRenderer>