Home

States and Transitions using MXML and ActionScript, Chapter 13, Solution 4

­­Chapter_13_Flex_Sol_4_expert_Navigation 
 
<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
// Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers
// Author: Marco Casario 
// Editor: FriendsOfED www.friendsofed.com
// All Rights Reserved.
//
// Chapter 13: User Navigation in Flex Applications
// 
// Solution 13-4: States and Transitions using MXML and ActionScript
//
// 
// @author      Marco Casario
// @date        26 November 2007
// @version     1.0
// @site        flexsolutions.comtaste.com
//
////////////////////////////////////////////////////////////////////////////////
-->
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" creationComplete="onCreationComplete(event)">
 
	<mx:Script>
		<![CDATA[
			import mx.effects.Sequence;
			import mx.effects.Glow;
			import mx.effects.Dissolve;
			import mx.effects.Resize;
			import mx.effects.Parallel;
			import mx.containers.FormItem;
			import mx.states.Transition;
			import mx.states.RemoveChild;
			import mx.states.SetProperty;
			import mx.controls.TextInput;
			import mx.states.AddChild;
			import mx.states.State;
			import mx.events.FlexEvent;
			import mx.effects.easing.Bounce;
 
			private var _phoneItem:FormItem = null;			
 
 
			private function onCreationComplete(event:FlexEvent):void
			{
				super.states = new Array();
				super.states.push(createMoreInfoState());
 
				super.transitions = new Array();
				super.transitions.push(createMoreInfoTransition());
			}
 
			private function createMoreInfoState():State
			{
				var state:State = new State();
				state.name = "moreInfoState";
				state.overrides = new Array();// array of IOverride
 
				// create phone form item:
				_phoneItem = new FormItem();
				_phoneItem.label = "Phone:";
				_phoneItem.required = false;
				_phoneItem.addChild(new TextInput());
 
				// create a link button:
				var linkButton:LinkButton = new LinkButton();
				linkButton.label = "Less information";
				linkButton.addEventListener(MouseEvent.CLICK, linkButtonHandler);
 
				// define state:
				state.overrides.push(new AddChild(registrationForm, _phoneItem, "lastChild"));
				state.overrides.push(new SetProperty(registrationPanel, "label", "Detailed Registration"));
				state.overrides.push(new RemoveChild(moreInfoLink));
				state.overrides.push(new AddChild(spacer, linkButton, "before"));
 
				return state;
			}
 
			private function linkButtonHandler(event:MouseEvent):void
			{
				this.currentState = "";
			}
 
			private function createMoreInfoTransition():Transition
			{
				var t:Transition = new Transition();
				t.fromState = "*";
				t.toState = "*";
 
				// create resize effect:
				var resize:Resize = new Resize();
				resize.duration = 500;
				resize.easingFunction = Bounce.easeOut;
 
				// create dissolve effect:
				var dissolve:Dissolve = new Dissolve();
				dissolve.duration = 1000;
				dissolve.alphaFrom = 0.0;
				dissolve.alphaTo = 1.0;
 
				// create glow effect:
				var glow:Glow = new Glow();
				glow.duration = 1000;
				glow.alphaFrom = 0.8;
				glow.alphaTo = 0.0;
				glow.blurXFrom = 10;
				glow.blurXTo = 0;
				glow.blurYFrom = 10;
				glow.blurYTo = 0;
 
				// create parallel effect:
				var parallel:Parallel = new Parallel();
				parallel.targets = [registrationPanel, moreInfoLink, registerButton, _phoneItem];
 
				// create sequence effect:
				var sequence:Sequence = new Sequence(_phoneItem);
 
				// mix together all the effects:
				sequence.addChild(dissolve);
				sequence.addChild(glow);
				parallel.addChild(resize);
				parallel.addChild(sequence);
 
				// add the combined effect to the transition:
				t.effect = parallel;
 
				return t;
			}
		]]>
	</mx:Script>
 
	<mx:Panel title="Registration" id="registrationPanel">
	<mx:Form id="registrationForm">
	<mx:FormItem label="Username:" required="true">
	<mx:TextInput />
	</mx:FormItem>
	<mx:FormItem label="Password:" required="true">
	<mx:TextInput displayAsPassword="true" />
	</mx:FormItem>
	<mx:FormItem label="EMail:" required="true">
	<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:Application>
 
<strong>Chapter_13_Flex_Sol_4_Navigation</strong>
<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
// Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers
// Author: Marco Casario 
// Editor: FriendsOfED www.friendsofed.com
// All Rights Reserved.
//
// Chapter 13: User Navigation in Flex Applications
// 
// Solution 13-4: States and Transitions using MXML and ActionScript
//
// 
// @author      Marco Casario
// @date        26 November 2007
// @version     1.0
// @site        flexsolutions.comtaste.com
//
////////////////////////////////////////////////////////////////////////////////
-->
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" width="400" height="300">
 
    <mx:Script>
        <![CDATA[
            import mx.effects.easing.Bounce;
        ]]>
    </mx:Script>
 
    <mx:Panel title="Registration" id="registrationPanel">
 
		<mx:Form id="registrationForm">
		    <mx:FormItem label="Username:" required="true">
		        <mx:TextInput />
		    </mx:FormItem>
 
		    <mx:FormItem label="Password:" required="true">
		        <mx:TextInput displayAsPassword="true" />
		    </mx:FormItem>
 
		    <mx:FormItem label="EMail:" required="true" 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:" required="false">
                    <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:AddChild relativeTo="{registrationForm}" position="lastChild">
                <mx:FormItem label="Address">
                    <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="500" 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>