`
anmo_china
  • 浏览: 16155 次
  • 性别: Icon_minigender_1
  • 来自: 无锡
最近访客 更多访客>>
社区版块
存档分类
最新评论

使用MXML标签来完成事件处理

    博客分类:
  • Flex
阅读更多
这里演示一个完整的例子,
示例说明:一个简单的用户登录,在登录的时候做一些常见的判断,然后提示用户当前登录情况

1、新建工程
2、新建类,自定义事件,并且在类中声明变量用于存放用户名密码
package com.anmo
{
	import flash.events.Event;

	/**
	 * 此类用于存放用户名和密码
	 */
	public class LoginFormEvent extends Event
	{
		public var name:String = "";
		public var password:String = "";
		public function LoginFormEvent(type:String)
		{
			super(type, false, false);
		}
		
	}
}

3、新建组件,就是将类库中已经有的控件组合成一个新的组件,比如组合成一个登陆的表单
      new -> MXML Component -> 输入名称(LoginForm),并且选择从panel继承 -> finish
     然后向组件中拖入label、文本框和按钮,取好名字,保存后会再components中的custom下面就会多了一个LoginForm控件,然后将空间拖到页面中

     用MXML标签向LoginForm中添加事件:事件的名称是什么,类型是什么
         <mx:Metadata>
            [EVENT(name="loginEvent",type="com.anmo.LoginFormEvent")]
        </mx:Metadata>

     在LoginForm中为点击按钮时注册事件流
<mx:Script>
    <![CDATA[
       import com.anmo.LoginFormEvent;
              //定义鼠标单击事件,将用户名、密码带着发送了出去
              internal function onClick(evt:MouseEvent):void{
              var e:LoginFormEvent = new LoginFormEvent("loginEvent");
              e.name = txt_username.text;
              e.password = txt_password.text;
              dispatchEvent(e);
          }
    ]]>
</mx:Script>


      然后将事件添加到按钮中,和HTML添加方式一样click="onClick(event)"

4、现在当点击按钮时会发送事件,并且带上用户名、密码,但是没有地方接收,所以要在主页面中接收
             <ns1:LoginForm x="256" y="87" id="loginForm" loginEvent="login(event)">
           </ns1:LoginForm>
           //loginEvent="login(event)"等同于loginForm.addEventListerner("loginEvent",login)

      login方法的代码:
<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import com.anmo.LoginFormEvent;
			//响应事件,在方法中接收发送的用户名、密码
			internal function login(evt:LoginFormEvent):void{
				if(evt.name == "anmo" && evt.password == "admin"){
					Alert.show("你已经成功登陆","提示");
				}else{
					Alert.show("对不起,输入的信息有误","提示");
				}
			}
		]]>
	</mx:Script>


———————————————————————————————————————————————————————————
下面是全代码:

主页面:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import com.anmo.LoginFormEvent;
			//响应事件,在方法中接收发送的用户名、密码
			internal function login(evt:LoginFormEvent):void{
				if(evt.name == "anmo" && evt.password == "admin"){
					Alert.show("你已经成功登陆","提示");
				}else{
					Alert.show("对不起,输入的信息有误","提示");
				}
			}
		]]>
	</mx:Script>
	<ns1:LoginForm x="256" y="87" id="loginForm" loginEvent="login(event)">
	</ns1:LoginForm>
	
</mx:Application>



LoginForm组件:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="200" borderColor="#5DD8F2" title="用户登录" fontSize="12">

	<mx:Metadata>
		[Event(name="loginEvent",type="com.anmo.LoginFormEvent")]
	</mx:Metadata>
	
	<mx:Script>
		<![CDATA[
			import com.anmo.LoginFormEvent;
			//定义鼠标单击事件,将用户名、密码带着发送了出去
			internal function onClick(evt:MouseEvent):void{
				var e:LoginFormEvent = new LoginFormEvent("loginEvent");
				e.name = txt_username.text;
				e.password = txt_password.text;
				dispatchEvent(e);
			}
		]]>
	</mx:Script>
	<mx:Label x="72" y="36" text="用户名:" fontSize="12" fontWeight="bold"/>
	<mx:Label x="72" y="82" text="密   码:" fontWeight="bold" fontSize="12"/>
	<mx:TextInput x="146" y="34" id="txt_username"/>
	<mx:TextInput x="146" y="80" id="txt_password" displayAsPassword="true"/>
	<mx:Button x="158" y="126" label="登   录" id="btn_submit" fontWeight="bold" 
		fontSize="12" click="onClick(event)"/>
	
</mx:Panel>



自定义事件类:LoginFormEvent
package com.anmo
{
	import flash.events.Event;

	/**
	 * 此类用于存放用户名和密码
	 */
	public class LoginFormEvent extends Event
	{
		public var name:String = "";
		public var password:String = "";
		public function LoginFormEvent(type:String)
		{
			super(type, false, false);
		}
		
	}
}
分享到:
评论

相关推荐

    flex的mxml语言基础

    总的来说,Flex项目由MXML和ActionScript协同完成,MXML负责界面展示,ActionScript负责逻辑处理。命名空间作为类的组织方式,避免了类名冲突。掌握MXML的基础知识,对于高效开发Flex应用至关重要。通过深入学习和...

    mxml-master_解析xml_minixml代码_

    XML(eXtensible Markup Language)是一种用于标记数据的语言,广泛应用在互联网上,用于存储和传输结构化数据。本文将详细介绍基于C语言...对于需要处理XML数据的C程序员来说,掌握Minixml是提高开发效率的有效途径。

    原创:实现view(mxml)和代码分离的好方法

    在Flex3项目开发中,随着项目规模的扩大,MXML文件内的`&lt;mx:script&gt;`区域逐渐充斥着各种事件处理、业务逻辑等代码,这不仅使得MXML文件变得庞大难于管理,还增加了定位特定代码片段的难度。为了解决这一问题,开发者...

    flex 关于事件的例子

    事件监听器是处理事件的方法;事件流描述了事件从源传播到目标的路径。 2. **事件类型** Flex中有多种内置事件类型,如`MouseEvent`(鼠标事件)、`KeyboardEvent`(键盘事件)、`FocusEvent`(焦点事件)和`...

    flex帮助文档4b

    有两种方法可以关联按钮单击事件与监听器:一种是在MXML标签中直接指定`click`属性,另一种是使用ActionScript编写事件处理函数。 - **TextInput与Label控件**:文档展示了如何使用`TextInput`控件接收用户输入,...

    flex事件运行流程

    通常,我们使用 `&lt;mx:Application&gt;` 标签来创建应用程序,但如果使用ActionScript创建,建议避免在构造函数中创建组件,而是放在`createChildren()`函数中,以优化性能。 Flex的SWF文件包含两帧:第一帧包含了...

    使用VIM开发Flex - 基础环境设置

    使用mxml.vim,VIM将能够识别MXML标签,提供相应的语法高亮,并可能包含对XML属性的补全功能,提升开发效率。 接下来,设置VIM的工作环境。这通常涉及配置.vimrc文件,这是一个存放VIM个性化设置的文本文件。在....

    flex3 cookbook

    4. **编写ActionScript和MXML代码:** 将ActionScript代码嵌入MXML文件中可以更方便地处理事件和数据。例如,使用`&lt;mx:Script&gt;`标签在MXML文件内编写ActionScript代码。 5. **创建函数声明:** 在ActionScript中定义...

    Flex_2_中的元数据标签

    - **定义**:除了直接标记变量外,还可以通过结合使用 getter 和 setter 方法来增强 `[Bindable]` 标签的功能。这种方式可以更加灵活地控制数据的访问和修改行为,并且可以在数据更改前后执行额外的操作。 - **用途*...

    使用FLEX 和 Actionscript开发FLASH 游戏(一)

    总之,使用FLEX和ACTIONSCRIPT开发FLASH游戏,你需要掌握MXML和ACTIONSCRIPT的结合使用,理解事件处理机制,以及如何处理图形和动画。随着系列教程的深入,你将逐步学习如何构建游戏逻辑、处理用户输入、实现物理...

    Flex 3 CookBook 简体中文

    MXML用于定义界面结构,而ActionScript负责处理事件、业务逻辑和数据操作。例如,一个 `&lt;mx:Button&gt;` 标签在MXML中定义了一个按钮,而相应的ActionScript代码可以创建按钮实例,设置其属性和响应事件。 MXML文件...

    Flex 3 Cookbook[中文版].pdf

    - **ActionScript**:这种脚本语言用来处理事件和应用程序的逻辑控制。它可以在 MXML 文件内的 `&lt;mx:Script&gt;` 标签中嵌入。 - **MXML 与 ActionScript 的联系**: - 例如,下面的 MXML 代码和 ActionScript 代码...

    Flex 3 Cookbook

    - MXML文件中的`&lt;mx:Script&gt;`标签使用 - ActionScript在MXML之外的独立应用限制 - 循环、函数定义与条件语句的实现方式 - 创建组件与类的方法 - 添加事件监听器 - 编写ActionScript与MXML代码的最佳实践 - ...

    flex4 做和QQ一样的窗体 最大化 最小化 关闭 拖动改变大小

    在Flex4中,我们可以使用Spark容器(如VGroup或HGroup)来组织组件,并通过ActionScript或MXML绑定事件处理函数来实现窗口的拖动功能。窗口的最大化、最小化和关闭按钮通常作为子组件添加到窗口中,这在后面几个文件...

    FLEX基础教程 其余部分

    在MXML中,可以通过动作标签或事件处理函数与ActionScript代码进行交互。例如,上面的按钮点击事件处理函数可能是这样的: ```actionscript private function handleClick(event:Event):void { trace("按钮被点击...

    Flex+Java 文件上传

    在提供的代码段中,我们看到`mx:Application`包含了事件监听器和控件,如`FileReference`,用于处理文件选择、上传进度和完成事件。 - `Security.allowDomain("*")`允许从任何域加载数据,这对于测试和开发是必要的...

Global site tag (gtag.js) - Google Analytics