Создание политики по элементам формы - PullRequest
Новая
       2

Создание политики по элементам формы

0 голосов
/ 03 мая 2011

Я пытаюсь создать расширяющуюся форму с эффектом плавного перехода, вот код: 

<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" />
            </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>

Но проблема в том, что даже с creationPolicy установлено всене все элементы, кажется, инициализируются.Это приводит к задержке анимации анимации при первом нажатии кнопки «Регистрация».после первого щелчка анимация плавная.

Может кто-нибудь сказать мне, что я делаю неправильно или что вызывает задержку анимации?

1 Ответ

0 голосов
/ 23 июля 2011

Я думаю, что ваша проблема в том, что, хотя все создано, его нельзя выложить до тех пор, пока не станет известно состояние.

Поэтому я бы посоветовал вам избегать микроуправления переходом и вместо этого полагатьсяна синтаксис эффектов, который так хорошо интегрирован в архитектуру Spark.http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf600c1-7fff.html

Таким образом, вместо того, чтобы устанавливать creationPolicy со значением «все», вместо этого установите height.Register и height.Login в основном компоненте.Если вы установили переход с fromState из * и toState из * и Resize Effect с целью этого, но без параметров (за исключением того, что вы можете настроить длительность), вы должны найти, что это станет намного проще.

...