Flex中利用TitleWindow容器显示状态信息的例子

By Minidxer | July 31, 2008

接下来的例子演示了Flex中如何利用TitleWindow容器显示状态信息。Demo中的Window可以通过“×”关闭。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整实现代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         TitleWindow {
  9.             cornerRadius: 0;
  10.             backgroundColor: red;
  11.             borderColor: red;
  12.             borderAlpha: 1.0;
  13.         }
  14.     </mx:Style>
  15.  
  16.     <mx:Script>
  17.         <![CDATA[
  18.             private function showTitleWindow():void {
  19.                 titleWindow.height = 28;
  20.             }
  21.  
  22.             private function hideTitleWindow():void {
  23.                 titleWindow.height = 0;
  24.             }
  25.         ]]>
  26.     </mx:Script>
  27.  
  28.     <mx:VBox>
  29.         <mx:TitleWindow id="titleWindow"
  30.                 title="Invalid username and/or password."
  31.                 showCloseButton="true"
  32.                 width="100%"
  33.                 height="0"
  34.                 close="hideTitleWindow()" />
  35.  
  36.         <mx:Form>
  37.             <mx:FormItem label="Username:">
  38.                 <mx:TextInput id="username"
  39.                         maxChars="24" />
  40.             </mx:FormItem>
  41.             <mx:FormItem label="Password:">
  42.                 <mx:TextInput id="password"
  43.                         maxChars="24"
  44.                         displayAsPassword="true" />
  45.             </mx:FormItem>
  46.             <mx:FormItem>
  47.                 <mx:Button label="Login"
  48.                         click="showTitleWindow()" />
  49.             </mx:FormItem>
  50.         </mx:Form>
  51.     </mx:VBox>
  52.  
  53. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | No Comments » | 137 views Tags: , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll