rollover stops working

I have a small problem with rollover effects. First time after loading everything's fine. But after clicking the button twice (= going to studyState and then coming back to Sate1) the rollover effect on the bordercontainer stops working. I don't have a clue what the reason could be. Please give me a hint.

<?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" minWidth="955" minHeight="600">
<fx:Declarations>
    <s:AnimateColor id="animateColorON" colorPropertyName="backgroundColor" colorFrom="#FFFFFF" colorTo="#e7eae4" duration="300"/>
    <s:AnimateColor id="animateColorOFF" colorPropertyName="backgroundColor" colorFrom="#e7eae4" colorTo="#FFFFFF" duration="600"/>
</fx:Declarations>

<s:transitions>
    <s:Transition id="t1" autoReverse="true">
        <s:CrossFade
            target="{this}" 
            duration="1500" />
    </s:T开发者_开发技巧ransition>
</s:transitions>
<s:states>
    <s:State name="State1" />
    <s:State name="studyState" />
</s:states>

<s:VGroup id="globalGroup" includeIn="State1" width="100%">
    <s:Button label="State1 to studyState" click="this.currentState = 'studyState'" />
    <s:BorderContainer width="100%" height="30" cornerRadius="4" borderVisible="false" buttonMode="true" rollOverEffect="animateColorON" rollOutEffect="animateColorOFF">
        <s:HGroup width="100%" height="30" verticalAlign="middle" paddingLeft="5" paddingRight="5">
            <s:Label id="p_dob_label" text="text" width="55%"/>
            <s:Label id="p_dob_value" text="text" width="40%" verticalAlign="top" textAlign="right" color="#8DA576"/>
        </s:HGroup>
    </s:BorderContainer>
</s:VGroup>
<s:VGroup id="studyGroup" includeIn="studyState" width="100%">
    <s:Button label="studyState to State1" click="this.currentState = 'State1'"  />
</s:VGroup> 

</s:Application>

Here is a fix. add an event listener for when the state changes. I use the currentStateChangeevent:

<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" minWidth="955" minHeight="600" currentStateChange="application1_currentStateChangeHandler(event)">

In the listener, manually set the rollOverEffect and rollOutEffect effects:

<fx:Script>
    <![CDATA[
        import mx.events.StateChangeEvent;

        protected function application1_currentStateChangeHandler(event:StateChangeEvent):void
        {
            // TODO Auto-generated method stub
            if(bc){
                bc.setStyle('rollOverEffect',animateColorON);
                bc.setStyle('rollOutEffect',animateColorOFF);
            }
        }

    ]]>
</fx:Script>

Be sure to give the BorderContainer an ID. I used bc:

<s:BorderContainer id="bc" width="100%" height="30" cornerRadius="4" borderVisible="false" buttonMode="true" rollOverEffect="animateColorON" rollOutEffect="animateColorOFF" >

I'm not sure why those effects are lost. My best theory is that this has something to do with how the ActionScript is generated behind the scenes. Even though the rollOverEffect and rollOutEffect appear to be properties on the component, they are actually implemented behind the scenes as styles. I bet, for some reason, when switching states the 'effect' styles are not reset. You'd have to look at the generated ActionScript to know for sure, though.