前期准备:
点击File菜单 -> New -> MXML Component,然后弹出一个对话框。
在对话框中输入组件名,选择此组件继承的类型,如:Canvas,DataGrid,ComboBox …… 等。
然后选择组件的大小,点击Finish即可。
关于组件继承的类型,假设Based on Canvas,那么组件的根元素即为mx:Canvas,此元素的含义为空白面板,那么设计人员可以任意在这个面板容器内放置任何东西,就像开发主程序一样。那么此组件类似一个容器。
如果Based on ComboBox,那么根元素即为mx:ComboBox,此元素的含义为下拉框,那么设计人员可以在下拉框的的内部任意定制内容或代码,那么此组件定制了一个下拉框。
例,登录组件:
制作组件:
首先按照上面的步骤新建一个组件,名为CLogin.mxml,Based on TitleWindow。TitleWindow元素代表有标题的窗口。
然后切换到Design视图,选择这个TitleWindow窗口,在属性框里编辑标题(Title属性),输入“用户登录”。
此时的代码大体如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
</mx:TitleWindow>
然后我们加入Form控件并填入内容(FormItem),然后添加按钮以便提交,此时代码如下:
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
<mx:Form width="248" height="100" label="Button" x="10" y="10">
<mx:FormItem label="用户名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密码" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>
上面的登录只是布局,没加入事件处理程序,但是这已经可以算是一个登录组件了(虽然只能看不能用,呵呵)
组件制作完毕,然后就可以使用他了
使用组件:
打开主程序,进入Design视图,查看左下角的组件浏览器。
你会发现在Custom下多出来一个CLogin来,把它拖入设计面板,哈,登录组件就显示在面板上了,就这么简单。
代码可能会如下:
<?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;
private function btnClick() : void {
Alert.show("test","Test");
}
]]>
</mx:Script>
<mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
<ns1:CLogin x="107" y="94" width="204" height="117">
</ns1:CLogin>
</mx:Application>
修改命名空间xmlns:ns1变成你想要的比如xmlns:widget,最后的代码:
示例代码:Hello.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function btnClick() : void {
Alert.show("test","Test");
}
]]>
</mx:Script>
<mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
<widget:CLogin x="107" y="94" width="204" height="117">
</widget:CLogin>
</mx:Application>
好了,一切完成。
自定义组件的属性:
看到这里大家也都应该清楚地知道,大部分Flex控件都有事件属性,比如click,move等,自定义组件会继承他们Based on 的元素的属性和事件,那么我们的CLogin组件(也可以称之为自定义元素)就会继承mx:TitleWindow的全部可以继承的属性(属性、事件、特效、样式等等),那么它的特有属性如何来做呢?下面我们来为其加上其特有属性。
加入自定义属性:
示例代码CLogin.mxml:
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
<mx:Script>
<![CDATA[
[Inspectable]
public var status : String;
]]>
</mx:Script>
分享到:
相关推荐
flex开发自定义控件
学习flex,学习开发自定义控件。顶起RIA应用程序!www的下一代技术!
详解Flex4.0自定义控件的开发步骤以及注意事项
Flex视图切换,自定义控件Demo.rar Flex视图切换,自定义控件Demo.rar Flex视图切换,自定义控件Demo.rar Flex视图切换,自定义控件Demo.rar
NULL 博文链接:https://whp0731.iteye.com/blog/726223
Flex4自定义组件 介绍了flex中如何自定义组件以及相关应用
本人收集了一些在项目中经常用到的自定义控件共享给大家。其中包括树形下拉框,带复选框的树和列表,Tab导航菜单,开关门效果等等。
flex4 自定义事件 用法 源码 完整项目导入可运行
Flex 自定义控件(包含源代码)这个已经够开发使用了
Flex 自定义 时间 日历 控件
flex 高级自定义组件 需要重写的方法,以及为什么要重写,何时调用等。
Flex4 自定义通用ImageButton
该文件为mxml格式的自定义控件,导入项目中就能用非常方便好用.
flex自定义的一个IP控件,该IP控件就像我们操作系统里面的IP控件一样。
使用Flex ,AS,实现的适用于Flex Mobile平台的对话框。
带有时间、小时分钟、格式化功能的日期控件
flex TitleWindow自定义最大最小化
Flex 自定义的时间控件
Flex3自定义组件类似于Fieldset
FLEX 开发学习不可缺少的工具,下载后解压运行TourDeFlex.EXE 就可以看到FLEX3,FLEX4所有的控件基本用法,是FLEX学习开发最好最方便的工具.一共三个压缩包请注意下载完整