flex组件基础入门：建立flex组件的两种方法

【贝武易科技专业flex3D开发--www.newflash3d.com】
我们可以通过MXML和as代码这两种方式来创建Flex的基本组件，他们都是继承自Flex的UIcomponent。
新建一个新的flexproject，如下图，起一个你自己喜欢的名字，我这里为mycomponentExe.如下图

起个名字

文件生成完以后，我们会看到默认的mycomponentExe.mxml的代码如下

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
</mx:Application>

这里需要注意的一点是 xmlns:mx="http://www.adobe.com/2006/mxml"这一行，它告诉了程序，我们的组件空间（可以说是组件的库）叫什么名（这里的名字代号为mx），在哪里（这里为http://www.adobe.com/2006/mxml），同样我们如果要建立新的组件，也需要告诉程序它们的名字代号及它们被放在哪里。
下面我们继续操作。
建立一个Button组件
首先我们在项目的src文件夹了建立一个文件名为mycomponent，这个名字你可以根据你的喜好来定，不一定跟我一样。如图





方法一：通过MXML
在菜单里选择新建一个component组件
操作步骤如下：


这里需要选择组件的类型，我们选Button类型，起名为myButton，如图


我们可以看到在文件夹 mycomponent下面多了一个myButton.mxml文件，代码如下

<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml">
	
</mx:Button>

我们给它做一个定制，给这个按钮做一个个性的标签名字“我的按钮”，代码如下

<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" label="我的按钮">
	
</mx:Button>

好了，这里一个最简单的组件就完成了，当然我们可以把这个组件做得复杂一点，留到下面的教程里去实现吧。
下一步，把这个带我自己定制的“我的按钮”的名字的组件在主程序中应用。
回到主程序mycomponentExe.mxml
写入加入按钮的代码，咱们先看代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	 xmlns:mc="mycomponent.*">
   <mc:myButton/>	
</mx:Application>

这里我们首先定义了一个新的组件空间mc,接着告诉程序，组件的位置在哪里，--mycomponent.*"，mycomponent文件夹下的所有组件都是了。
定义好了以后，那么在底下的程序中我们只要输入<mc:程序就会提示我们在mc的这个空间里有那些组件，应用起来很方便。
运行程序我们就可以看见我们通过组件加入的按钮了。

下面，我们通过.as来建立组件
同样，在mycomponent的目录建立一个文件，我们起名为myButtonAS.as
在mycomponent文件夹，单击右键，建立一个ActionScript Class,如果我们选择ActionScript File也可以，但那样的话，像类的路径、包等都需要你自己去定制了，flex给我们提供了集成好的设置，所以我们选择ActionScript Class，跟着它的提示设置往下进行就可以。


在弹出的窗口中设置如下


这里需要说一下的是默认的情况下，flex已经告诉我们，这个文件是在文件夹mycomponent里面的，这个会决定了我们新生成的AS类的包的路径，它们是对应一致的。
Superclass:mx.controls.Button，集成自那个类，可以通过后面的Browse按钮来选择希望继承自的类。按Finish按钮完成设置。
代码如下：

package mycomponent
{
	import mx.controls.Button;

	public class myButtonAS extends Button
	{
		public function myButtonAS()
		{
			super();
		}
		
	}
}

加入个性化的扩展设置
代码如下：

package mycomponent
{
	import mx.controls.Button;

	public class myButtonAS extends Button
	{
		public function myButtonAS()
		{
			super();
			// 设置label属性为"另外一个按钮".
            label="另外一个按钮";

		}
		
	}
}

回到主程序，但我们键入<mc代码的时候，在flex的代码输入菜单中有两个组件的提示，如图


最终代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	 xmlns:mc="mycomponent.*">
   <mc:myButton/>
   <mc:myButtonAS x="100"/>	
</mx:Application>

我们把myButtonAS生成的对象往右边移动了100个像素。
【贝武易科技专业flex3D开发--www.newflash3d.com】
最终结果如下了。。。。。


好了，都完成了，呵呵，的确是很简单的入门，的确是很基础，愿你再进一步发挥了。
呵呵，在我博客其他的文章里有难的，大家好好发现了。希望对你有用！Goodnight!
【贝武易科技专业flex3D开发--www.newflash3d.com】

评论

1 楼 114love923 2009-03-15  

我的按钮的名字怎么显示不了呢。。。郁闷