Mega Code Archive
Highlight new added form item during state changing
<![CDATA[
<?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>
]]>