Skip navigation
bfolder22
Currently Being Moderated

Spark ItemRenderer and removedEffect

Mar 13, 2010 3:25 PM

I want to fade Items in/out when adding/removing from a spark list. Since there is no itemsChangeEffect on a spark list, I´m trying to assign the addedEffect/removedEffect on the ItemRenderer of the List. AddedEffect works great but when I use a remove effect, flex is throwing this error:

 

"Error: DataGroup manages its own display objects, and you should not call addChildAt() directly. To add, remove, or swap items, modify the dataProvider."

 

That pretty much sounds like I shouldn´t do it that way .

 

Code looks like this:

         

<s:List id="list">

          <s:itemRenderer>

               <fx:Component>

                    <s:ItemRenderer removedEffect="{remove}" alpha="0">                    

                         <fx:Declarations>

                              <s:Fade id="remove" duration="250" alphaTo="0" />

                         </fx:Declarations>                                   

                         <s:Label text="{data}" color="red" />

                    </s:ItemRenderer>

               </fx:Component>

          </s:itemRenderer>

          <s:ArrayCollection>

               <fx:String>TestString</fx:String>

               <fx:String>TestString</fx:String>

               <fx:String>TestString</fx:String>

               <fx:String>TestString</fx:String>

               <fx:String>TestString</fx:String>

               <fx:String>TestString</fx:String>

               <fx:String>TestString</fx:String>

          </s:ArrayCollection>

</s:List>

 

Is there another way to achieve these effects?

 
Replies
  • Currently Being Moderated
    Mar 13, 2010 4:08 PM   in reply to bfolder22

    Hi,

     

    Have you tried placing the removedEffect on the list itself, This effect is triggered by a parent container so if it is in the item-renderer its going to cause issues(I think).

     

    <s:List removedEffect="{remove}">

    ....

    </s:List>

     

    Maybe after the weekend Chet can chime in he's the effects guru.

     

     

    David.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 13, 2010 10:12 PM   in reply to David_F57

    Does this happen when you set useVirtualLayout=false on the List?


     
    |
    Mark as:
  • Currently Being Moderated
    Mar 14, 2010 12:50 PM   in reply to bfolder22

    The current effects were not made to work with data components.  Data effects is something that we'll look at adding in the future.  I think if you need this, your best option would be subclass DataGroup and work off of that.  I haven't looked too closely, but itemAdded() and itemRemoved() might be good methods to start with.

     

    -Ryan

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2010 5:29 AM   in reply to bfolder22

    a workaround (perhaps dirty ?) would be to play a remove effect on the list.dataGroup item and remove corresponding dataProvider item when the effect has finished.

     

    here is an example which works with SDK 4.0.0.13951

     

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx">
         <fx:Style>
            
         </fx:Style>
         <fx:Script>
             <![CDATA[
                 private var removeIndex:uint;
                
                 protected function addListItem():void {
                
                     var i:uint = Math.floor(Math.random()*list.dataProvider.length);
                     list.dataProvider.addItemAt("new Item", i);
                 }
                 protected function removeListItem():void {
                     removeIndex = Math.floor(Math.random()*list.dataProvider.length);
                     var listTarget:DisplayObject = list.dataGroup.getChildAt(removeIndex);
                     removeEffect.target = listTarget;
                     removeEffect.play();
                 }
             ]]>
         </fx:Script>
         <fx:Declarations>
             <s:Fade id="removeEffect" duration="1000" alphaTo="0" effectEnd="{list.dataProvider.removeItemAt(removeIndex)}"/>
         </fx:Declarations>
         <s:List id="list" useVirtualLayout="false" horizontalCenter="0" verticalCenter="0">
             <s:itemRenderer>
                 <fx:Component>
                     <s:ItemRenderer addedEffect="{addEffect}" alpha="0">                   
                         <fx:Declarations>
                             <s:Fade id="addEffect" duration="1000" alphaFrom="0" alphaTo="1" />
                         </fx:Declarations>                                 
                         <s:Label fontSize="15" text="{data}" color="red" />
                     </s:ItemRenderer>
                 </fx:Component>
             </s:itemRenderer>
             <s:ArrayCollection>
                 <fx:String>TestString</fx:String>
                 <fx:String>TestString</fx:String>
                 <fx:String>TestString</fx:String>
                 <fx:String>TestString</fx:String>
                 <fx:String>TestString</fx:String>
                 <fx:String>TestString</fx:String>
                 <fx:String>TestString</fx:String>
             </s:ArrayCollection>
            
         </s:List>

     

        <s:HGroup id="container" horizontalCenter="0" bottom="25" gap="25">
             <s:Button id="removeBtn" label="removeListItem" click="{removeListItem()}"/>
             <s:Button id="addBtn" label="addListItem" click="{addListItem()}"/>
         </s:HGroup>
    </s:Application>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points