Using the TitleWindow container to display status messages

Another example of something I’ve seen lately on the Internet, so I thought I’d build it in Flex. This time I usea TitleWindow to display the status message of a login form. You can close the message by clicking the X button in the upper-right corner of the title window.

Note that there is no correct login. It will display the error message every time. In a future example I’ll try and add some fancy fade in/out effects or resize effects on the error message to give it that proper “Web 2.0 feel”

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

<!-- http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/ -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

        layout="vertical"

        verticalAlign="middle"

        backgroundColor="white">

    <mx:Style>

        TitleWindow {

            cornerRadius: 0;

            backgroundColor: red;

            borderColor: red;

            borderAlpha: 1.0;

        }

    </mx:Style>

    <mx:Script>

        <![CDATA[

            private function showTitleWindow():void {

                titleWindow.height = 28;

            }

            private function hideTitleWindow():void {

                titleWindow.height = 0;

        ]]>

    </mx:Script>

    <mx:VBox>

        <mx:TitleWindow id="titleWindow"

                title="Invalid username and/or password."

                showCloseButton="true"

                width="100%"

                height="0"

                close="hideTitleWindow()" />

        <mx:Form>

            <mx:FormItem label="Username:">

                <mx:TextInput id="username"

                        maxChars="24" />

            </mx:FormItem>

            <mx:FormItem label="Password:">

                <mx:TextInput id="password"

                        maxChars="24"

                        displayAsPassword="true" />

            <mx:FormItem>

                <mx:Button label="Login"

                        click="showTitleWindow()" />

        </mx:Form>

    </mx:VBox>

</mx:Application>

    本文转自 OldHawk  博客园博客，原文链接：http://www.cnblogs.com/taobataoma/archive/2008/01/11/1035794.html，如需转载请自行联系原作者