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

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

     <mx:Application xmlns:mx=‘http://www.macromedia.com/2003/mxml‘>
     
<
mx:Panel title=‘My Application‘ >
     <mx:HBox>
     <mx:Label text=‘Temperature in Farenheit:‘/>
     <mx:TextInput id=‘farenheit‘ width=‘120‘/>
     <mx:Button label=‘Convert‘ click=‘celsius.text=(farenheit.text-32)/1.8;‘ />
     <mx:Label text=‘Temperature in Celsius:‘/>
     <mx:Label id=‘celsius‘ width=‘120‘ fontSize=‘48‘/>
     </mx:HBox>
    </mx:Panel>
    </mx:Application>

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

     <mx:Application xmlns:mx=‘http://www.macromedia.com/2003/mxml‘>
     
<
mx:Script>
     <![CDATA[
     function calculate() { 
     celsius.text=(farenheit.text-32)/1.8;
      }
     
]]>
     
</mx:Script>
     <mx:Panel title=‘My Application‘ >
    <mx:HBox>
    <mx:Label text=‘Temperature in Farenheit:‘/>
    <mx:TextInput id=‘farenheit‘ width=‘120‘/>
    <mx:Button label=‘Convert‘ click=‘calculate();‘ />
    <mx:Label text=‘Temperature in Celsius:‘/>
    <mx:Label id=‘celsius‘ width=‘120‘ fontSize=‘48‘/>
    </mx:HBox>
    </mx:Panel>
    </mx:Application>

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

     <mx:Application xmlns:mx=‘http://www.macromedia.com/2003/mxml‘>
     
<!-- 
Specify the ActionScript file containing the function. -->
     <mx:Script source=‘sample3script.as‘/>
     <mx:Panel title=‘My Application‘ >
     <mx:HBox>
     <mx:Label text=‘Temperature in Farenheit:‘/>
     <mx:TextInput id=‘farenheit‘ width=‘120‘/>
     <mx:Button label=‘Convert‘ click=‘calculate();‘ />
     <mx:Label text=‘Temperature in Celsius:‘/>
    <mx:Label id=‘celsius‘ width=‘120‘ fontSize=‘48‘/>
    </mx:HBox>
    </mx:Panel>
    </mx:Application>

sample.as文件代码如下：

    function calculate() { 
    
celsius.text=(farenheit.text-32)/1.8;
     }

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

     <mx:Application xmlns:mx=‘http://www.macromedia.com/2003/mxml‘
     
initialize=‘converter.setupListener()‘>
     <local:TempConverter id=‘converter‘ xmlns:local=‘*‘/>
     <mx:Panel title=‘My Application‘ >
     <mx:HBox>
     <mx:Label text=‘Temperature in Farenheit:‘ />
     <mx:TextInput id=‘farenheit‘ width=‘120‘ />
     <mx:Button id=‘myButton‘ label=‘Convert‘ />
     <mx:Label text=‘Temperature in Celsius:‘ />
    <mx:Label id=‘celsius‘ width=‘120‘ fontSize=‘24‘ />
    </mx:HBox>
    </mx:Panel>
    </mx:Application>

TempConverter.as文件代码如下：

     class TempConverter implements mx.core.MXMLObject{ 
     
public var view;
     function initialized(doc : Object, id : String) : Void { 
     view = doc;
      }
     
function setupListener() : Void { 
     view.myButton.addEventListener(‘click‘, this);
      }
     
function click(event) { 
    view.celsius.text=(view.farenheit.text-32)/1.8;
     }
    
 }

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。