TitleWindow layout container

TitleWindow container is much like panel container. It provides title bar, border, content area as panel container does. The added features the TitleWindow delivers is that it can display close button and can work as pop up window. The pop up window can be dragged around the application window. PopUpManager is used to open and remove the TitleWindow as pop up. The value of attribute "showCloseButton" can be set to true to show close button in popup window. To add popup window, use addPopUp() method and to close the window use removePopUp() method of PopUpManager class.

TitleWindowLayoutContainer.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="354" height="212">

<mx:Script>

<![CDATA[

import mx.managers.PopUpManager;

import mx.containers.TitleWindow;

import mx.controls.Label;

public function showTitleWindow():void{

var newTitleWindow:NewTitleWindow = new NewTitleWindow();

newTitleWindow.showCloseButton = true;

PopUpManager.addPopUp(newTitleWindow,this,true);

PopUpManager.centerPopUp(newTitleWindow);

}

]]>

</mx:Script>

<mx:Button label="Click Me !" click="showTitleWindow();" horizontalCenter="0" verticalCenter="0"/>

</mx:Application>

NewTitleWindow.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Title" status="Status" width="200" height="200" close="title_close();">

<mx:Style>

.windowStyles {

color: red;

letterSpacing: 2;

}

.windowStatus {

color: blue; 0

fontWeight: bold;

}

</mx:Style> 1

<mx:Script>

<![CDATA[

import mx.managers.PopUpManager; 2

public function title_close():void{

PopUpManager.removePopUp(this);

} 3

]]>

</mx:Script>

<mx:Label text="This is Title Window" width="162"/> 4

<mx:Button label="OK" click="PopUpManager.removePopUp(this);"/>

</mx:TitleWindow>

Watch in action: 5

Dowload the code

TitleWindow layout container

TitleWindow layout container

TitleWindow layout container

Tutorials