无痕客

落花无情,流水无痕……

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

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>

posted on 2010-01-09 10:04  无痕客  阅读(318)  评论(0编辑  收藏  举报