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!

Webservices. Flex client and Java EE webservice.

I'm showing communication flex as client side and java as server side. In the first time I'll create simply service on java ee with jax-ws library, and then I'll deploy this on JBoss application server.

Create simply webservice with jax-ws 

Using checkbox in datagrid (itemRenderer, itemEditor)

Hi, this post will be about using itemRenderer in flex 3. I'll show, what it's easy on simply example.
I create two files
1. Example.mxml as main application
2. ActionCheckBox as Flex Component

First file (Example.mxml) include:

<?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.controls.CheckBox;

private var collection:Array;

private function init():void{

   collection = new Array();

   collection.push({name:"Paul", active:true});
   collection.push({name:"Erick", active:false});
   collection.push({name:"Margaret", active:true});
   collection.push({name:"Claudia", active:true});
   dataGrid.dataProvider = collection;

}

]]>

</mx:Script>

<mx:DataGrid allowMultipleSelection="true" id="dataGrid" rowHeight="26" editable="true" resizableColumns="true" right="10" left="10" top="10" bottom="111" fontSize="10" fontFamily="Verdana" borderThickness="1" textAlign="center">

   <mx:columns>
      <mx:DataGridColumn headerText="Name" dataField="name"/>
      <mx:DataGridColumn headerText="Active" dataField="active" itemRenderer="ActionCheckBox"  itemEditor="mx.controls.CheckBox"/>
   </mx:columns>

</mx:DataGrid>

</mx:Application>


Second file (ActionCheckBox.mxml):

<?xml version="1.0"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.core.Application;
]]>
</mx:Script>
<mx:CheckBox height="100%" width="100%" enabled="false" selected="{data.active}"/>
</mx:VBox>

Lokaty bankowe
Nowy podatek vat