Title Window

A Title window Layout container is apanel Container that is used to create a pop-up window. A pop-up Title Window container can be model or non modal.

To create and remove pop-up TitleWindow container , we can use two methods of the PopUpManager i.e createPopUp() and removePopUp().

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
showCloseButton="true" close=" PopUpManager.removePopUp(this);">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function processLogin():void{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Form>
<mx:FormItem label="userName">
<mx:TextInput id="userName" width="100%"/>
</mx:FormItem>
<mx:FormItem label="passWord">
<mx:TextInput id="passWord" displayAsPassword="true" width="100%"/>
</mx:FormItem>
</mx:Form>
<mx:HBox x="200" y="200">
<mx:Button click="processLogin();" label="OK" />
<mx:Button label="CANCEL" click="PopUpManager.removePopUp(this);"/>
</mx:HBox>
</mx:TitleWindow>

To create the pop-up window, we call the PopUpManager.createPopUp() method and pass it to parent the name of the class that create the pop up and model Boolean Value.

The main Application TitleWindowCon.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.core.IFlexDisplayObject;
import mx.containers.TitleWindow;
import mx.events.FlexMouseEvent;
private var helpWindow:TitleWindow;
public function showLogin():void{

helpWindow = TitleWindow( PopUpManager.createPopUp(this,MyLoginForm,false));
helpWindow.title = "Enter Login Information";
helpWindow.setStyle("borderAlpha",0.2);
helpWindow.showCloseButton = true;
helpWindow.addEventListener("mouseDownOutside",removeForm);

}
public function removeForm(event:FlexMouseEvent):void{
PopUpManager.removePopUp(helpWindow);
}
]]>
</mx:Script>
<mx:VBox width="300" height="300">
<mx:Button click="showLogin();" label="Login"/>
</mx:VBox>
</mx:Application>

In a TitleWindow you can add a close icon just to set the showCloseButton property to true.
as the above example shows

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
showCloseButton="true" close=" PopUpManager.removePopUp(this);">

we can also use the mouseDownOutSide Event to close the pop-up window when a user clicks the mouse outside the TitleWindow as the above example shows:

helpWindow.addEventListener("mouseDownOutside",removeForm);

Defining a Default Button in Form and giving the style to form label

here i used defaultButton Property to make a default button in this Form
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
.myformItemLabelStyle{
color: #333399;
fontSize: 20;
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function submitLogin(eve:MouseEvent):void{
Alert.show("Login Requested");
}
]]>
</mx:Script>

<mx:Form id="myform" defaultButton="{mySubmitButton}">
<mx:FormItem label="Username" labelStyleName="myformItemLabelStyle">
<mx:TextInput id="userName" width="100"/>
</mx:FormItem>
<mx:FormItem label="Password" labelStyleName="myformItemLabelStyle">
<mx:TextInput id="password" width="100" displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem >
<mx:Button label="Login" id="mySubmitButton" click="submitLogin(event);"/>
<mx:Button label="Login" id="mySubmit" />
</mx:FormItem>
</mx:Form>
</mx:Application>

Custom Preloader

This is the first step of customized preloader.
Here you would be able to edit the preloader text content.

package myCompents
{
import flash.events.ProgressEvent;
import mx.preloaders.DownloadProgressBar;
public class DownloadProgressbarSubclassMin extends DownloadProgressBar
{
public function DownloadProgressbarSubclassMin()
{
super();
downloadingLabel = "Downloading app...";
initializingLabel="initializing app.....";
MINIMUM_DISPLAY_TIME = 2000;
}

override protected function showDisplayForInit(elapsedTime:int, count:int):Boolean
{
return true;
}

override protected function showDisplayForDownloading(elapsedTime:int, event:ProgressEvent):Boolean
{
return true;
}

}
}

use this custom class in the flex application:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preloader="myCompents.DownloadProgressbarSubclassMin" >

<mx:Button label="clickme" />

<mx:TextInput text="This is text input Control" />
</mx:Application/>