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>