- 浏览: 18515 次
- 性别:
- 来自: 苏州
最新评论
以登录组件为例,说明自定义组件的使用
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中用state来表示不同的状态的经典的例子
2012-03-20 21:06 623<?xml version="1.0" ... -
flex自定义无参数事件
2012-03-21 11:14 581自定义事件必须注意几点: (1)自定义事件通过继承Event ... -
flex有参数的自定义事件,数据验证测试
2012-03-21 12:05 966自定义带参数的事件应该明白: (1)自定义事件继承Even ... -
flex自定义右键菜单
2012-03-21 15:56 1273<?xml version="1.0" ... -
flex currenTarget与 target 的区别
2012-03-24 14:04 825开始学习Flex,会在别人 ... -
dataGrid过滤器查询和渲染器的使用
2012-03-26 09:19 1218以前没用过滤器,查询比较麻烦,需要遍历整个arrayColle ... -
Flex tree增加,删除,查询并定位节点
2012-03-27 17:14 1055直接上代码: <?xm ... -
Flex tree 双击展开收起节点,更改图标设置
2012-03-28 09:33 1363首先设置tree属性doubleClickEnabled=&q ... -
Flex tree 模糊查询节点,重复节点再次查询自动下一个
2012-03-29 10:55 1079//根据关键字 ... -
flex 在线帮助文档
2012-03-31 15:55 872flex 在线帮助文档: http://livedocs.a ... -
Flex设置form表单一些属性设置
2012-04-01 15:53 1418设置form表单label左对齐 ... -
一个小错误浪费了我时间
2012-05-02 20:02 626<mapper namespace="com. ... -
Flex 字幕滚动效果 网站公告效果
2012-05-07 14:17 1311这篇总结的不错 <?xml version ...
相关推荐
flex 自定义组件,UI,flex 自定义组件。
研究Flex 组件声明周期,了解组件的生成步骤
Flex自定义组件和自定义事件的使用。 Flex自定义组件和自定义事件的使用。
flex自定义组件事件DEMO,一个简单的flex自定义组件的demo
Flex4自定义组件 介绍了flex中如何自定义组件以及相关应用
flex 高级自定义组件 需要重写的方法,以及为什么要重写,何时调用等。
flex4.5自定义组件介绍,自定义组件前提条件
FLex自定义写的控件,有时间,datagrid,tree,combox等,以及常用的处理字符串,弹出窗口
很通用的Flex 分页组件,经过本人测试,可以应用到项目中,很方便
Flex组件开发可分为两种. 一是在mxml中创建自定义组件.另一种则在actionscript class中创建,分别知道他们的含义。
Flex3自定义组件类似于Fieldset
FLEX自定义的日历组件,带有日志记录功能FLEX自定义的日历组件,带有日志记录功能FLEX自定义的日历组件,带有日志记录功能FLEX自定义的日历组件,带有日志记录功能
flex flex组件 flex下拉组件
flex自定义的树形结构,展开,收缩,多级目录支持
你还在头痛flex4组件皮肤怎么自定义吗?看我给你们上传的吧;因皮肤中还是有部分mx组件,如果不能正常使用,请自己把所以mx组件改成sp组件
Flex 组件Flex 组件Flex 组件Flex 组件Flex 组件
Flex自定义加载条的一个小示例。里面有readMe文本
Flex 自定义ToolTip源代码,可以运行的源代码
几经尝试发现是由于Flex控件在旋转后中文就不显示了,因此做了相应修改以支持中文,并添加了一些删除,增加子组件的方法,以方便编程式的使用。当然如果熟悉了Flex组件的生命周期,可以根据需求增添功能。 对于中文...
flex 流程图 制作 flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex ...