Flex精華摘要 1：如何開始

javaprogramers發表於2006-05-25
Flex

你至少需要了解兩種語言才能開發Flex應用程式：MXML和ActionScript。MXML是一種XML標記語言，主要用來設定Flex的使用者介面，還包括一些不可見的元素，例如訪問資料來源、資料繫結等。ActionScript是一種物件導向的程式語言，採用ECMAScript第4版的標準，用來完成程式邏輯和響應使用者的互動。
和HTML的方式一樣，MXML定義了相關的標記來表示不同的使用者介面，區別的是比HTML更嚴格和有著更豐富的標記集。例如，MXML既包含了一些可視元件如Tree、Data Grid、accordions和menu，也包含了WebSerivce連線、資料繫結、動畫效果等不可視的元件。你甚至可以通過定製自己的元件來擴充套件MXML標記。
MXML和HTML最大的區別之一是MXML頁面會被伺服器編譯成SWF檔案，並通過FlashPlayer播放，提供了更強和更豐富的動態使用者介面。
你可以在一個或多個檔案中編寫MXML應用程式，MXML支援定義的元件，這些元件可以是MXML檔案、AS檔案或者使用FlashMX2004建立的檔案。在一些MXML標記中，可以包含對外部檔案的引用。例如，你可以通過<mx:Script>標記的source屬性來包含一個外部的AS指令碼檔案。
MXML支援多種方式的外部檔案引用，如

//1. 使用絕對地址

 

2. <mx:Style source='http://www.somesite.com/mystyles.css'>

3. //2. 使用◎ContextRoot

4. <mx:HTTPService url='@ContextRoot()/directory/myfile.xml'/>

5. //3. 使用根目錄引用方式

6. <mx:Script source='/myscript.as'/>

7. //4. 使用相當路徑引用

8. <mx:Script source='../myscript.as'/>

 

1.



最簡單的Flex應用程式
很多程式語言的第一個例子都是編寫Hello，World。MXML的Hello，World！程式也很簡單

<?xml version='1.0'?>

 

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

3. <mx:Panel title='My Application' marginTop='10' marginBottom='10'

4. marginLeft='10' marginRight='10' >

5. <mx:Label text='Hello World!' color='#6601D7' fontSize='24' />

6. </mx:Panel>

7. </mx:Application>

 

1.


<?xml version='1.0'?>是MXML的檔案申明，必須寫在檔案的第一行
<mx:Application>是MXML檔案的根標記
<mx:Label>就是MXML的元件標記之一，text color fontSize 是Label元件的屬性。
下面一個例子顯示了更為複雜的使用者介面

 

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

2. <mx:Panel title='My Application' marginTop='10' marginBottom='10'
 

3. marginLeft='10' marginRight='10' >
 

4. <mx:HBox>
 

5. <!-- List with three items -->
 

6. <mx:List>
 

7. <mx:dataProvider>
 

8. <mx:Array>
 

9. <mx:String>Item 1</mx:String>

10.  <mx:String>Item 2</mx:String>

11.  <mx:String>Item 3</mx:String>

12.  </mx:Array>

13.  </mx:dataProvider>

14.  </mx:List>

15.  <!-- First pane of TabNavigator -->

16.  <mx:TabNavigator borderStyle='solid'>

17.  <mx:VBox label='Pane1' width='300' height='150' >

18.  <mx:TextArea text='Hello World' />

19.  <mx:Button label='Submit' />

20.  </mx:VBox>

21.  <!-- Second pane of TabNavigator -->

22.  <mx:VBox label='Pane2' width='300' height='150' >

23.  <!-- Stock view goes here -->

24.  </mx:VBox>

25.  </mx:TabNavigator>

26.  </mx:HBox>

27.  </mx:Panel>

28.  </mx:Application>

 

 


顯示效果如下

在Flex應用程式中，也有事件的響應屬性。最簡單如滑鼠單擊事件。

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

 

2. <mx:Panel title='My Application' marginTop='10' marginBottom='10'

3. marginLeft='10' marginRight='10' >

4. <mx:TextArea id='textarea1'/>

5. <mx:Button label='Submit' click='textarea1.text='Hello World';'/>

6. </mx:Panel>

7. </mx:Application>

 

1.

單擊Submit按鈕後Textarea中顯示內容為：'Hello World'
更加規範化的寫法是使用指令碼定義函式呼叫

 

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

2. <mx:Script>
 

3. <![CDATA[
 

4. function hello(){ 
 

5. textarea1.text='Hello World';
 

6.  }
 

7. ]]>
 

8. </mx:Script>
 

9. <mx:Panel title='My Application' marginTop='10' marginBottom='10'

10.  marginLeft='10' marginRight='10' >

11.  <mx:TextArea id='textarea1'/>

12.  <mx:Button label='Submit' click='hello();'/>

13.  </mx:Panel>

14.  </mx:Application>

 

 


如果希望多個元件之間可以繫結資料的話，在Flex中可以簡單的實現，請注意，在屬性中使用{ }標記就表示其中包含的是表示式，而不是字串。下面的例子，如果textinput文字框的內容改變，textarea中的內容也會隨之變化。

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

 

2. <mx:Panel title='My Application' marginTop='10' marginBottom='10'

3. marginLeft='10' marginRight='10' >

4. <mx:TextInput id='textinput1' text='Hello'/>

5. <mx:TextArea id='textarea1' text=''/>

6. <mx:Button label='Submit' click='textinput1.text='Goodbye';'/>

7. </mx:Panel>

8. </mx:Application>

 

1.


Flex可以和本地或者是遠端伺服器端的邏輯進行互動，其方式可以通過如下方式之一：

: WebService 提供基於SOAP的web服務訪問
2 : HTTPService 提供了基於 HTTP訪問和資料返回
3 : RemoteObject 基於AMF協議訪問Java物件

 

 

1

 

相關文章