Flex精华摘要 4：使用AS脚本

在MXML文件中实现ActionScript逻辑的几种方法：
最简单的方法，在一个MXML文件中通过组件的事件直接书写简单的逻辑控制，但是并不推荐。

 

1. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml'>
 

2. <mx:Panel title='My Application' >
 

3. <mx:HBox>
 

4. <mx:Label text='Temperature in Farenheit:'/>
 

5. <mx:TextInput id='farenheit' width='120'/>
 

6. <mx:Button label='Convert' click='celsius.text=(farenheit.text-32)/1.8;' />
 

7. <mx:Label text='Temperature in Celsius:'/>
 

8. <mx:Label id='celsius' width='120' fontSize='48'/>
 

9. </mx:HBox>

10.  </mx:Panel>

11.  </mx:Application>

 

 

第二种，在MXML文件中定义函数调用，比较适合简单的应用，如

 

1. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml'>
 

2. <mx:Script>
 

3. <![CDATA[
 

4. function calculate() { 
 

5. celsius.text=(farenheit.text-32)/1.8;
 

6.  }
 

7. ]]>
 

8. </mx:Script>
 

9. <mx:Panel title='My Application' >

10.  <mx:HBox>

11.  <mx:Label text='Temperature in Farenheit:'/>

12.  <mx:TextInput id='farenheit' width='120'/>

13.  <mx:Button label='Convert' click='calculate();' />

14.  <mx:Label text='Temperature in Celsius:'/>

15.  <mx:Label id='celsius' width='120' fontSize='48'/>

16.  </mx:HBox>

17.  </mx:Panel>

18.  </mx:Application>

 

 

第三种，把MXML文件和脚本文件分开，便于项目管理

 

1. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml'>
 

2. <!-- Specify the ActionScript file containing the function. -->
 

3. <mx:Script source='sample3script.as'/>
 

4. <mx:Panel title='My Application' >
 

5. <mx:HBox>
 

6. <mx:Label text='Temperature in Farenheit:'/>
 

7. <mx:TextInput id='farenheit' width='120'/>
 

8. <mx:Button label='Convert' click='calculate();' />
 

9. <mx:Label text='Temperature in Celsius:'/>

10.  <mx:Label id='celsius' width='120' fontSize='48'/>

11.  </mx:HBox>

12.  </mx:Panel>

13.  </mx:Application>

 

 

sample.as文件代码如下：

function calculate() { 

 

2. celsius.text=(farenheit.text-32)/1.8;

3.  }

 

1.

第四种，使用MXML组件方式，更好的封装实现。下面的例子定义了一个tempConverter组件

 

1. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml'
 

2. initialize='converter.setupListener()'>
 

3. <local:TempConverter id='converter' xmlns:local='*'/>
 

4. <mx:Panel title='My Application' >
 

5. <mx:HBox>
 

6. <mx:Label text='Temperature in Farenheit:' />
 

7. <mx:TextInput id='farenheit' width='120' />
 

8. <mx:Button id='myButton' label='Convert' />
 

9. <mx:Label text='Temperature in Celsius:' />

10.  <mx:Label id='celsius' width='120' fontSize='24' />

11.  </mx:HBox>

12.  </mx:Panel>

13.  </mx:Application>

 

 

TempConverter.as文件代码如下：

 

1. class TempConverter implements mx.core.MXMLObject{ 
 

2. public var view;
 

3. function initialized(doc : Object, id : String) : Void { 
 

4. view = doc;
 

5.  }
 

6. function setupListener() : Void { 
 

7. view.myButton.addEventListener('click', this);
 

8.  }
 

9. function click(event) { 

10.  view.celsius.text=(view.farenheit.text-32)/1.8;

11.   }

12.   }