TitleWindow レイアウトコンテナは、ポップアップウィンドウとして使用するために最適化された Panel コンテナです。コンテナは、タイトルバー、タイトルバー内のキャプションとステータス領域、境界線、および子のコンテンツ領域で構成されます。Panel コンテナと異なり、TitleWindow コンテナには Close ボタンを表示できます。また、このコンテナは、ユーザーがアプリケーションウィンドウの画面内でドラッグ可能なポップアップウィンドウとして機能するように設計されています。

ポップアップ TitleWindow コンテナは、モーダルまたは非モーダルにすることができます。モーダルの場合は、ポップアップウィンドウが閉じられるまで、ポップアップウィンドウがすべてのキーボード入力とマウス入力を受け付けます。非モーダルの場合は、ポップアップウィンドウが開いた状態で、他のウィンドウも入力を受け付けることができます。

TitleWindow コンテナの典型的な用法の 1 つに、フォームの表示があります。ユーザーがフォームへの入力を終えた時点で、TitleWindow コンテナをプログラムによって閉じることができます。または、ユーザーがウィンドウ右上隅の閉じるアイコン（内部に「x」の表示されたボックス）を押して、アプリケーションに終了要求を送ることによっても閉じることができます。

Title ウィンドウはポップアップ表示させるため、他のほとんどのコントロールのように MXML 内で直接作成するのではありません。代わりに、PopUpManager を使用します。

次の例は、Form コンテナを子として持つ TitleWindow コンテナです。

詳細については、『Adobe Flex リファレンスガイド』の TitleWindow を参照してください。

PopUpManager を使用した TitleWindow コンテナの作成

ポップアップ TitleWindow コンテナを作成および削除するには、PopUpManager の各メソッドを使用します。PopUpManager は、mx.managers package 内にあります。

ポップアップウィンドウの作成

ポップアップウィンドウを作成するには、PopUpManager の createPopUp() メソッドを使用します。createPopUp() メソッドのシグネチャは次のとおりです。

public static createPopUp(parent:DisplayObject, class:Class,
    modal:Boolean = false):IFlexDisplayObject

このメソッドには、次のパラメータを指定できます。

また、TitleWindow クラスまたはカスタムコンポーネントのインスタンスを PopUpManager addPopUp() メソッドに渡しても、ポップアップウィンドウを作成できます。詳細については、addPopUp() メソッドの使用を参照してください。

カスタム TitleWindow コンポーネントの定義

TitleWindow コンテナを作成する場合に最もよく使われる方法の 1 つは、カスタム MXML コンポーネントとして定義する方法です。

• この場合は、TitleWindow コンテナ、そのイベントハンドラ、およびカスタムコンポーネント内のすべての子を定義します。
• TitleWindow コンテナを作成および削除するには、PopUpManager createPopUp() および removePopUp() メソッドを使用します。

次のコード例では、ポップアップウィンドウとして使用するカスタム MyLoginForm TitleWindow コンポーネントを定義しています。

<?xml version="1.0"?>
<!-- containers\layouts\myComponents\MyLoginForm.mxml -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            
            private function processLogin():void {
                // Check credentials (not shown) then remove pop up.
                PopUpManager.removePopUp(this);
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="User Name">
            <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> 
        <mx:Button click="processLogin();" label="OK"/> 
        <mx:Button 
            label="Cancel"
            click="PopUpManager.removePopUp(this);"/> 
    </mx:HBox> 
</mx:TitleWindow>

この MyLoginForm.mxml というファイルは、<mx:TitleWindow> タグを使用して TitleWindow コンテナを定義します。TitleWindow コンテナは、ユーザー名およびパスワード用の 2 つの TextInput コントロールと、フォームを送信したり TitleWindow コンテナを閉じるときに使用する 2 つの Button コントロールを定義します。この例には、submitForm() イベントリスナー内でユーザー名とパスワードを確認するためのコードが含まれていません。

ここでは、MyLoginForm.mxml コンポーネントのイベントリスナー内でフォームデータを処理します。イベントリスナーをメインアプリケーション内で定義すると、このコンポーネントを再利用しやすくなります。こうすることで、フォームを使用するアプリケーションがデータ処理を受け持つことになり、汎用的なフォームを作成できます。メインアプリケーション内でイベントリスナーを定義する例については、TitleWindow および PopUpManager イベントの使用を参照してください。

PopUpManager を使用したポップアップ TitleWindow の作成

ポップアップウィンドウを作成するには、PopUpManager createPopUp() メソッドを呼び出します。このメソッドに、親、ポップアップを作成するクラスの名前、およびモーダル型かどうかを示すブール値を渡します。次のメインアプリケーションコードでは、カスタム TitleWindow コンポーネントの定義で定義した TitleWindow コンテナを作成します。

<?xml version="1.0"?>
<!-- containers\layouts\MainMyLoginForm.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.core.IFlexDisplayObject;
            import myComponents.MyLoginForm;

            private function showLogin():void {
                // Create a non-modal TitleWindow container.
                var helpWindow:IFlexDisplayObject =
                    PopUpManager.createPopUp(this, MyLoginForm, false);
            }
        ]]>
    </mx:Script>
    
    <mx:VBox width="300" height="300">  
        <mx:Button click="showLogin();" label="Login"/>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、ユーザーが「Login」ボタンを選択すると、click イベントのイベントリスナーが createPopUp() メソッドを使用して TitleWindow コンテナを作成し、"MyLoginForm.mxml" ファイルという名前をクラス名として渡します。

ポップアップ TitleWindow コンテナのプロパティを操作できるように、createPopUp() メソッドの戻り値を TitleWindow にキャストすることがよくあります。この例として、前の例の showLogin() メソッドを次のように修正します。

<?xml version="1.0"?>
<!-- containers\layouts\MainMyLoginFormCast.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
          import mx.managers.PopUpManager;
          import mx.core.IFlexDisplayObject;
          import myComponents.MyLoginForm;

          // Additional import statement to use the TitleWindow container.
          import mx.containers.TitleWindow;

          private function showLogin():void {
            // Create the TitleWindow container.
            var helpWindow:TitleWindow = 
          TitleWindow(PopUpManager.createPopUp(this, MyLoginForm, false));

            // Add title to the title bar.
            helpWindow.title="Enter Login Information";

            // Make title bar slightly transparent.
            helpWindow.setStyle("borderAlpha", 0.9);

            // Add a close button.
            // To close the container, your must also handle the close event.
            helpWindow.showCloseButton=true;
          }
        ]]>
    </mx:Script>
    
    <mx:VBox width="300" height="300">  
        <mx:Button click="showLogin();" label="Login"/>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ポップアップウィンドウの削除

ポップアップ TitleWindow を削除するには、PopUpManager removePopUp() メソッドを使用します。PopUpManager.createPopUp() メソッドで作成したオブジェクトを removePopUp() メソッドに渡します。次の例は、PopUpManager を使用したポップアップ TitleWindow の作成に示した例を修正して、ユーザーが「Done」ボタンをクリックするとポップアップウィンドウが削除されるようにしたものです。

<?xml version="1.0"?>
<!-- containers\layouts\MainMyLoginFormRemove.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
          import mx.managers.PopUpManager;
          import myComponents.MyLoginForm;
          import mx.core.IFlexDisplayObject;

          private var helpWindow:IFlexDisplayObject;

          private function showLogin():void {
            // Create the TitleWindow container.
            helpWindow = PopUpManager.createPopUp(this, MyLoginForm, false);
          }

          private function removeForm():void {
            PopUpManager.removePopUp(helpWindow);
          }
        ]]>
    </mx:Script>
    
    <mx:VBox width="300" height="300">  
        <mx:Button click="showLogin();" label="Login"/>
        <mx:Button id="b2" label="Remove Form" click="removeForm();"/>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

removePopUp() メソッドは、一般に TitleWindow の close イベント、および PopUpManager の mouseDownOutside イベントから呼び出します。詳細については、イベントを使用したデータの受け渡しを参照してください。

TitleWindow および PopUpManager イベントの使用

GUI 環境のダイアログボックスと同様に、TitleWindow タイトルバーの右上隅に、閉じるアイコン（小文字の「x」）を追加できます。これには、次の例に示すように、showCloseButton プロパティを true に設定します。

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" showCloseButton="true">

showCloseButton のデフォルト値は false です。

ユーザーが閉じるアイコンをクリックすると、TitleWindow が close イベントをブロードキャストします。このイベントのハンドラを作成し、そのイベントハンドラ内部から TitleWindow を閉じる必要があります。Flex はウィンドウを自動的に閉じません。

最も簡単な方法は、TitleWindow の close イベントプロパティを指定する際、PopUpManager の removePopUp() メソッドを直接呼び出します。この例を次に示します。

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

クリーンアップが必要な場合は、TitleWindow コントロールを閉じる前に close イベントのイベントリスナー関数を作成して、このハンドラ内から TitleWindow を閉じます。この例を次に示します。

<?xml version="1.0"?>
<!-- containers\layouts\myComponents\MyLoginFormRemoveMe.mxml -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
    showCloseButton="true" 
    close="removeMe();">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;

            private function removeMe():void {
                // Put any clean-up code here.
                PopUpManager.removePopUp(this);
            }
        ]]>
    </mx:Script>

</mx:TitleWindow>

また、PopUpManager の mouseDownOutside イベントを使用すると、ユーザーが TitleWindow の外部でマウスをクリックしたときにポップアップウィンドウを閉じることができます。これには、TitleWindow のインスタンスに、mouseDownOutside イベントのイベントリスナーを追加します。この例を次に示します。

<?xml version="1.0"?>
<!-- containers\layouts\MainMyLoginFormMouseDown.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.containers.TitleWindow;
            import myComponents.MyLoginForm;
            import mx.events.FlexMouseEvent;

            private var helpWindow:TitleWindow;

            private function showLogin():void {
                // Create the TitleWindow container.
                helpWindow = TitleWindow(PopUpManager.createPopUp(this,
                    MyLoginForm, false));
                helpWindow.addEventListener("mouseDownOutside", removeForm);
            }

            private 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>
前の例で実行する SWF ファイルは以下のとおりです。

イベントリスナーはメインアプリケーション内で定義しておき、ポップアップウィンドウを作成するときに、ウィンドウに割り当てます。この方法では、MyLoginForm.mxml コンポーネントで定義された汎用的なポップアップウィンドウを使用してから、メインアプリケーションからイベントリスナーを割り当てることで、コンポーネントの動作を変更できます。

ポップアップウィンドウの中央への配置

PopUpManager の centerPopUp() メソッドを呼び出すと、別のコンテナ内でポップアップを中央に配置できます。次のカスタム MXML コンポーネントは、親コンテナ内で自身を中央に配置します。

<?xml version="1.0"?>
<!-- containers\layouts\myComponents\MyLoginFormCenter.mxml -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="handleCreationComplete();">
    
    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            
            private function handleCreationComplete():void {
                // Center the TitleWindow container 
                // over the control that created it.
                PopUpManager.centerPopUp(this);
            }
            
            private function processLogin():void {
                // Check credentials (not shown) then remove pop up.
                PopUpManager.removePopUp(this);
            }
        ]]>
    </mx:Script>
    <mx:Form>
        <mx:FormItem label="User Name">
            <mx:TextInput id="username" width="100%"/>
        </mx:FormItem> 
        <mx:FormItem label="Password">
            <mx:TextInput id="password" 
                width="100%"
                displayAsPassword="true"/>
        </mx:FormItem> 
    </mx:Form>
    <mx:HBox> 
        <mx:Button click="processLogin();" label="OK"/> 
        <mx:Button 
            label="Cancel"
            click="PopUpManager.removePopUp(this);"/> 
    </mx:HBox> 
</mx:TitleWindow>

モーダルポップアップウィンドウの作成

createPopUp() メソッドには、オプションの modal パラメータを指定できます。このパラメータを true に設定すると、ウィンドウはモーダル型になります。TitleWindow がモーダルの場合、ウィンドウが開いている間は他のコンポーネントを選択できません。modal のデフォルト値は false です。

次の例では、モーダルポップアップウィンドウを作成しています。

var pop1:IFlexDisplayObject = PopUpManager.createPopUp(this, MyLoginForm,
    true);

ポップアップウィンドウに対するデータの受け渡し

ポップアップウィンドウの柔軟性を高めるために、ポップアップコンテナに対してデータを受け渡すことができます。このためには、次のガイドラインに従います。

• ポップアップするカスタムコンポーネントを作成します。大半の場合、このコンポーネントは TitleWindow コンテナです。
• ポップアップを作成するアプリケーション内で設定する変数をポップアップ内で宣言します。
• カスタムコンポーネントと同じ型にポップアップをキャストします。
• ポップアップウィンドウがアプリケーションまたはいずれかのアプリケーションコンポーネントで値を設定する場合は、そのコンポーネントへの参照をポップアップウィンドウに渡します。

例えば次のアプリケーションは、メインアプリケーションで定義した Array を、ポップアップウィンドウ内の ComboBox に格納します。

アプリケーションはポップアップの作成時に、ポップアップウィンドウを定義するカスタムコンポーネントの名前である ArrayEntryForm 型に、ポップアップをキャストします。この処理を行わないと、作成した各プロパティにアプリケーションがアクセスできなくなります。

このアプリケーションは、Application コンテナ内の TextInput コンポーネントへの参照をポップアップウィンドウに渡し、ポップアップが結果をコンテナに書き戻すことができるようにします。また、ポップアップ ComboBox コントロールのデータプロバイダに対してファイル拡張子の配列を渡し、ポップアップウィンドウのタイトルを設定します。これらの処理をアプリケーション内で行うことで、アプリケーション内の他の部分でも、このポップアップウィンドウを修正せずに再利用できます。アプリケーションは、データを書き戻すコンポーネントの名前、または表示するデータを認識する必要がなく、データが Array 内にあり、書き込み先が TextArea であることを認識するだけで済みます。

<?xml version="1.0"?>
<!-- containers\layouts\MainArrayEntryForm.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import myComponents.ArrayEntryForm;
            
            public var helpWindow:Object;
    
            public function displayForm():void {
                // Array with data for the custom control ComboBox control.
                var doctypes:Array = ["*.as", "*.mxml", "*.swc"]
                
                // Create the pop-up and cast the 
                // return value of the createPopUp()
                // method to the ArrayEntryForm custom component.
                var pop1:ArrayEntryForm = ArrayEntryForm(
                    PopUpManager.createPopUp(this, ArrayEntryForm, true));
                // Set TitleWindow properties.
                pop1.title="Select File Type";
                pop1.showCloseButton=true;
    
                // Set properties of the ArrayEntryForm custom component.
                pop1.targetComponent = ti1;
                pop1.myArray = doctypes;
                PopUpManager.centerPopUp(pop1);
            }
        ]]>
    </mx:Script>

    <mx:VBox> 
        <mx:TextInput id="ti1" text=""/>
    </mx:VBox>
    <mx:Button id="b1" label="Select File Type" click="displayForm();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次のカスタムコンポーネント ArrayEntryForm.mxml は、2 つの変数を宣言しています。第 1 の変数は、親アプリケーションがポップアップウィンドウに渡す Array のためのものです。第 2 の変数は、親アプリケーション TextInput コントロールへの参照を保持します。コンポーネントは、この参照を使用して親アプリケーションを更新します。

<?xml version="1.0"?>
<!-- containers\layouts\myComponents\ArrayEntryForm.mxml -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        showCloseButton="true" 
        width="200" borderAlpha="1"
        close="removeMe();">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;
            import mx.managers.PopUpManager;
            
            // Variables whose values are set by the main application.
            // Data provider array for the component's ComboBox control.
            [Bindable]
            public var myArray:Array;
            // A reference to the TextInput control 
            // in which to put the result.
            public var targetComponent:TextInput;

            // OK button click event listener.
            // Sets the target component in the application to the 
            // selected ComboBox item value.
            private function submitData():void {
                targetComponent.text = String(cb1.selectedItem);
                removeMe();
            }

            // Cancel button click event listener.
            private function removeMe():void {
                PopUpManager.removePopUp(this);
            }
        ]]>
    </mx:Script>

    <mx:ComboBox id="cb1" dataProvider="{myArray}"/>
    <mx:HBox>
        <mx:Button label="OK" click="submitData();"/>
        <mx:Button label="Cancel" click="removeMe();"/>
    </mx:HBox>
</mx:TitleWindow> 

また、parentApplication プロパティを使用すると、ポップアップカスタムコンポーネントの内部から親アプリケーションのプロパティにアクセスできます。例えば、アプリケーションが b1 という名前の Button コントロールを持つ場合、次の例に示すように Button コントロールのラベルを取得できます。

myLabel = parentApplication.b1.label;

ただしこの方法では、親のターゲットコンポーネント ID およびコンポーネントのプロパティに対し、ポップアップコンポーネント内でハードコード値を使用します。

イベントを使用したデータの受け渡し

次の例は、前セクションの例を一部変更したものです。メインアプリケーション内で定義されたイベントリスナーを使用して、ポップアップウィンドウから返されたデータを、メインアプリケーションに受け渡す処理を行います。この例では、イベントリスナーが定義されていない ArrayEntryFormEvents.mxml ファイルを示します。

<?xml version="1.0"?>
<!-- containers\layouts\myComponents\ArrayEntryFormEvents.mxml -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    showCloseButton="true" 
    width="200" 
    borderAlpha="1">
 
    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            
            // Variables whose values are set by the main application.
            // Data provider array for the component's ComboBox control.
            [Bindable]
            public var myArray:Array;

        ]]>
    </mx:Script>

    <mx:ComboBox id="cb1" dataProvider="{myArray}"/>
    <mx:HBox>
        <mx:Button id="okButton" label="OK"/>
        <mx:Button id="cancelButton" label="Cancel"/>
    </mx:HBox>
</mx:TitleWindow> 

メインアプリケーションは、各イベントリスナーを定義し、ポップアップウィンドウ内で定義されたコントロールにこれらを登録します。

<?xml version="1.0"?>
<!-- containers\layouts\MainArrayEntryFormEvents.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import flash.events.Event;
            import myComponents.ArrayEntryFormEvents;
            
            public var pop1:ArrayEntryFormEvents; 
    
            public function displayForm():void {
                // Array with data for the custom control ComboBox control.
                var doctypes:Array = ["*.as", "*.mxml", "*.swc"]
                
                // Create the pop-up and cast the return value 
                // of the createPopUp()
                // method to the ArrayEntryFormEvents custom component.
                pop1 = ArrayEntryFormEvents(
              PopUpManager.createPopUp(this, ArrayEntryFormEvents, true));
                // Set TitleWindow properties.
                pop1.title="Select File Type";
                pop1.showCloseButton=true;
    
                // Set the event listeners for 
                // the ArrayEntryFormEvents component.
                pop1.addEventListener("close", removeMe);
                pop1["cancelButton"].addEventListener("click", removeMe);   
                pop1["okButton"].addEventListener("click", submitData); 
    
                // Set properties of the ArrayEntryFormEvents custom control.
                pop1.myArray = doctypes;
                PopUpManager.centerPopUp(pop1);
            }
            
            // OK button click event listener.
            // Sets the target component in the application to the 
            // selected ComboBox item value.
            private function submitData(event:Event):void {
                ti1.text = String(pop1.cb1.selectedItem);
                removeMe(event);
            }

            // Cancel button click event listener.
            private function removeMe(event:Event):void {
                PopUpManager.removePopUp(pop1);
            }           
        ]]>
    </mx:Script>

    <mx:VBox> 
        <mx:TextInput id="ti1" text=""/>
    </mx:VBox>
    <mx:Button id="b1" label="Select File Type" click="displayForm();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

addPopUp() メソッドの使用

PopUpManager の addPopUp() メソッドを使用すると、カスタムコンポーネントを定義せずにポップアップを作成できます。このメソッドは、IFlexDisplayObject を実装する任意のクラスのインスタンスを受け取ります。このメソッドはクラス自体ではなく、クラスのインスタンスを受け取ります。したがって、<mx:Script> ブロック内で ActionScript コードを使用して、個別のカスタムコンポーネントとしてではなく、コンポーネントインスタンスを作成してポップアップ表示できます。

別の場所で再利用しない単純なダイアログボックスをポップアップ表示する場合は、createPopUp() メソッドではなく addPopUp() メソッドを使用するほうが望ましい場合があります。しかし、ポップアップが複雑な場合や、別の場所で再利用できない場合、これは最適なコーディング方法ではありません。

次の例では、addPopUp() メソッドによりポップアップを作成し、クリック時にウィンドウを閉じる Button コントロールをウィンドウに追加します。

<?xml version="1.0"?>
<!-- containers\layouts\MyPopUpButton.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="600" width="600" >

    <mx:Script>
        <![CDATA[
            import mx.containers.TitleWindow;
            import flash.events.*;
            import mx.managers.PopUpManager;
            import mx.controls.Button;
            import mx.core.IFlexDisplayObject;
            
            // The variable for the TitleWindow container
            public var myTitleWindow:TitleWindow = new TitleWindow();

            // Method to instantiate and display a TitleWindow container.
            // This is the initial Button control's click event handler.
            public function openWindow(event:MouseEvent):void {
                // Set the TitleWindow container properties.
                myTitleWindow = new TitleWindow();
                myTitleWindow.title = "My Window Title";
                myTitleWindow.width= 220;
                myTitleWindow.height= 150;
                // Call the method to add the Button control to the 
                // TitleWindow container.
                populateWindow();
                // Use the PopUpManager to display the TitleWindow container.
                PopUpManager.addPopUp(myTitleWindow, this, true);
            }
        
            // The method to create and add the Button child control to the
            // TitleWindow container.
            public function populateWindow():void {
                var btn1:Button = new Button();
                btn1.label="close";
                btn1.addEventListener(MouseEvent.CLICK, closeTitleWindow);
                myTitleWindow.addChild(btn1);   
            }
            
            // The method to close the TitleWindow container.
            public function closeTitleWindow(event:MouseEvent):void {
                PopUpManager.removePopUp(event.currentTarget.parent);
            }
        ]]>
    </mx:Script>
    <mx:Button label="Open Window" click="openWindow(event);"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

すべてのコンポーネントは、ポップアップさせることが可能です。次に、TextArea コントロールをポップアップする例を示します。この例では、まずコントロールのサイズを変更します。次に、TextArea を閉じるタイミングを判断するために、Shift キーを押しながらのマウスクリックをリッスンします。TextArea に入力したテキストはすべて、ポップアップの削除時にアプリケーションの Label コントロールに保存されます。

<?xml version="1.0"?>
<!-- containers\layouts\MyPopUpTextArea.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.controls.TextArea;
            import mx.core.IFlexDisplayObject;
 
            public var myPopUp:TextArea
            
            public function openWindow(event:MouseEvent):void {
                myPopUp = new TextArea();
                myPopUp.width= 220;
                myPopUp.height= 150;
                myPopUp.text = "Hold down the Shift key, and " + 
                    "click in the TextArea to close it.";
                myPopUp.addEventListener(MouseEvent.CLICK, closeWindow);
                PopUpManager.addPopUp(myPopUp, this, true);
                PopUpManager.centerPopUp(myPopUp);
            }
    
            public function closeWindow(event:MouseEvent):void {
                if (event.shiftKey) {
                    label1.text = myPopUp.text;
        PopUpManager.removePopUp(IFlexDisplayObject(event.currentTarget));
                }
            }
        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:Button id="b1" label="Create TextArea Popup"
            click="openWindow(event);"/>
        <mx:Label id="label1"/>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。