Flex中代码隐藏模式分离MXML和AS【转载+总结+code】

【flex3 cookbook】      

如果你熟悉ASP.NET开发，一定听说过“代码隐藏”，同样地，如果你熟悉脚本语言(Ruby on
Rails, JavaServer Pages (JSP) 开发, PHP,等等)中采用的应用程序视图和控制器相分离的观
念。要控制这些代码便于阅读以及清晰度，最好的策略就是把实际布局元素从代码中分离出
来。用此方法开发的程序项目所需的文件数会使得项目操作变得很困难，因为每个组件都要
产生两个文件。此外，分离业务逻辑和视图逻辑经常也是很困难的，这样会导致组件的中
的代码分离部份难以理解。但是还是有很多开发人员喜欢这种方式，因为有时候它能帮助你
阐明应用程序的工作原理。
首先看一下“代码隐藏”的后面部分：一个组件继承这个类(mx.containers.Canvas)，包含监听
组件被添加到stage的方法以及处理任何事件的方法和专门处理鼠标单击事件的方法。

下面是个人实践的源代码：

1、按照文中所说，建立一个class继承于一个容器（这里用的是mx.containers.Canvas），里面定义方法；

package Package1
{
 import flash.events.Event;
 import flash.events.MouseEvent;
 import mx.containers.Canvas;
 
 public class ComA extends Canvas
 {
  
  public function ComA()
  {
   super();
   addEventListener(MouseEvent.CLICK,Click1);
  }

  public function Click1(event:Event):void
  {
   trace(“容器的点击事件！”);
  }
  public function Click2(event:Event):void
  {
   trace(“按钮事件！”);
  }
 }
}

2、创建一个自定义组件，要是MXML的，且该组件是继承于第一步骤中写的类；

<?xml version=”1.0″ encoding=”utf-8″?>
<ComA xmlns=”Package1.*” xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400″ height=”300″>
 <mx:Button x=”167″ y=”58″ label=”Button” click=”Click2(event)”/>
 
</ComA>

3、可以利用2中创建的组件了；

主程序中代码：

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:Package1=”Package1.*” xmlns:ns1=”*”>
 <ns1:ComAMXML x=”177″ y=”38″>
 </ns1:ComAMXML>

</mx:Application>

很好的方法。