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 >