分类： 系统运维
2010-09-11 15:27:28
组件是能够完成某种功能并且向外提供若干个使用这种功能的接口的可重用代码集，Flex也被认为是基于组件的开发模式。所有的组件都是ActionScript的类。可视化组件和mxml组件的基类都是UIComponent。在组件的继承关系上，UIComponent是在最顶部的，其它组件都继承至它。
使用组件有以下几个方面的优点：
1) 组件使程序的建立，调试，维护变的更加容易
2) 组件使团队开发更方便
3) 在精心设计下，组件可以成为一个个可重用的功能单元
为了方便的使用可重复利用的组件，应该让它们尽可能的与其他代码分离。这些组件应该有独立的程序逻辑，并且明确的定义哪些数据必须包含其中，哪些数据会从组件中返回。面向对象编程中松散耦合就是描述这种结构的。
1. 在FLEX已有组件无法满足业务需求，或是需要更改其可视化外观等特性时，直接进行继承扩展。
2. 为了模块化设计或进一步重用，需要对FLEX组件进行组合。比如一个包括TEXTAREA,BUTTON的复合控件。
在编写自定义组件之前必须明白以下三点：
1、作为重写组件的使用者，有哪些需求。比如需要在MXML标签和AS代码中暴露哪些属性及对应默认值、事件和事件的处理逻辑。
2、重写组件一般需要使用FLEX原有组件，要站在原有开发者的角度了解设计规则。
3、作为重写组件的设计者，在满足需求的情况下尽量做到可复用、低耦合易扩展等设计原则，让新组件像FLEX原组件一样好用。
创建自定义组件的一个公共目标是创建可配置的、可重用的组件。例如，想要创建一个自定义组件，带有属性、分发事件、定义新的样式属性、有自定义皮肤，或者其他自定义功能。创建自定义组件的一个预期回报是可重用。自定义组件可以紧紧的关联在程序中也可以在多个程序中使用。
为特定应用程序所编写的紧耦合的组件，经常使它依赖应用程序的结构，变量名，或其他细节。如果改变应用程序，可能需要修改紧耦合的组件来反应这种变化。紧耦合的组件如果不重写很难应用到其他应用程序中。
设计一个松耦合的组件来重用，它需要定义明确的接口来指定如何给组件传递信息，和组件如何向应用程序传回结构。
创建自定义组件有AS和MXML两种方式，在选择用哪种方式自定义组件时要考虑：
1、MXML文件和AS文件最后都会被编译成AS类，只不过MXML编译速度稍慢一些
2、如果MXML和AS都能完成的一个简单组件，MXML更容易被创建和控制布局
3、当要覆盖组件的某些方法时只能用AS方式
4、创建一个直接继承UIComponent的子类时只能用AS
5、创建非可视化组件比如Formatter、validator、Effect……时，只能用AS
6、要为组件添加日志功能时，只能用AS
使用ActionScriot方式非常不直观，难以将多个组件组合后，控制他们的大小及位置，并且这种方法对于初学者太难，这里只简单介绍其原理。
所有Flex可视组件都是源自于UIComponent类。要创建自己的组件，可以创建一个继承UIComponent的类，或者继承UIComponent子类的类。
使用类作为自定义组件的超类，取决于要实现的功能。例如，需要一个自定义的按钮控件。可以创建一个UIComponent类的子类，然后重写Flex Button 类的所有功能。更好更快创建自定义按钮组建的方法是创建一个Flex Button组件的子类，然后在自定义类中进行修改。
MXML组件是一个MXML文件，在其他文件内部通过MXML标记来引用它。MXML组件的最大用处就是扩展已经存在的Flex组件的功能。在第四节中会详细的说明这种自定义组件的方法。
功能：扩展DropDownList组件使其成为一个可以重用的国家选择器
技术要点：
1. 在你的Flex项目上右键->新建MXML组件,建议将其放在components包中,这里将其命名为CountryComboBox.
2. 在“新建Flex组件面板”上有基于这个选项默认是基于Group的，由于我们要扩展的是DropDownList故将其改为spark.components. DropDownList.
代码：
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="150" height="30">
3. 定义DropDownList的函数功能
功能变量：
private var countryArrayShort:ArrayCollection=new ArrayCollection( ["
private var countryArrayLong:ArrayCollection =new ArrayCollection(["UnitedStates", "
private var ifShortNames:Boolean = false;
定义useShortName函数用于外程序切换大小写显示功能：
public function useShortName(state:Boolean):void
{
ifShortNames = state;
if (state)
{
this.dataProvider = countryArrayShort; //用countryArrayShort作为数据源
}
else
{
this.dataProvider = countryArrayLong; //用countryArrayLong作为数据源
}
}
4. 主程序设计
在主程序的设计模式下可以将已经编辑好的组件直接拉到要放置的位置
主要程序代码：
详细代码见：diyc.mxml
Flex自定义组件与模块化的思路基本一致，但是在实际的使用中却要考虑到两者之间的差别。
模块化可以按照需求载入和卸载modules，在系统初始化时不会造成加载时间过长的问题，而自定义的组件会在一开始就被加载进浏览器的缓存，如果自定义组件过多的话会造成加载时间过长，然而对于一些在整个系统中要共用的部分（如导行条，版权）自定义组件可以使以后的加载时间大大的缩短，而模块在下次重复使用时还要重复加载；两者对于系统都有优化作用。
在任何的web应用开发中,在不同的组件中传递数据是一件非常重要的事情, flex的应用开发也不例外,Flex中组件之间的数据传递主要属性之间的相互绑定和抛出带参数的事件这两种方式。
在自定义的组件中预先为这个组件留下一个可以与外部通信的函数，在需要与这个组件进行数据传递时直接调用这个函数就可以了。
实例：
功能：自定义发送和接收组件，利用函数的方法将发送组件中的数据传递到接收组件中。
发送组件：基于Group的扩展组件，其中包含TextArea组件，定义settran（）函数用于发送数据
关键代码：
public function settran( ):String
{
var tranString:String;
tranString=fsinputare.text;
return tranString;
}
详细代码见：components/fs.mxml
接收组件：扩展TextArea组件定义setText（）函数用于接收数据
关键代码：
public function setText(settext:String):void
{
this.text=settext;
}
详细代码见：components/js.mxml
主程序：定义一个button按钮用于启发组件间的数据传递
关键代码：
public function init():void
{
js1.setText(fs1.settran());
}
详细代码见：sjicq.mxml
利用组件属性进行数据的传递是一种更加简单的方法
实例：
发送组件：扩展TextArea组件，绑定其text属性值
代码如下：
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="200" text="{fsinfo}">
[Bindable]
public var fsinfo:String="";
]]>
详细代码见：components/fsp.mxml
接收组件：同样扩展TextArea组件绑定其text属性值
代码如下：
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="200" text="{setText}">
[Bindable]
public var setText:String="";
]]>
详细代码见：components/jsp.mxml
主程序：
利用button的click事件启动数据的传递
代码：
public function fs():void
{
jsp1.text=fsp1.text;
}
]]>
详细代码见：sjq.mxml
程序下载：http://blogimg.chinaunix.net/blog/upfile2/100911152501.rar
