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:FormItem>
                 <mx:Button label="Login"
                        click ="showTitleWindow()" />
             </mx:FormItem>
         </mx:Form>
     </mx:VBox>

</mx:Application>

转载自： http://www.cnblogs.com/taobataoma/archive/2008/01/11/1035794.html