Using the TitleWindow container to display status messages
Posted on 2008-01-11 22:19 OldHawk 阅读(539) 评论(0) 编辑 收藏 举报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://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>