Flex skeleton application with sign in form. Using flex state and transition.

Sometimes, we should use sign in form for web application, and then very helpfull are flex states.

On bottom listing is completelly flex program.
As login, you enter "login", and as password - "password".


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.states.State;
import mx.messaging.channels.AMFChannel;
import mx.modules.Module;
import mx.effects.easing.Bounce;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.events.ModuleEvent;
import mx.modules.IModuleInfo;
import mx.managers.CursorManager;
import flash.net.navigateToURL;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.effects.easing.Bounce;
import mx.core.UIComponent;
import mx.managers.DragManager;
import flash.display.*;
import flash.net.NetConnection;
import flash.net.Responder;
import mx.controls.Alert;
import mx.core.Application;
import mx.events.CloseEvent;
import mx.managers.CursorManager;
import mx.managers.PopUpManager;
import flash.text.*;
import flash.utils.*;
import flash.events.*;
import mx.preloaders.*;
import mx.events.*;

public var dm:DragManager;

private function setDuration():void {
application.setStyle('modalTransparencyDuration', 0);
}

private function setColor():void {
application.setStyle('modalTransparencyColor', 0x000000);
}

private function setBlur():void {
application.setStyle('modalTransparencyBlur', 8);
}

private function setTransparency():void {
application.setStyle('modalTransparency', 0.8);
}

private function init():void {
setDuration();
setColor();
setBlur();
setTransparency();
}

private function zaloguj():void {
if (login.text == "login" && haslo.text == "password") {
Application.application.currentState="Application";
} else {
Alert.show("Incorrect password!\nAcces denied.", "Error: ");
}

}

]]>

</mx:Script>
<mx:Style>
global {
modalTransparencyBlur: 5;
modalTransparency: 0.8;
modalTransparencyColor: #666666;
modalTransparencyDuration: 500;
backgroundGradientColors: #333333, #000000;
backgroundGradientAlphas: 0.36, 0.77;
themeColor: #0096ff;
}
</mx:Style>

<!-- Define the transition to animate the change of view state. -->
<mx:transitions>
<mx:Transition>
<mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}">
<mx:Resize duration="500"
easingFunction="Bounce.easeOut"/>
<mx:Sequence target="{confirm}">
<mx:Blur duration="200"
blurYFrom="1.0"
blurYTo="20.0"/>
<mx:Blur duration="200"
blurYFrom="20.0"
blurYTo="1"/>
</mx:Sequence>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}"
position="lastChild">
<mx:FormItem id="confirm">
<mx:TextInput text="Not implemented yet"/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}"
name="title"
value="Password restore"/>
<mx:SetProperty target="{loginButton}"
name="label"
value="Restore"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}"
position="before">
<mx:LinkButton label="Back"
click="currentState=''"/>
</mx:AddChild>
<mx:SetStyle target="{haslo}"
name="backgroundColor"
value="#FFFFFF"/>
<mx:RemoveChild target="{formitem1}"/>
<mx:RemoveChild target="{formitem2}"/>
</mx:State>
<mx:State name="Application">
<mx:RemoveChild target="{loginPanel}"/>
<mx:AddChild position="lastChild">
<mx:Panel layout="absolute"
left="0"
top="0"
right="0"
bottom="0"
backgroundAlpha="0.06"
alpha="1.0"
cornerRadius="0">
</mx:Panel>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel id="loginPanel"
title="Sign in"
color="0xffffff"
borderAlpha="0.15"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
horizontalCenter="0"
verticalCenter="0">
<mx:Form id="loginForm"
color="0x323232">
<mx:FormItem label="Login:"
id="formitem1">
<mx:TextInput id="login"/>
</mx:FormItem>
<mx:FormItem label="Password:"
id="formitem2">
<mx:TextInput displayAsPassword="true"
id="haslo"/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton id="registerLink"
label="I forgot my password"
click="currentState='Register'"/>
<mx:Spacer width="100%"
id="spacer1"/>
<mx:Button label="Sign in"
id="loginButton"
click="zaloguj();"
themeColor="#0090FF"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>