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”.
Full code after the jump.
<?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>
View source is enabled in the following example.
To use a TitleWindow is clever idea! I’m pretty much looking forward to seeing your solution to neat transition effects - it took me many hours to figure out how to correctly implement our internal VBoxWithMessage component that does exactly the same thing.
Here is an example of how you could make it fade in/out. You would need to embed the font used in the error message for the text to fade with the box.
... import mx.effects.Fade; import mx.events.EffectEvent; private function showTitleWindow():void { titleWindow.height = 28; var fade:Fade = new mx.effects.Fade(); fade.alphaFrom = 0; fade.alphaTo = 1; fade.target = titleWindow; fade.play(); } private function hideTitleWindow():void { var fade:Fade = new mx.effects.Fade(); fade.alphaFrom = 1; fade.alphaTo = 0; fade.target = titleWindow; fade.addEventListener(EffectEvent.EFFECT_END, function(event:EffectEvent) : void { titleWindow.height = 0; }); fade.play(); } ...I agree with Borek…very clever! I would’ve never thought about using a TitleWindow. Nice!