浅谈flex 自定义组件

flex组件编写起来很简单，而编写的形式又分为两种 ，分别一mxml形式或者as class编写，两者都可以，置换直观的朋友都可以采用 mxml形式辨析，但如果你的组件需要分开多个类来写，又或者是想效率高点的话，你可以采用as写
但最终我们都需要一个mxml的组件界面来装载我们的组件。

好，先开始说说 便签。恩，标签，可能很多出学的开发者不大清楚是什么，又或者你经常会在一些第三方或者官方组件文件里看到

  [Bindable("dataChange")]

  [Event(name="UnloadModule")]

  [Inspectable(category="General")]

  [ArrayElementType("mx.containers.utilityClasses.ConstraintColumn")]

这些语法。可能你会百思不得其解它有什么用，其实这些就是标签（Metadata ）语法

Metadata 语法主要用于组件属性的一些信息捆绑，使得你可以在mxml或者组件面板里能使用一些简单的便签，如mxml语法里我们经常都会看到的 当在mxml里 输入空格符后就会提示该组件的一些属性跟方法或者事件（其实这些就是标签绑定的显示为文本），但你又会发现往往这些属性，方法或者事件有跟帮助里的名称不 一样，这个就是标签绑定的一个特点，其实就是提供了一个别名来捆绑某个方法或者事件，或者属性而已。

现在大家都应该基础了解到标签的用途了，下边咱们来说说怎么编写一个组件，就吸纳各刚才说的，我们有两种形式都可以编写flex的组件，

下边我以简单的 mxml文件为例子说说怎么写，

我们先新建一个项目MyComponent 然后再src文件夹里我们再建立一个名叫 components的文件夹

然后新建一个 MXML Component 文件 并保存到 src目录下的一个名叫 components的文件夹里

默认的我们会看到下边的代码



<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">

</mx:Canvas>


Canvas ---就是默认的集成组件，当然那哦我们你可以将它改成其他任意的组件，只要下边的命名空间指定好路径就好了

xmlns:mx------这句就是我们的命名空间，我们可以自定义任意一个自己的命名空间，命名空间主要用于区别开

类名的重复等问题，形象的说命名空间就像我们给一个类指定一个文件夹，指定一个路径。

如xmlns:wxsr='com.components.*'

这主要用于指定我们组件的类的位置。也就是包路径



下边我们来修改下这个新建的组件

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="292" height="226">
<mx:Metadata>
  [Event(name="myComponentTextChange", type="flash.events.Event" )]
</mx:Metadata>

<mx:Script>
<![CDATA[
  [Bindable("text")]
  [Inspectable(defaultValue="hello word")]
  public function set myComponentText(value:String):void
  {
  inputText.text=value
  }
  public function get myComponentText():String{
  return inputText.text
  }
 
]]>
</mx:Script>
<mx:TextArea id="inputText" change="this.myComponentText=inputText.text; this.dispatchEvent(new Event('myComponentTextChange'))" width="264" height="183" />
</mx:TitleWindow>

好了这样我们就创建好一个我们自定义事件的一个组件了

在这个组件里我们绑定了一个事件

<mx:Metadata>
  [Event(name="myComponentTextChange", type="flash.events.Event" )]
</mx:Metadata>

这个事件的名称是（myComponentTextChange）如果你用as写可以这样调用 addEventListener('myComponentTextChange',yourFunc). 它用于在你调用这个组件时在提示里可以看到外也用于显示于flex的组件信息设置面板上显示出来

下边我们还看到这段代码

<![CDATA[
  [Inspectable(defaultValue="hello word")]
  public function set myComponentText(value:String):void
  {
  inputText.text=value
  }
  public function get myComponentText():String{
  return inputText.text
  }

这段代码主要是绑定了一个set ,get 的方法（myComponentText）并给他设定了一个默认值'hello'



好了下边我们看看我们怎么调用这个我们自定义的组件 回到项目的猪文件吧下边的代码覆盖进去

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:wxsr="components.*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<wxsr:TestComponent id="testComponent" enterFrame="trace(testComponent.myComponentText)" myComponentTextChange="trace('------')">
 
</wxsr:TestComponent>
</mx:Application>