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>

Flex Scheduling Framework - 24h date system for timeline. DateFormatter.

Default property in flex scheduling framework is 12 hours date format. We  see  i.e. 1AM, 5PM etc.
If we want using 24 hours date format for our timeline from flex scheduling framework, we should do:

1. create time range descriptor, like this:

var defaultTimeRangeDescriptor:Array=[[30 * DateUtil.MINUTE_IN_MILLISECONDS, "J:NN"]];


2. set timeRanges property for our timeline flex component, like this:
timeline.timeRanges=TimeRangeDescriptorUtil.convertArrayToTimeRangeDescriptor((defaultTimeRangeDescriptor)); 
 
A 30 number in example is a time scale, and second parameter is string formatter:
 
letter 'J' mean 24 h system, and hour will be display as one digit;
'JJ' mean 24 h system, and hour will be display as two digit;
letter 'NN' meaning  minutes;

Flex form validation.

Using amfphp. Let's connect flex with php!