Highlight new added form item during state changing

          


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" width="400" height="300">
   
    <mx:Script>
        
            import mx.effects.easing.Bounce;
      
    </mx:Script>
    
    <mx:Panel title="Registration" id="registrationPanel">
    
        <mx:Form id="registrationForm">
            <mx:FormItem label="Username:">
                <mx:TextInput />
            </mx:FormItem>
            
            <mx:FormItem label="Password:" required="true">
                <mx:TextInput displayAsPassword="true" />
            </mx:FormItem>
            
            <mx:FormItem label="EMail:" id="formitem1">
                <mx:TextInput />
            </mx:FormItem>
        </mx:Form>
        
        <mx:ControlBar>
            <mx:LinkButton label="Add more information" id="moreInfoLink"
                click="currentState='moreInfoState'" />
            
            <mx:Spacer width="100%" id="spacer"/>
            <mx:Button label="Register" id="registerButton"/>
        </mx:ControlBar>
    </mx:Panel>
    
    <mx:states>
        <mx:State name="moreInfoState">
            <mx:AddChild relativeTo="{registrationForm}" position="lastChild" creationPolicy="all">
                <mx:FormItem id="phoneItem" label="Phone:">
                    <mx:TextInput />
                </mx:FormItem>
            </mx:AddChild>
            
            <mx:SetProperty target="{registrationPanel}" name="title" value="Detailed registration"/>
            
            <mx:RemoveChild target="{moreInfoLink}" />
            <mx:AddChild relativeTo="{spacer}" position="before">
                <mx:LinkButton label="Less information" click="currentState=''" />
            </mx:AddChild>
            <mx:AddChild relativeTo="{registrationForm}" position="lastChild">
                <mx:FormItem label="Age">
                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>
            <mx:SetProperty target="{formitem1}" name="label" value="Email:"/>
        </mx:State>
    </mx:states>
    
    <mx:transitions>
       <mx:Transition fromState="*" toState="*">
         
            <mx:Parallel targets="{[registrationPanel, moreInfoLink, registerButton, phoneItem]}">
                <mx:Resize duration="600" easingFunction="Bounce.easeOut"/>
             
                <mx:Sequence target="{phoneItem}">
                    <mx:Dissolve duration="1000" alphaFrom="0.0" alphaTo="1.0" />
                    <mx:Glow duration="1000"
                        alphaFrom="1.0" alphaTo="0.0"
                        blurXFrom="30" blurXTo="0"
                        blurYFrom="30" blurYTo="0" />
                </mx:Sequence>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
    
</mx:Application>

Related examples in the same category

1.	Switch form state
2.	Set and get form state
3.	Add Form control in state
4.	Change form control property in state

Highlight new added form item during state changing : Form State « Components « Flex

Related examples in the same category