Flex精華摘要 4：使用AS指令碼

javaprogramers發表於2006-05-25
Flex指令碼

在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.   }

 

 

 

相關文章