FLEX/FLASH-MXML和Actionscript分离

1. 看看.mxml和as混在一起的效果
sample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationCompleteHandler();" width="300" height="80" >
    <mx:Script>
     <![CDATA[
        import mx.controls.Button;
        import mx.events.FlexEvent;
        private var myButton:Button;
        private function creationCompleteHandler():void {
         // Create a Button instance and set its label
         myButton = new Button();
         myButton.label = "漫天飞舞，一片荒芜!";
         // Get notified once button component has been created and processed for layout
         myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);

         // Add the Button instance to the DisplayList
         addChild (myButton);
        }
        private function buttonCreationCompleteHandler ( evt:FlexEvent ):void{
         // Center the button
         myButton.x = parent.width/2 - myButton.width/2;
         myButton.y = parent.height/2 - myButton.height/2;
        }
     ]]>
    </mx:Script>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationCompleteHandler();" width="300" height="80" >
	<mx:Script>  
	 <![CDATA[ 
		import mx.controls.Button;
		import mx.events.FlexEvent;
		private var myButton:Button;
		private function creationCompleteHandler():void {
		 // Create a Button instance and set its label
		 myButton = new Button();
		 myButton.label = "漫天飞舞，一片荒芜!";
		 // Get notified once button component has been created and processed for layout
		 myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);

		 // Add the Button instance to the DisplayList
		 addChild (myButton);
		}
		private function buttonCreationCompleteHandler ( evt:FlexEvent ):void{
		 // Center the button
		 myButton.x = parent.width/2 - myButton.width/2;
		 myButton.y = parent.height/2 - myButton.height/2;
		}
	 ]]>  
	</mx:Script>  
</mx:Application>

运行效果如下


2.分离以后
sample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  creationComplete="creationCompleteHandler();" width="300" height="80" >
   <mx:Script source="sample.as" />
</mx:Application>

sample.as

// 这是actionscript.不是js代码
import mx.controls.Button;
import mx.events.FlexEvent;
private var myButton:Button;
private function creationCompleteHandler():void {
    // Create a Button instance and set its label
    myButton = new Button();
    myButton.label = "漫天飞舞,一片荒芜!";
    // Get notified once button component has been created and processed for layout
    myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);

    // Add the Button instance to the DisplayList
    addChild (myButton);
}
private function buttonCreationCompleteHandler ( evt:FlexEvent ):void{
    // Center the button
    myButton.x = parent.width/2 - myButton.width/2;
    myButton.y = parent.height/2 - myButton.height/2;
}

运行后得到上面同样的效果。

小提示: sample.as是一个class文件，什么后果？后果是编译失败！原因是：包嵌套错误。
可以这样理解:
.mxml其实总要编译成一个as类文件，<mx:Script ../>就是include进来一段as脚本片断。如果这个片断是一个类，那不就出现类包的嵌套错误吗？

请思考更高层的开发分工合作模式：MVC--这是接下来一篇文章要讨论的话题。