FLEX/FLASH-MXML和Actionscript分离

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

Mxml代码

1. <?xml version="1.0" encoding="utf-8"?>   
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationCompleteHandler();" width="300" height="80" >   
3.     <mx:Script>     
4.      <![CDATA[    
5.         import mx.controls.Button;   
6.         import mx.events.FlexEvent;   
7.         private var myButton:Button;   
8.         private function creationCompleteHandler():void {   
9.          // Create a Button instance and set its label   
10.          myButton = new Button();   
11.          myButton.label = "漫天飞舞，一片荒芜!";   
12.          // Get notified once button component has been created and processed for layout   
13.          myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);   
14.   
15.          // Add the Button instance to the DisplayList   
16.          addChild (myButton);   
17.         }   
18.         private function buttonCreationCompleteHandler ( evt:FlexEvent ):void{   
19.          // Center the button   
20.          myButton.x = parent.width/2 - myButton.width/2;   
21.          myButton.y = parent.height/2 - myButton.height/2;   
22.         }   
23.      ]]>     
24.     </mx:Script>     
25. </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代码

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

sample.as

Actionscript代码

1. // 这是actionscript.不是js代码   
2. import mx.controls.Button;   
3. import mx.events.FlexEvent;   
4. private var myButton:Button;   
5. private function creationCompleteHandler():void {   
6.     // Create a Button instance and set its label   
7.     myButton = new Button();   
8.     myButton.label = "漫天飞舞,一片荒芜!";   
9.     // Get notified once button component has been created and processed for layout   
10.     myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);   
11.   
12.     // Add the Button instance to the DisplayList   
13.     addChild (myButton);   
14. }   
15. private function buttonCreationCompleteHandler ( evt:FlexEvent ):void{   
16.     // Center the button   
17.     myButton.x = parent.width/2 - myButton.width/2;   
18.     myButton.y = parent.height/2 - myButton.height/2;   
19. }  

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

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

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