熟悉Asp.Net的朋友都应该知道其中很有用的代码隐藏模型，代码隐藏模型是一个通过类的相互继承来实现应用逻辑和UI的分离的编码模型。由于Flex的先天优势，这个在Flex2中很容易实现。

Flex中实现代码隐藏模型原理是，将应用逻辑放在一个AS3类中，而MXML UI继承该AS3类就可以了。

例如，考虑以下没有做分离前的代码：

[xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function myButtonClick( event:MouseEvent ):void
	        {
	            Alert.show( "Hello from myButtonClick!" );
	        }
		]]>
	</mx:Script>
	<mx:Button
        id="myButton"
        label="Click Me!"
        click="myButtonClick( event )" />
</mx:Application>

运行实例

接着我们用代码隐藏模型来分离UI和应用逻辑，首先将应用逻辑分离到一个AS3类中：

路径：app/CodeBehandAction.as:

[java]
package app
{
    import mx.core.Application;
    import flash.events.MouseEvent;
    import mx.controls.Alert;
	public class CodeBehandAction extends Application
	{
		public function myButtonClick( event:MouseEvent ):void
        {
            Alert.show( "Hello from myButtonClick!" );
        }
	}
}

然后MXML UI 文件编码如下：

[xml]
<?xml version="1.0" encoding="utf-8"?>
<app:CodeBehandAction xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:app="app.*">
	<mx:Button
        id="myButton"
        label="Click Me!"
        click="myButtonClick( event )" />
</app:CodeBehandAction>

运行实例 | 下载源码

Mxml实际上是As3类的封装，在Mxml中，根标签用于表明其扩展继承那个类，以上示例<app:CodeBehandAction/>表明我们的CodeBehand类扩展CodeBehandAction类，也就实现了代码隐藏模型了。

这样编码的好处是：

• 在Class中编码，在MXML中编写UI。
• 易于理解。
• 组建可重复利用。

很简单吧？！

参考： Code-Behind in Flex 2