`
gdljg0460
  • 浏览: 42883 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

一个Flex做的登陆控件

    博客分类:
  • flex
阅读更多

最近在学习Flex,之前一直在忙,没空整理一下,现在有空整理整理一下,之前用Flex做了个简单的登陆控件。希望大家多点给点意见:

frmLogin.mxml

 

代码:

1<?xml version="1.0" encoding="utf-8"?>
  2<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="250" height="170">
  3    <mx:Panel x="0" y="0" width="250" height="170" layout="absolute" title="登陆" fontSize="15" id="panel1" visible="true">
  4        <mx:Label x="10" y="14" text="用户名" fontWeight="bold"/>
  5        <mx:Label x="10" y="42" text="密码" fontWeight="bold"/>
  6        <mx:TextInput x="71" y="12" width="149" height="21" fontSize="10" id="username"/>
  7        <mx:TextInput x="71" y="40" width="149" height="21" displayAsPassword="true" fontSize="10" id="userpass"/>        
  8        <mx:ControlBar height="50" y="74" width="230" horizontalAlign="center" verticalAlign="top">
  9            <mx:Button label="登陆" fontSize="12" id="button_login" click="button_login_click()"/>
 10            <mx:Button label="注册" fontSize="12" id="button_reg" click="button_reg_click()"/>
 11        </mx:ControlBar>
 12    </mx:Panel>
 13    <mx:Panel x="0" y="0" width="250" height="170" layout="absolute" title="已登陆" fontSize="15" id="panel2" visible="false">
 14        <mx:Label x="11" y="25" text="欢迎你" fontSize="22" fontWeight="bold"/>
 15        <mx:Label x="92" y="25" fontSize="22" fontWeight="bold" width="128" id="label_username" color="#F64617" text="Vincent"/>
 16        <mx:ControlBar height="45" y="89" horizontalAlign="center" verticalAlign="top">
 17            <mx:Button label="个人信息" fontSize="12" id="button_detail" click="button_detail_click()"/>
 18            <mx:Button label="退出登陆" fontSize="12" fontWeight="bold" id="button_logout" click="button_logout_click()"/>
 19        </mx:ControlBar>
 20    </mx:Panel>
 21    <mx:Metadata>
 22        [Event(name="loginSucceed",type="vincent.flex.controls.login.events.LoginSucceedEvent")]
 23        [Event(name="loginFail",type="flash.events.Event")]
 24        [Event(name="logout",type="flash.events.Event")]
 25        [Event(name="showUserDetail",type="flash.events.Event")]
 26        [Event(name="doRegister",type="flash.events.Event")]
 27    </mx:Metadata>
 28    <mx:Script>
 29        <![CDATA[
 30            import vincent.flex.controls.login.events.LoginSucceedEvent;
 31            import vincent.flex.controls.login.User;
 32            import mx.controls.Text;
 33            import mx.controls.Alert;
 34            import com.adobe.serialization.json.JSON;
 35            
 36            private const ACTION_LOGIN:String  = "login";
 37            private const ACTION_LOGOUT:String = "logout"
 38            
 39            private var action:String;
 40            public  var currentUser:User;
 41            
 42            private function button_reg_click():void
 43            {
 44                this.dispatchEvent(new Event("doRegister"));
 45            }
 46            
 47            private function button_login_click():void
 48            {
 49                if(username.text==""||userpass.text=="")
 50                {
 51                    Alert.show("请填写用户名和密码!","登陆");
 52                    return;
 53                }
 54                action = this.ACTION_LOGIN;
 55                var data:String = "un="+encodeURI(username.text)+"&up="+encodeURI(userpass.text);
 56                userpass.text = "";
 57                doRequest("Authorization","UserLogin",data);
 58            }
 59            
 60            private function button_logout_click():void
 61            {
 62                action = this.ACTION_LOGOUT;
 63                var data:String = "";
 64                doRequest("Authorization","UserLogout",data);
 65            }
 66            
 67            private function button_detail_click():void
 68            {
 69                this.dispatchEvent(new Event("showUserDetail"));
 70            }
 71            
 72            private function doRequest(am:String,at:String,data:String):void
 73            {
 74                var request:URLRequest = new URLRequest("/index.php?am="+am+"&at="+at+"&dm=2&IsPosted=1");
 75                var uLoader:URLLoader = new URLLoader();
 76                request.method = URLRequestMethod.POST;
 77                request.data = data;
 78                
 79                uLoader.addEventListener(Event.COMPLETE,doEvent);
 80                uLoader.addEventListener(HTTPStatusEvent.HTTP_STATUS,doEvent);
 81                uLoader.addEventListener(Event.OPEN,doEvent);
 82                uLoader.addEventListener(ProgressEvent.PROGRESS,doEvent);
 83                uLoader.addEventListener(IOErrorEvent.IO_ERROR,doEvent);
 84                uLoader.addEventListener(SecurityErrorEvent.SECURITY_ERROR,doEvent);
 85                
 86                uLoader.load(request);                
 87            }
 88            
 89            private function doEvent(e:Event):void
 90            {
 91                switch(e.type)
 92                {
 93                    case Event.COMPLETE:
 94                    {
 95                        var uLoader:URLLoader = e.currentTarget as URLLoader;
 96                        var result:Object = (JSON.decode(uLoader.data));
 97                        doResult(result);
 98                    }
 99                    default:
100                    {
101                        
102                    }
103                }
104            }
105            
106            private function doResult(result:Object):void
107            {
108                var state:Object = result.state;
109                var data:Object = result.data;
110                var am:String = result.state.moduleName;
111                var event:Event;
112                if(am=="AuthorizationAction_UserLogin")
113                {
114                    event = new Event("loginFail");
115                    this.dispatchEvent(event);
116                }
117                else if(am=="ActionResult")
118                {
119                    if(this.action==this.ACTION_LOGIN)
120                    {
121                        var user:User  = new User;
122                        user.userId    = result.current_user.user_id;
123                        user.userName  = result.current_user.user_name;
124                        user.userLevel = result.current_user.user_level;
125                        this.currentUser = user;
126                        event = new LoginSucceedEvent("loginSucceed");
127                        (LoginSucceedEvent(event)).user = user;
128                        panel1.visible = false;
129                        panel2.visible = true;
130                        this.label_username.text = user.userName;
131                        this.dispatchEvent(event);
132                    }
133                    else if(this.action==this.ACTION_LOGOUT)
134                    {
135                        panel1.visible = true;
136                        panel2.visible = false;
137                        this.currentUser = null;
138                        event = new Event("logout");
139                        this.dispatchEvent(event);
140                    }
141                }
142            }
143
144        ]]>
145    </mx:Script>
146</mx:Canvas>
147

 

登陆成功事件 LoginSucceedEvent.as

 

package vincent.flex.controls.login.events
 2{
 3    import flash.events.Event;
 4    
 5    import vincent.flex.controls.login.User;
 6    
 7    public class LoginSucceedEvent extends flash.events.Event
 8    {
 9        public function LoginSucceedEvent(type:String,
10                                          bubbles:Boolean = false,
11                                           cancelable:Boolean = false,
12                                           oldX:Number = NaN, oldY:Number = NaN)
13        {
14            super(type, bubbles, cancelable);
15        }
16        public var user:User;
17    }
18}

 

 

User.as:

 

package vincent.flex.controls.login
 2{
 3    public class User
 4    {
 5        public function User()
 6        {
 7        }
 8        public var userId:int;
 9        public var userName:String;
10        public var userLevel:String;
11        
12    }
13}

 

FlexTest01.mxml:

 

<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="488" width="746" xmlns:ns1="*">
 3    <mx:Script>
 4        <![CDATA[
 5            import mx.controls.Alert;
 6
 7            import vincent.flex.controls.login.events.*;
 8
 9            public function doLoginSucceed(e:LoginSucceedEvent):void
10            {
11                Alert.show("Welcome!");
12            }
13            
14        ]]>
15    </mx:Script>
16    <ns1:frmLogin x="248" y="100" id="winlogin" loginSucceed="doLoginSucceed(event)">
17    </ns1:frmLogin>
18</mx:Application>

 



 

 

  • 大小: 26.8 KB
  • 大小: 54.1 KB
分享到:
评论
2 楼 yexin218 2009-02-25  
有点复杂哦
1 楼 runner1977 2008-12-16  
编译有错啊, JSON的类是不是第三方的, 这个类找不到

相关推荐

    Flex控件折叠效果

    "Flex控件折叠效果"是一个常见的需求,它涉及到用户界面(UI)的动态性与可扩展性,使得用户能更有效地管理和浏览信息。本文将深入探讨Flex控件折叠效果的相关知识点,包括其工作原理、实现方式以及实际应用。 Flex...

    FLEX控件

    FLEX控件

    flex 图片展示控件(放大镜效果)

    在本文中,我们将深入探讨如何在Flex环境中创建一个图片展示控件,该控件具有放大镜效果。Flex是一种基于ActionScript 3.0的开源框架,用于构建富互联网应用程序(RIA)。通过使用Flex,我们可以轻松地创建交互式、...

    flex8表格控件

    flex8表格控件,可以方便的实现表格的数据处理,并且里面附带了全面的例子,解决很多程序员的表格问题

    flex时间控件

    在Flex时间控件中,用户可以方便地选择年、月、日以及小时、分钟和秒,以精确设定一个日期和时间值。这样的控件在许多应用场景中非常有用,比如在线预订系统、时间安排工具或者日历应用等。 要使用Flex时间控件,...

    flex3.5时间控件(含时分秒)

    总结起来,`flex3.5时间控件(含时分秒)`的实现涉及到创建一个自定义组件`TimeChooser`,它包含了小时、分钟和秒的选择功能,并在`Test`测试应用程序中进行展示和验证。通过这样的控件,开发者可以方便地在Flex 3.5...

    flex 时间选择控件

    Flex是一个开源的开发框架,基于ActionScript和MXML,用于构建富互联网应用程序(RIAs)。MXML是Flex的主要标记语言,用于描述用户界面的布局和组件。在提供的文件`TimeChooser.mxml`中,我们可以预期它定义了一个...

    flex通用分页控件

    开发者可以下载这个项目,研究其源码,了解如何实现一个通用的Flex分页控件,或者直接将其集成到自己的项目中使用。 总结起来,Flex通用分页控件是Flex应用中必不可少的一部分,它提供了高效的数据浏览方式,同时...

    Flex开发自定义控件

    本文将详细介绍如何在Flex中创建自定义控件,并通过一个具体的登录组件示例来展示其具体实现过程。 #### 二、Flex自定义控件概述 在Flex中,自定义控件是指根据特定需求构建的新控件,这些控件可以基于现有的Flex...

    flex8 网格控件

    Flex8网格控件是Adobe Flex框架中的一个关键组件,它在构建富互联网应用程序(RIA)时扮演着重要的角色。Flex是一种基于ActionScript和MXML的开放源代码开发平台,主要用于创建交互式、高性能的Web应用。Vb6,即...

    flex多文件上传控件(flex源码)

    该控件是通过Adobe Flash Builder 4进行开发的,Flash Builder是一个集成开发环境(IDE),专为使用Flex和ActionScript进行开发而设计。它提供了代码编辑、调试和部署功能,让开发者能够更高效地创建Flex应用。 在...

    flex 分页控件

    综上所述,创建一个自定义的Flex分页控件涉及到组件设计、事件处理、数据绑定、皮肤化等多个方面。通过深入理解和实践这些知识点,开发者可以构建出功能强大、易于使用的分页工具,提升应用的用户体验。提供的文件...

    flex 自定义控件、事件

    这个主题聚焦于“flex自定义控件与事件”,这是一个关键的开发概念,特别是对于那些希望深入理解Flex架构和提升应用用户体验的开发者来说。 自定义控件在Flex开发中扮演着重要角色,它们允许开发者根据项目需求创建...

    flex视频播放控件

    flex视频播放控件

    Flex 写的一个combox多选控件

    本篇将详细讲解如何在Flex中创建一个支持多选功能的Combox控件,并基于提供的文件名“HgCheckBox.as”和“MultiSelectComboBox.mxml”进行分析。 首先,我们要理解Flex中的Combox基本结构。通常,Combox由两部分...

    flex分页控件的使用

    在Flex开发中,分页控件是用于展示大量数据时必不可少的一个组件,它允许用户以较小的数据块(每页)浏览整个数据集,从而提高用户体验并减轻服务器负载。本篇文章将详细讲解如何在Flex中创建和使用分页控件。 首先...

    在flex的dataGrid控件中显示图片的实践

    Flex是一个基于ActionScript和MXML的开源框架,主要用于构建富互联网应用程序(RIA)。DataGrid是Flex提供的一个强大的组件,它可以用来展示动态数据集,包括文本、数字,以及在本例中的图片。 在Flex中显示图片...

    Flex4.0自定义控件

    - **基于`Canvas`的自定义控件**:此类控件通常作为一个空白画布,允许开发者自由地放置各种UI元素。例如,可以在其中添加按钮、文本框等组件。 - **基于`ComboBox`的自定义控件**:此类控件以下拉框的形式呈现,...

    Flex-Java-Demo.rar_flex_flex 控件

    在"Flex-Java-Demo.rar_flex_flex 控件"这个压缩包中,我们很显然会发现一个关于Flex与Java互操作性的演示项目。下面将详细探讨相关的知识点。 1. **Flex**:Flex是由Adobe公司开发的一种开源框架,用于构建基于...

    flex实现的拖拽控件

    下面我们将深入探讨如何在Flex中创建一个自定义的拖拽控件。 首先,我们需要创建一个可拖动的组件。这通常是一个MX或Spark组件,如Canvas或Button。在组件上添加监听器,捕获鼠标按下(mousedown)事件,这是拖动...

Global site tag (gtag.js) - Google Analytics