The Spark TitleWindow container

TitleWindow是一种优化后的弹出式Panel。此容器可添加标题栏、标题、状态栏、边框、子控件区域。与Panel不同的是，它有一个关闭按钮。TitleWindow容器被设计成弹出式窗体，用户可以拖拽它。TitleWindow可是以模态的，也可以是非模态的。因为你弹出了一个窗体，你不能直接地在MXML中创建它。你可以使用PopUpManager打来一个TitleWindow容器。Flex还定义了一个SkinnablePopUpContainer容器。与TitleWindow不同的是，SkinnablePopUpContainer不支持拖拽。它是一种轻量级的弹出式窗体。

使用PopUpManager创建Spark TitleWindow容器

PopUpManager在mx.managers包中。 PopUpManager的父类为Object。它是一个单态类(Singnalton class)。它有四个方法，都是静态方法。四个方法如下所示：

addPopUp 

bringToFront 

centerPopUp

removePopUp 

使用<s:TitleWindow>标签创建一个TitleWindow容器。当用户点击close图标时，TitleWindow 广播close事件。Flex不会自动关闭此窗体。固须要创建一个此事件的处理函数来关闭TitleWindow。

例 用户单击Login按钮 弹出一登录窗体

MyLoginForm.mxml放在bin\myComponents目录下。它就是登录窗体。

 <?xml version="1.0"?>

<!-- containers\spark\myComponents\MyLoginForm.mxml -->

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"

    xmlns:mx="library://ns.adobe.com/flex/mx"

    xmlns:s="library://ns.adobe.com/flex/spark"

    close="handleCloseEvent();">

    <s:layout>

        <s:VerticalLayout/>

    </s:layout>



    <fx:Script>

    <![CDATA[

    import mx.managers.PopUpManager;

    // Handle the close button and Cancel button.

    private function handleCloseEvent():void {

    PopUpManager.removePopUp(this);

    }

    // Handle the OK button.

    private function processLogin():void {

    // Check credentials (not shown) then remove pop up.

    PopUpManager.removePopUp(this);

    }

    ]]>

    </fx:Script>



    <s:Form>

        <s:FormItem label="User Name">

        <s:TextInput id="username" width="100%"/>

        </s:FormItem>

        <s:FormItem label="Password">

        <s:TextInput id="password"

        displayAsPassword="true"

        width="100%"/>

        </s:FormItem>

    </s:Form>



    <s:HGroup>

        <s:Button label="OK"

        click="processLogin();" />

        <s:Button label="Cancel"

        click="handleCloseEvent();"/>

    </s:HGroup>

</s:TitleWindow>

SparkMainMyLoginForm.mxml 文件在bin目录下

 <?xml version="1.0"?>

<!-- containers\spark\SparkMainMyLoginForm.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

    xmlns:mx="library://ns.adobe.com/flex/mx"

    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>

    <![CDATA[

    import mx.managers.PopUpManager;

    import spark.components.TitleWindow;

    import myComponents.MyLoginForm;

    

    // Open the pop-up window.

    private function showLogin():void {

        // Create a non-modal TitleWindow container.

        var helpWindow:TitleWindow=

        PopUpManager.createPopUp(this, MyLoginForm, false) as TitleWindow;

        PopUpManager.centerPopUp(helpWindow);

    }

    ]]>

    </fx:Script>

    <s:VGroup width="300" height="300">

        <s:Button label="Login" click="showLogin();"/>

    </s:VGroup>

</s:Application>

运行

例 在上例基础上，增加标题，去掉close按钮

 <?xml version="1.0"?>

<!-- containers\spark\SparkMainMyLoginFormCast.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>

    <![CDATA[

    import mx.managers.PopUpManager;

    import spark.components.TitleWindow;

    import myComponents.MyLoginForm;

    private function showLogin():void 

    {

        // Create the TitleWindow container.

        var helpWindow:TitleWindow =

        PopUpManager.createPopUp(this, MyLoginForm, false) as TitleWindow;

        // Add title to the title bar.

        helpWindow.title="Enter Login Information";

        // Make title bar slightly transparent.

        helpWindow.setStyle("borderAlpha", 0.9);

        // Hide the close button.

        helpWindow.closeButton.visible = false;

    }

    ]]>

    </fx:Script>

<s:VGroup width="300" height="300">

<s:Button click="showLogin();" label="Login"/>

</s:VGroup>

</s:Application>

运行

 例 弹出窗体后，在非弹出窗体区域鼠标下按时，关闭弹出窗体

<?xml version="1.0"?>
<!-- containers\spark\MainMyLoginFormMouseDown.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
    <![CDATA[
    import mx.managers.PopUpManager;
    import spark.components.TitleWindow;
    import myComponents.MyLoginForm;
    import mx.events.FlexMouseEvent;
    private var helpWindow:TitleWindow;
    private function showLogin():void {
    // Create the TitleWindow container.
    helpWindow = PopUpManager.createPopUp(this,
    MyLoginForm, false) as TitleWindow;
    helpWindow.addEventListener("mouseDownOutside", removeForm);
    }
    private function removeForm(event:FlexMouseEvent):void {
    PopUpManager.removePopUp(helpWindow);
    }
    ]]>
    </fx:Script>
    <s:VGroup width="300" height="300">
    <s:Button click="showLogin();" label="Login"/>
    </s:VGroup>

</s:Application> 

 运行

例 从弹出式窗体传出数据。用户选择文件后缀名。回显到主窗体中。

 ArrayEntryForm.mxml文件位于bin\myComponents\目录下。内容如下

<?xml version="1.0"?>
<!-- containers\spark\myComponents\ArrayEntryForm.mxml -->
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="200" borderAlpha="1"
close="removeMe();">

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
    <![CDATA[
        import spark.components.TextInput;
        import mx.managers.PopUpManager;
        import mx.collections.ArrayList;
        // Variables whose values are set by the main application.
        // Data provider array for the component's ComboBox control.
        [Bindable]
        public var myArray:ArrayList;
        // 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);
        }
    ]]>
    </fx:Script>
    <s:ComboBox id="cb1" dataProvider="{myArray}"/>
    <s:HGroup>
    <s:Button label="OK" click="submitData();"/>
    <s:Button label="Cancel" click="removeMe();"/>
    </s:HGroup>

</s:TitleWindow>

SparkMainArrayEntryForm.mxml 文件位于bin目录下。内容如下：

<?xml version="1.0"?>
<!-- containers\spark\SparkMainArrayEntryForm.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
    <![CDATA[
        import mx.collections.ArrayList;
        import mx.managers.PopUpManager;
        import myComponents.ArrayEntryForm;
        public function displayForm():void 
        {
            /* ArrayList with data for the custom control ComboBox control. */
            var doctypes:ArrayList = new ArrayList(["*.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";
            /* Set properties of the ArrayEntryForm custom component. */
            pop1.targetComponent = ti1;
            pop1.myArray = doctypes;
            PopUpManager.centerPopUp(pop1);
        }
    ]]>
    </fx:Script>
    <s:TextInput id="ti1" text=""/>
    <s:Button id="b1" label="Select File Type"
    click="displayForm();"/>

</s:Application>

运行