3 Replies Latest reply on Jun 28, 2010 8:54 AM by cyber0897

    how do i set the rolloutcolor fade on a spark list item?

    cyber0897 Level 1

      hey guys... so easy question... i just cant seem to figure it out.. lol,

      i set the rollovercolor for the spark list item.. but i need that color to fade out when i roll off of it.. if that makes any sense.

       

       

      the code i have right now is as follows

       

      <s:List id="storyList" dataProvider="{filteredStoryDataArr}" width="100%" height="100%" y="60" rollOverColor="#0184C7"
           borderVisible="true" borderColor="#ffffff" selectionColor="#0184C7" buttonMode="true" useHandCursor="true">
           ...
           .....
           .......
      </s:List>
      

       

       

      thanks so much in advance!!!

        • 1. Re: how do i set the rolloutcolor fade on a spark list item?
          Peter deHaan Level 4

          Just a guess, but I think you'll have to create a custom item renderer and handle your own background fill logic. Then just use some states and transitions and you can tweak the behavior to what you want.

           

          Something like this may help get you started:

           

          <?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="false">
              <s:states>
                  <s:State name="normal" />
                  <s:State name="hovered" />
                  <s:State name="selected" />
              </s:states>
              <s:transitions>
                  <s:Transition fromState="normal" toState="hovered" autoReverse="true">
                      <s:Fade target="{bgRect}" duration="600" />
                  </s:Transition>
              </s:transitions>
          
              <s:Rect id="bgRect" includeIn="hovered,selected" left="0" right="0" top="0" bottom="0">
                  <s:fill>
                      <s:SolidColor color="{getStyle('rollOverColor')}" color.selected="{getStyle('selectionColor')}" />
                  </s:fill>
              </s:Rect>
          
              <s:Label id="labelDisplay" left="5" right="5" top="5" bottom="4" />
          
          </s:ItemRenderer>
           
           
          
          Peter

          • 2. Re: how do i set the rolloutcolor fade on a spark list item?
            cyber0897 Level 1

            umm... thats a litle close... but not exactly what i need... i tried that even after modifying it a little, and i still couldnt get it working....

            all i need it to do is when you roll off the item(so going from hovered state to normal), i need to background color to fade...

            so for example when you scroll over the application it looks like a trail... if that makes any sence...

             

            the list code i have is as follows

             

            <s:List id="storyList" dataProvider="{filteredStoryDataArr}" click="storySelected();" width="100%" height="100%" y="60" rollOverColor="#0184C7"
                      borderVisible="true" borderColor="#ffffff" selectionColor="#0184C7" buttonMode="true" useHandCursor="true">
                 <s:layout>
                      <s:VerticalLayout gap="1" useVirtualLayout="true" />
                 </s:layout>
                 <s:itemRenderer>
                      <fx:Component>
                           <s:ItemRenderer width="100%" height="40">
                                <s:states>
                                     <s:State name="normal" />
                                     <s:State name="hovered" />
                                     <s:State name="selected" />
                                </s:states>
                                
                                <fx:Script>
                                     <![CDATA[
                                          override public function set data(value:Object):void {
                                               super.data = value;
                      
                                               if (data == null) // a renderer's data is set to null when it goes out of view
                                                    return;
                      
                                               dateCreated.text = data.DateCreated;
                                               storyLabel.text = data.DisplayHeading;
                                               
                                               if((data.ApprovedBy > 0) && (data.DateApproved != "")){
                                                    trace("adding approved story");
                                                    storyLabel.setStyle("color", 0x333333);
                                               }
                                               else if((data.ApprovedBy == -1) && (data.DateApproved == "")){
                                                    trace("adding rejected item");
                                                    storyLabel.setStyle("color", 0x0184c7);
                                                    //rejectedStoryList.addItem(story);
                                               }
                                               else if((data.ApprovedBy == 0) || (isNaN(data.ApprovedBy) == true)){
                                                    if(data.DateApproved == ""){
                                                         trace("adding pending story");
                                                         storyLabel.setStyle("color", 0x50c8e8);
                                                         //pendingStoryList.addItem(story);
                                                    }
                                               }
                                               
                                               if(outerDocument.permission == "writer")
                                                    delBtn.enabled = false;
            
                                          }
                                     ]]>
                                </fx:Script>
                      
                                <s:transitions>
                                     <mx:Transition fromState="normal" toState="hovered">
                                          <s:Animate target="{storyLabel}" duration="200">
                                               <s:SimpleMotionPath property="x" />
                                          </s:Animate>
                                     </mx:Transition>
                                     <mx:Transition fromState="hovered" toState="normal">
                                          <s:Animate target="{storyLabel}" duration="200" >
                                               <s:SimpleMotionPath property="x" />
                                          </s:Animate>
                                     </mx:Transition>
                                </s:transitions>
                                
                                
                                <s:VGroup width="100%">
                                     <s:Group width="100%" height="35">
                                          <s:Label id="dateCreated" color="#333333" color.hovered="#ffffff" color.selected="#ffffff" left="20" verticalCenter="2" fontFamily="DINOT-Regular" />
                                          <s:Label id="storyLabel" color="#333333" color.hovered="#ffffff" color.selected="#ffffff" fontSize="15" fontWeight="bold" x="100" x.hovered="125" x.selected="125" verticalCenter="2" 
                                                     textAlign="left" fontFamily="DINOT-Bold" />
                                          <mx:LinkButton id="delBtn" label="Delete" fontSize="10" color="#333333" color.hovered="#ffffff" color.selected="#ffffff" visible="true" y="8" x="650" skin="{null}" rollOverColor="#000000"
                                                            click="outerDocument.deleteStory()" />
                                     </s:Group>
                                     <mx:HRule width="100%" left="20" top="30"/>
                                </s:VGroup>
                                     
                                
                           </s:ItemRenderer>
                      </fx:Component>
                 </s:itemRenderer>
            </s:List>
            
            • 3. Re: how do i set the rolloutcolor fade on a spark list item?
              cyber0897 Level 1

              I also tried to modify your code, and changed all the selected ones to normal... and that didne help either... i couldnt get the desired effect... is it because i already have another animation going with the same state change???