- 浏览: 580286 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
smilezhouwei:
请问CruiseControl在加载jar包时,由于jar包过 ...
修改CruiseControl的端口 -
zengxuefei:
不起作用啊,有bug
Flex+Java多文件上传 -
lzeus:
模仿的tomcat源码吧?
java事件处理机制(自定义事件)【转】 -
yangbobestone:
...
FreeMarker整合Struts2 -
fddjxllren:
那是因为你没配置事务,楼主的那个主要是针对事务的写法
Spring2.5+JUnit4单元测试
在一个典型的应用程序中,并不会把所有代码都编写到一个文件中。这样会使多个开发者同事开发同一个项目和调试很困难,也会阻碍代码重用。取而代之,使用多个MXML和ActionScript文件来开发程序。这种架构会促进模块化设计、代码重用、多人开发统一程序。MXML组件是一个MXML文件,在其他文件内部通过MXML标记来引用它。MXML组件的最大用处就是扩展已经存在的Flex组件的功能。
例如,Flex支持ComboBox控件,你可以把它作为表单的一部分从客户那里收集地址信息。你可以使用ComboBox让用户从全世界的国家列表中选择地址中的国家部分。在一个应用程序中有多个地方用户需要输入地址。使用世界上所有国家信息来创建和初始化多个ComboBox是非常乏味的事情。
Flex遵循这样的原则:你创建一个自定义MXML组件,它包含一个ComboBox控件并且所有国家的名字信息。那么,无论在那里你增加一个国家选择器,你都可以使用你自定义的MXML组件。
本文分为如下几部分:
创建一个简单的自定义组件
引用一个自定义组件的属性和方法
创建一个复合的自定义组件
创建一个高级的自定义组件
创建一个简单的自定义组件
你可以在一个MXML文件中创建一个MXML组件,这个文件的名字就变成了这个自定义组件的标签名。比如:一个文件名字叫做CountryComboBox.mxml,使用标签<CountryComboBox>就可以定义这个组件。
一个MXML组件的根标签,是一个组件的标签,可以是Flex组件也可以是其他MXML组件。根标签指定http://www.adobe.com/2006/mxml作为命名空间。例如,下边的MXML组件扩展标准的Flex ComboBox控件。可以把自定义组件的文件放在项目的根目录中,也可以放在一个子目录中。Adobe推荐后一种方法作为最佳实践。在这个例子中自定义组件被放置到componects文件夹中。在主程序的MXML文件中,映射componects文件夹到custom命名空间,使用全标签名<custom:CountryComboBox>来应用这个组件。
提示:在现实世界中,你可能看到自定义组件被放置在公司域名倒叙的目录结构中。(比如, xmlns:custom="com.adobe.quickstarts.customcomponents.*")。这个习惯可以避免不同制造商在命名组件名称相同时导致的冲突。例如,两个组件库可能各自包含Map组件,如果一个com.vendorA.*一个在com.vendorB.*那么他们就不会冲突
例子 components/CountryComboBox.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:dataProvider> <mx:String>United States</mx:String> <mx:String>United Kingdom</mx:String> <!-- Add all other countries. --> </mx:dataProvider> </mx:ComboBox>
主文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:custom="components.*"
width="220" height="115"
>
<custom:CountryComboBox/>
</mx:Application>
引用一个自定义组件的属性和方法
CountryComboBox.mxml指定ComboBox作为其根标记,那么你可以引用所有ComboBox的属性和方法,在自定义组件的MXML标记中,或者在<mx:Script>标记中的ActionScript中也可以。例如,下边的例子为自定义组件指定了rowCount属性和一个关闭事件的监听器。
提示:在Flex中,MXML文件在编译成SWF文件之前,先编译成ActionScript类文件。当你为自定义的MXML组件指定根标记后,你实际上使你的自定义组件类扩展了根标记的组件类。这就是为什么自定义组件继承了根标记组件的方法和属性。
在下边的例子中,CountryComboBox MXML文件编译为一个class文件。Flex的命名习俗是组件名首字母大些,也对应类名。
例子
components/CountryComboBox.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:dataProvider> <mx:String>United States</mx:String> <mx:String>United Kingdom</mx:String> <!-- Add all other countries. --> </mx:dataProvider> </mx:ComboBox>
主应用程序的MXML文件
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" width="270" height="170" > <mx:Script> <![CDATA[ import flash.events.Event; private function handleCloseEvent(eventObj:Event):void { status.text = "You selected: \r" + countries.selectedItem as String; } ]]> </mx:Script> <mx:Panel title="Custom component inheritance" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <custom:CountryComboBox id="countries" rowCount="5" close="handleCloseEvent(event);" /> <mx:Text id="status" text="Please select a country from the list." width="136"/> </mx:Panel> </mx:Application>
创建一个复合的自定义组件
复合自定义组件中包含多个组件定义。为了创建复合自定义组件,应该指定一个容器,作为根组件,然后添加Flex组件作为其子组件。
下边例子中的AddressForm组件通过将Form容器作为根组件创建了一个地址表单。然后定义了几个Form容器的子组件。这些子组件中包含其他自定义组件—CountryComboBox。
例子
components/AddressForm.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" > <mx:FormItem label="Name"> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="Street"> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="City"> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="State/County"> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="Country"> <custom:CountryComboBox/> </mx:FormItem> </mx:Form> components/CountryComboBox.mxml <?xml version="1.0" encoding="utf-8"?> <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:dataProvider> <mx:String>United States</mx:String> <mx:String>United Kingdom</mx:String> <!-- Add all other countries... --> </mx:dataProvider> </mx:ComboBox> Main application MXML file <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" viewSourceURL="src/MxmlComponentComposite/index.html" width="400" height="290" > <mx:Panel title="Composite component" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <custom:AddressForm /> </mx:Panel> </mx:Application>
如果自定义组件文件中的根标记包含子组件时,当你在其他MXML文件中引用这个自定义组件标签时,这个标签不能包含子标签。如果你在MXML文件中定义了一个空容器,当你使用这个组件标签时,这个标签就可以包含子标签。
例如,下边的AddressForm的用法是不正确的,不能被编译。
<!-- Incorrect --> <custom:AddressForm> <mx:FormItem label="Post code"> <mx:TextInput/> </mx:FormItem> </custom:AddressForm>
如果你必须扩展复合标签的功能,可以创建一个以符合组件作为根标记的自定义组件。
注意:这个关于子组件的限制只是在子组件是可视组件的时候起作用。可是组件都是UIComponent组件的子类。你永远都可以向不可视组件中插入标记,比如,ActionScript块,style,effect,fomatters,validator,和其他类型的不可视组件。不管你如何定义的自定义组件。
创建可重用的MXML组件
创建自定义组件的一个公共目标是创建可配置的、可重用的组件。例如,你想要创建一个自定义组件,带有属性、分发事件、定义新的样式属性、有自定义皮肤,或者其他自定义功能。创建自定义组件的一个预期回报是可重用。也就是说,你希望自定义组件紧紧的关联在你的程序中那?还是可以用在多个程序中?
为特定应用程序所编写的紧耦合的组件,经常使它依赖应用程序的结构,变量名,或其他细节。如果你改变应用程序,你可能需要修改紧耦合的组件来反应这种变化。紧耦合的组件如果不重写很难应用到其他应用程序中。
设计一个松耦合的组件来重用,它需要定义明确的接口来指定如何给组件传递信息,和组件如何向应用程序传回结构。
典型的,通过定义松耦合组件的属性,来向它传送信息。属性是通过定义固有的存取器(setter和getter方法)和指定参数的数据类型来实现的。在下边的例子中,CountryComboBox自定义组件定义了useShortName公共属性。这个属性通过get useShortName和set useShortName存取器方法使_useShortName变量暴露。
_useShortNames私有属性前的Inspectable元数据标签,定义了一个属性,这个属性出现在Adobe Flex Builder中的属性提示,和标签内省中。也可以使用这个元数据标签来限制对属性值的访问。
提示:所有公共属性会暴露在MXML的代码提示和属性检查器中。如果你有关于这个属性的额外的信息,能够帮助代码提示或属性检查器(比如枚举值,或只字符串是一个路径),那么也把这些而外信息添加到[Inspectable]元数据中。
MXML代码提示和属性检查器的数据来源是一样的。所以这两个的显示应该是一样的。
另一方面,ActionScript的代码提示是不需要元数据的,所以根据坐在的范围,你一直可以看到适当的代码提示。
Flex Builder 使用标识符(比如public private protected static)加上正确的上下文从而决定ActionScope的代码提示。
定义返回信息到主程序的组件的最佳实践是设计组件为发送包含返回值的事件。那样,主程序就能够定义事件处理器,来处理时间并进行适当的动作。也可以在数据绑定中使用事件。下边的例子中,使用Bindable元数据标签,使userShortName作为一个绑定的属性。useShortNames属性的seter方法发送改变事件,通过Flex Framework来实现数据绑定起作用。
例子
components/CountryComboBox.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ private var countryArrayShort:Array = ["US", "UK"]; private var countryArrayLong:Array = ["United States", "United Kingdom"]; // Determines display state. The inspectable metadata tag // is used by Flex Builder 2 [Inspectable(defaultValue=true)] private var _useShortNames:Boolean = true; // Implicit setter public function set useShortNames (state:Boolean):void { // Call method to set the dataProvider based on the name length. _useShortNames = state; if (state) { this.dataProvider = countryArrayShort; } else { this.dataProvider = countryArrayLong; } // Dispatch an event when the value changes // (used in data binding.) dispatchEvent(new Event("changeUseShortNames")); } // Allow other components to bind to this property [Bindable(event="changeUseShortNames")] public function get useShortNames():Boolean { return _useShortNames; } ]]> </mx:Script> </mx:ComboBox>
应用程序MXML文件
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" viewSourceURL="src/MxmlComponentAdvanced/index.html" width="260" height="200" > <mx:Panel title="Advanced custom components" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <!-- Set a custom property on a custom component --> <custom:CountryComboBox id="countries" useShortNames="false" /> <!-- Use data binding to display the latest state of the property. --> <mx:Label text="useShortNames = {countries.useShortNames}"/> <mx:ControlBar horizontalAlign="right"> <mx:Button label="Toggle Display" click="countries.useShortNames = !countries.useShortNames;" /> </mx:ControlBar> </mx:Panel> </mx:Application>
发表评论
-
Flex客户端ant同步配置
2010-09-01 12:00 1924先转网上一篇Flex支持ant的文章:Until Flex B ... -
Flex Builder中自动补全和导入的问题
2010-06-11 10:28 2358Flex Builder中自动补全和导入的问题 Wor ... -
理解 Flex itemRenderer - 第 1 部分: 内联渲染器
2010-03-31 18:04 2470理解 Flex itemRenderer - 第 1 部分: ... -
理解 Flex itemEditor-第 2 部分:编辑事件和复杂编辑器
2010-03-31 17:57 3262理解 Flex itemEditor-第 2 ... -
理解 Flex itemEditor-第 1 部分:内联 itemEditor
2010-03-31 17:43 4173理解 Flex itemEditor-第 1 ... -
Flex中日期格式化
2010-03-31 17:37 1095Flex中日期格式化 var dateFormatter:D ... -
Flash Builder 4 Beta和FlexUnit下的测试驱动开发---断言方法
2010-03-31 10:19 1349Flash Builder 4 Beta和FlexUnit下的 ... -
Flex中12个常用函数
2009-11-10 14:32 1116No.1 Copy content to clipboard: ... -
Flex图片列表
2009-10-14 12:11 4091图片列表 <?xml version=" ... -
Flex+Java多文件上传
2009-10-12 17:44 4782结合网上的资料修改一下,实现了两种不同界面的多文件上传 ... -
Flex 处理数据 访问 XML 数据
2009-09-30 16:39 1703<?xml version="1.0" ... -
Flex 调入 module 时传入参数
2009-09-30 11:25 2143主模块代码 <?xml version=" ... -
Flex + LCDS + Java 入门教程
2009-08-27 17:53 1079Flex + LCDS + Java 入门教程 见附件 -
flash中传参数
2009-02-18 15:25 1154<object width="100%&qu ... -
修改Flex中验证错误字体的大小
2008-11-13 10:05 1636修改Flex中验证错误字体的大小 <mx:Style ... -
Flex3 + Spring配置
2008-10-26 19:04 1513Flex3 + Spring配置 具体过程参见: ...
相关推荐
Flex组件开发可分为两种. 一是在mxml中创建自定义组件.另一种则在actionscript class中创建,分别知道他们的含义。
Flex CSS简介 Flex 使用MXML设置样式 Flex 使用ActionScript设置样式 Flex 样式的继承与叠加 Flex 主题的使用 Flex 自定义皮肤 Flex 应用皮肤
pdf格式的flex的mxml语法,适合想学习flex的新手
MXML语法.MXML flexview actionscript
Flex Chart+WebService由于发布时没有注意,忘了把MXML的源码打包。webservice采用的是Myeclipse自带的XFIRES,可自行添加。
flex把html页面作为类似iframe的样子的组件完全的嵌入到mxml中去。
如果你的flex插件出现mxml无法打开的问题,请下载此文件,同时参考:http://www.tekool.net/blog/2008/06/28/flex-builder-3-plugin-dont-work-with-eclipse-34/或者:...
flex4 选择树组件。可以直接使用组件包。在Test.mxml里面有使用的测试。
5.1 自定义Flex组件 5.2 MXML组件开发 5.3 ActionScript组件开发 第六章 与服务端通信 6.1 通过Http Service与服务端通信 6.2 通过Web Service与服务端通信 6.3 通过Remoting与服务端通信 6.4 与Flash Media ...
flex -MXML语法,介绍flex 的 mxml的基本语法构成,适合一般学习者使用
flex入门教程,主要介绍了mxml和ActionScript的简单应用,适合初学者,高手就没必要下载啦
Flex4视频教程_02-02用mxml自定义事件.rar
flex+flash+mxml = 绚丽相册实现 简单精美欢迎下载
对flex3的所有组件进行描述,里面也有一些源码例子,可以自己拷贝到工程去试试效果,特别对于刚入门学习flex的程序员特别实际,我刚入门的时候也是搜到了这个资源,学后感觉flex很容易入门,后面再去学AS就很有基础...
简单的一个自定义label.根据dataGrid的数据变色.压缩包里一个是渲染器..一个是主程序....新建一个flex项目...把mxml和文件夹都放在scr下面就可以跑起来了..有问题请回复.
Flex中利用HTTPService MXML标签(tag)将XML转化为对象(objects)
创 建过Java多语言本地化应用的朋友应该都很熟悉Java的本地...要本地化Flex2应用,我们需要将本地化资源文件编译为SWC库文件,然后在Flex应用中使用ActionScript或者MXML访问资源集(resource bundles )中的本地化值。
书中详细介绍了Flex 4的相关知识点,具体包括构建、部署和调试RIA,使用功能强大的MXML语言编写了应用程序,使用MXML和ActionScript快速构建自定义用户界面,以及通过样式和皮肤自定义应用程序的外观等。
实现了计算器的加减乘除开根号和幂操作。没有去实现AS和MXML分离。 想研究的同学下载吧。。将文件解压后导入到FB 3.0 中
书中详细介绍了Flex 3的相关知识点,具体包括构建、部署和调试RIA,使用功能强大的MXML语言布置应用程序,使用MXML和ActionScript构建自定义的UI组件,使用XML、基于SOAP的Web服务和远程调用协议AMF连接到数据等。...