Creationpolicy on form items

i'm trying to create a expanding Form with a smooth transition effect, here the code:

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               currentState="Login" creationPolicy="all"
               close="PopUpManager.removePopUp(this)">

<fx:Metadata> 
    [ResourceBundle("I18N")]
</fx:Metadata>

<s:states>
    <s:State name="Login" ></s:State>
    <s:State name="Register"></s:State>
</s:states>
<fx:Script>
    <![CDATA[
        import caurina.transitions.Tweener;

        import mx.controls.Alert;
        import mx.managers.PopUpManager;
        [Bindable]private var show:Boolean = false;

        private function extendForm():void
        {
            Tweener.addTween(this, {height:320, time:1, onComplete:this.toogleMode(true)})
        }

        private function reduceForm():void
        {
            Tweener.addTween(this, {height:150, time:1, onComplete:this.toogleMode(false)});
        }

        private function toogleMode(visible:Boolean):void
        {
            this.show = visible;
            if(visible){this.setCurrentState("Register");}
            else{this.setCurrentState("Login")}
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <mx:EmailValidator source="{email}" property="text" required="true"
                       trigger="{submit}" triggerEvent="click"
                       valid="Alert.show('Validation Succeeded!');"/>

    <mx:Validator source="{password}" property="text" required="true"
                  trigger="{submit}" triggerEvent="click"
                  requiredFieldError="{resourceManager.getString('I18N','requiredField')}"/>

    <mx:Validator source="{repeatpw}" property="text"
                  trigger="{submit}" triggerEvent="click"
                  required="{show}" requiredFieldError="{resourceManager.getString('I18N','requiredField')}"/>
</fx:Declarations>

<s:VGroup id="container" width="100%" height="100%" gap="10">
    <s:Group width="100%" height="100%">
        <mx:Form id="formfield" width="100%" height="100%" left="0" layoutDirection="ltr" creationPolicy="all" >
            <mx:FormItem creationPolicy="all" label="{resourceManager.getString('I18N','email')}">
                <s:TextInput id="email" 
                             width="100%"
                             maxChars="40"
                             minWidth="170" />
            </mx:FormItem>  

            <mx:FormItem creationPolicy="all" label="{resourceManager.getString('I18N','password')}">
                <mx:TextInput id="password" 
                              width="100%" 
                              displayAsPassword="true"
                              maxChars="40"
                              minWidth="170"/>
            </mx:FormItem>

            <mx:FormItem creationPolicy="all" includeIn="Register" label="{resourceManager.getString('I18N','repeatpw')}">
                <s:TextInput id="repeatpw" 
                             width="100%"
                             displayAsPassword="true"
                             maxChars="40"
                             minWidth="170" />
开发者_如何学Python            </mx:FormItem>  
        </mx:Form>
    </s:Group>

    <s:HGroup width="100%">
        <s:Group>
            <s:Button includeIn="Login" enabled="{!show}" label="{resourceManager.getString('I18N','register')}" left="5" bottom="5" click="{this.extendForm()}"/>
            <s:Button includeIn="Register" enabled="{show}" label="{resourceManager.getString('I18N','login')}" left="5" bottom="5" click="{this.reduceForm()}"/>

        </s:Group>
        <mx:Spacer width="100%" height="100%"/>
        <s:HGroup>
            <s:Button label="{resourceManager.getString('I18N','submit')}" id="submit"/>
            <s:Button label="{resourceManager.getString('I18N','cancel')}" click="PopUpManager.removePopUp(this)" />
        </s:HGroup>
    </s:HGroup>
</s:VGroup>

But the problem with this is that even with creationPolicy set to all not all items seem to get initialized. This causeses the tweener animation to lag when clicking the "register" button the first time. after the first click, the animation is smooth.

can anyone tell me what i'm doing wrong or what is causing the animation to lag?

---

I think that your issue is that, even though everything is created, it can't be laid out until the state is known.

So I'd suggest that you avoid micromanaging the transition and instead lean on the effects syntax that is so well integrated into the Spark architecture. http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf600c1-7fff.html

So, instead of setting creationPolicy to "all", instead set a height.Register and a height.Login in the main component. If you set up a transition with a fromState of * and a toState of *, and a Resize Effect with a target of this but no parameters (except you might want to tweak the duration), you should fnd this gets a lot easier.