flex自定义组件的制作

原创 2012年03月21日 10:22:46

以登录组件为例,说明自定义组件的使用

1.首先新建一个组件,名为CLogin.mxml,Based on TitleWindow。TitleWindow元素代表有标题的窗口,然后切换到Design视图,选择这个TitleWindow窗口,在属性框里编辑标题(Title属性),输入“用户登录”。然后我们加入Form控件并填入内容(FormItem),然后添加按钮以便提交,此时代码如下:

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="400" height="260" fontSize="22" fontWeight="bold" textAlign="center"
               title="用户登录">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <s:Form id="loginForm">
        <s:FormItem label="用户名:">
            <s:TextInput id="username" textAlign="left"/>            
        </s:FormItem>
        <s:FormItem label="密   码:" textAlign="left">
            <s:TextInput id="password" displayAsPassword="true"/>
        </s:FormItem>
    </s:Form>
    <s:Button id="loginbtn" x="274" y="160" label="登录"/>
    <s:Button id="register" x="56" y="160" label="重置"/>
</s:TitleWindow>
2.上面的登录只是布局,没加入事件处理程序,但是这已经可以算是一个登录组件了。组件制作完毕,下面使用组件:

新建一个主程序----mxml Application,进入Design视图,查看左下角的组件浏览器。  发现在Custom下多出来一个CLogin来,把它拖入设计面板,登录组件就显示在面板上了,再加上一个简单的按钮和一个监听该按钮的事件,用于测试, 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:ns1="*"
               minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <ns1:CLogin x="278" y="114">
    </ns1:CLogin>
    
    <s:Button id="bt1" x="750" y="120" label="click me" click="btnClick()"/>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function btnClick():void {
                Alert.show("you clicked!","Test");
            }
        ]]>
    </fx:Script>
</s:Application>

3. 修改命名空间xmlns:ns1变成你想要的,如下:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:myLogin="*"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<myLogin:CLogin x="278" y="114">
	</myLogin:CLogin>
	
	<s:Button id="bt1" x="750" y="120" label="click me" click="btnClick()"/>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private function btnClick():void {
				Alert.show("you clicked!","Test");
			}
		]]>
	</fx:Script>
</s:Application>
4. 自定义组件的属性:
大部分Flex控件都有事件属性,比如click,move等,自定义组件会继承他们Based on 的元素的属性和事件,那么我们的CLogin组件(也可以称之为自定义元素)就会继承mx:TitleWindow的全部可以继承的属性(属性、事件、特效、样式等等),那么它的特有属性如何来做呢?下面我们来为其加上其特有属性。加入自定义属性,修改代码CLogin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="400" height="260" fontSize="22" fontWeight="bold" textAlign="center"
			   title="用户登录">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<s:Form id="loginForm">
		<s:FormItem label="用户名:">
			<s:TextInput id="username" textAlign="left"/>			
		</s:FormItem>
		<s:FormItem label="密   码:" textAlign="left">
			<s:TextInput id="password" displayAsPassword="true"/>
		</s:FormItem>
	</s:Form>
	<s:Button id="loginbtn" x="274" y="160" label="登录"/>
	<s:Button id="register" x="56" y="160" label="重置"/>
	
	<fx:Script>
		<![CDATA[
			[Inspectable]
			private var status:String;
		]]>
	</fx:Script>
</s:TitleWindow>
加入一个属性status,修饰这个属性的[Inspectable]意思是,使得编译器和Flex Builder可以看到这个属性,并自动提示

5.自定义事件:

用元数据标签给CLogin添加自定义事件,修改CLogin.mxml代码:

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="400" height="260" fontSize="22" fontWeight="bold" textAlign="center"
			   title="用户登录">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Metadata>
		[Event("btnClicked")]
	</fx:Metadata>
	
	<s:Form id="loginForm">
		<s:FormItem label="用户名:">
			<s:TextInput id="username" textAlign="left"/>			
		</s:FormItem>
		<s:FormItem label="密   码:" textAlign="left">
			<s:TextInput id="password" displayAsPassword="true"/>
		</s:FormItem>
	</s:Form>
	<s:Button id="loginbtn" x="274" y="160" label="登录"/>
	<s:Button id="register" x="56" y="160" label="重置"/>
	
	<fx:Script>
		<![CDATA[
			[Inspectable]
			private var status:String;
		]]>
	</fx:Script>
</s:TitleWindow>
MXML相当于一个类,那么mx:Metadata标签就相当于给这个CLogin类加上元数据标签。

标签为事件标签,内容为[Event("btnClicked")],意思是自定义事件,名称为btnClicked。

6.给CLogin的登录按钮加入click事件:

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="400" height="260" fontSize="22" fontWeight="bold" textAlign="center"
			   title="用户登录">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Metadata>
		[Event("btnClicked")]
	</fx:Metadata>
	
	<s:Form id="loginForm">
		<s:FormItem label="用户名:">
			<s:TextInput id="username" textAlign="left"/>			
		</s:FormItem>
		<s:FormItem label="密   码:" textAlign="left">
			<s:TextInput id="password" displayAsPassword="true"/>
		</s:FormItem>
	</s:Form>
	<s:Button id="loginbtn" x="274" y="160" label="登录" click="login()"/>
	<s:Button id="register" x="56" y="160" label="重置"/>
	
	<fx:Script>
		<![CDATA[
			[Inspectable]
			private var status:String;
			
			private function login():void {
				dispatchEvent(new Event("btnCliced"));
			}
		]]>
	</fx:Script>
</s:TitleWindow>

在按钮被单击(click)的时候,我们设定执行了login方法,login方法执行命令dispatchEvent(new Event("btnClicked")) 意思是dispatchEvent发送事件通知,通知组件你自定义的btnClicked事件已经触发了。

到这里,我们通过自定义组件CLogin的登录按钮来触发btnClicked事件已经完成。

7.使用自定义事件:

这样,我们在主程序里就可以利用这个事件了

代码Login.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:myLogin="*"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<myLogin:CLogin x="278" y="114" btnClicked = "btnHandler(event)">
	</myLogin:CLogin>
	
	<s:Button id="bt1" x="750" y="120" label="click me" click="btnClick()"/>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private function btnClick():void {
				Alert.show("you clicked!","Test");
			}
			
			private function btnHandler(event:Event):void {
				Alert.show("Event btnClicked Called");
			}
		]]>
	</fx:Script>
</s:Application>
这样,登录按钮被单击就会触发btnClicked事件,从而执行主程序的btnClickHandler方法,弹出提示框:Event btnClicked Called

8.加入自定义效果:

效果是与事件不可分割的,那么自定义效果也是一样,与事件紧密联系在一起,比如btnClicked事件发生的时候要产生某种自定义效果,在CLogin.mxml中添加效果标签:

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="400" height="260" fontSize="22" fontWeight="bold" textAlign="center"
			   title="用户登录">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Metadata>
		[Event("btnClicked")]
		[Effect(name="btnClickedEffect", event="btnClicked")]
	</fx:Metadata>
	
	<s:Form id="loginForm">
		<s:FormItem label="用户名:">
			<s:TextInput id="username" textAlign="left"/>			
		</s:FormItem>
		<s:FormItem label="密   码:" textAlign="left">
			<s:TextInput id="password" displayAsPassword="true"/>
		</s:FormItem>
	</s:Form>
	<s:Button id="loginbtn" x="274" y="160" label="登录" click="login()"/>
	<s:Button id="register" x="56" y="160" label="重置"/>
	
	<fx:Script>
		<![CDATA[
			[Inspectable]
			private var status:String;
			
			private function login():void {
				dispatchEvent(new Event("btnClicked"));
			}
		]]>
	</fx:Script>
</s:TitleWindow>
9.使用自定义效果,修改Login.mxml代码:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:myLogin="*"
			   minWidth="955" minHeight="600">
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<mx:Blur id="myEffect" blurXFrom="100" blurYFrom="100" blurXTo="0" blurYTo="0"/>
	</fx:Declarations>
	
	<myLogin:CLogin x="278" y="114" btnClicked = "btnHandler(event)" btnClickedEffect="myEffect">
	</myLogin:CLogin>
	
	<s:Button id="bt1" x="750" y="120" label="click me" click="btnClick()"/>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private function btnClick():void {
				Alert.show("you clicked!","Test");
			}
			
			private function btnHandler(event:Event):void {
				Alert.show("Event btnClicked Called");
			}
		]]>
	</fx:Script>
</s:Application>

这样一个简单的登录组件就好了


相关文章推荐

flex自定义组件事件DEMO

  • 2014年11月18日 21:49
  • 2.41MB
  • 下载

flex自定义组件

  • 2013年12月30日 10:11
  • 3.23MB
  • 下载

Flex手机项目继承IconItemRenderer自定义List组件

在学习Flex手机项目的过程中,用到了List组件。系统默认的List有两种形式,一种是只显示一行文件的LabelItemRenderer简单样式,另一种为继承了LabelItemRenderer样式...
  • gsh10zh
  • gsh10zh
  • 2013年12月16日 13:52
  • 1211

Flex AIR自定义Mobile的弹出框组件

手机应用没有弹出框组件,需要自定义。

flex中自定义网格组件

package com.cimx.user_defined_component{ import flash.display.DisplayObject; import flash.events.Eve...

Flex 实现一个自定义组件

如果要创建一个自定义组件,你需要重写UIComponent类的某些方法,最少需要重写如下方法:构造函数, createChildren(), commitProperties(), measure()...

Flex实现组件自定义倒影效果之一:继承于UIComponent

ReflectionManager 类 package myComponents { import flash.display.Bitmap; import flash.display.Bit...

flex自定义组件(mxml文件)

本来是每天写一点的,上次到现在差6篇,给自己提点醒,免得又忘了。今天本来是想看看TabNavigator中各个选项卡是一起初始化还是点开谁就初始化谁的,却莫名奇妙的看了一下自定义组件。关于选项卡的问题...
  • flygoa
  • flygoa
  • 2012年08月29日 02:26
  • 2158

Flex企业应用开发实践学习笔记(六)——使用ActionScript创建自定义组件

1. 为什么要创建自定义组件 创建自定义组件通常有以下目的: 更改已有组件的可视化外观或可视化特性。 创建复合组件将两个或多个组件包装在新组件中。 通过继承UIComponent类来创建全新的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex自定义组件的制作
举报原因:
原因补充:

(最多只允许输入30个字)