6 Replies Latest reply: Mar 16, 2010 2:04 PM by bfolder22 RSS

    Spark ItemRenderer and removedEffect

    bfolder22

      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?

        • 1. Re: Spark ItemRenderer and removedEffect
          David_F57 Community Member

          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.

          • 2. Re: Spark ItemRenderer and removedEffect
            Shongrunden Adobe Employee

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


            • 3. Re: Spark ItemRenderer and removedEffect
              bfolder22 Community Member

              Thanks for your replies,

               

              when setting useVirtualLayout to true, the error no longer occurs on startup. However, if I´m trying to remove an object from the list, it´s throwing the exception again.

               

              @David

              removedEffect on the list does what it should do, it plays the effect when the list itself gets removed -> removeElement(list).

              • 4. Re: Spark ItemRenderer and removedEffect
                rfrishbe Community Member

                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

                • 5. Re: Spark ItemRenderer and removedEffect
                  radikalFish

                  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>

                  • 6. Re: Spark ItemRenderer and removedEffect
                    bfolder22 Community Member

                    Thanks for your workaround radikalFish!

                     

                    Anybody knows if there´s a chance that there will be better hook to implement those kind of effects in later builds? Is there anything planned?