flex自定义组件的制作
来源:互联网 发布:电机维修数据价格表 编辑:程序博客网 时间:2024/05/22 17:03
以登录组件为例,说明自定义组件的使用
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自定义组件的制作
- 用flash制作SWC文件,生成flex自定义组件
- [Flex]自定义DataGrid组件的标题
- 自定义flex的数据验证组件!
- 自定义真正的可重用Flex组件
- 自定义flex的数据验证组件!
- Flex自定义事件和组件的使用方法
- Flex自定义事件和组件的使用方法
- flex自定义组件的编写步骤
- 谈谈flex自定义组件
- Flex自定义组件
- 自定义Flex组件(2)
- 自定义FLEX组件(3)
- Flex 自定义组件
- flex自定义组件
- Flex自定义组件问题
- FLEX自定义组件
- Flex 自定义组件外观
- 我所知道的正则表达式
- pls_integer类型
- 网页自动跳转
- javascript对象的几种方式
- Spring-管理Bean 使用BeanFactory管理Bean
- flex自定义组件的制作
- Java多线程编程总结
- 关于watir selenium和webdriver soda cucumber
- HTTP POST和GET的区别详解
- 备战伦敦奥运,Airbnb收购英国竞争者Crashpadder
- WF4.0_1
- Java读写大文本文件(2GB以上)
- Spring-事件传递
- WF4.0_2