Flex精華摘要 2：基本MXML功能

javaprogramers發表於2006-05-25
FlexXML

儲存和驗證資料
你可以使用資料模型來儲存特定資料，資料模型是一個可以提供儲存資料屬性和包含附加方法的AS物件。申明一個簡單的沒有任何方法的資料模型可以使用<mx:Model> 或 <mx:XML>標記，你還可以使用驗證元件驗證儲存資料的有效性。Flex包含了一套標準的資料驗證元件，當然你也可以建立自己的驗證元件。
下面的例子顯示了一個簡單的資料驗證。

 

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:TextInput id='homePhoneInput' text='這不是一個有效的電話號碼'/>
 

5. <mx:TextInput id='cellPhoneInput' text='(999)999-999'/>
 

6. <mx:TextInput id='emailInput' text='me@somewhere.net'/>
 

7. </mx:Panel>
 

8. <mx:Model id='contact'>
 

9. <homePhone>{ homePhoneInput.text }</homePhone>

10.  <cellPhone>{ cellPhoneInput.text }</cellPhone>

11.  <email>{ emailInput.text }</email>

12.  </mx:Model>

13.  <mx:PhoneNumberValidator field='contact.homePhone'/>

14.  <mx:PhoneNumberValidator field='contact.cellPhone'/>

15.  <mx:EmailValidator field='contact.email'/>

16.  </mx:Application>

 


執行效果如圖

請注意其中使用了電話號碼驗證和Email驗證元件
要使用驗證元件，需要注意幾個地方：
首先定義需要驗證的欄位，如

<mx:Model id='contact'>

 

2. <homePhone>{ homePhoneInput.text }</homePhone>

3. <cellPhone>{ cellPhoneInput.text }</cellPhone>

4. <email>{ emailInput.text }</email>

5. </mx:Model>

1.


然後使用驗證元件驗證相關欄位，如

<mx:PhoneNumberValidator field='contact.cellPhone'/>

 

2. <mx:EmailValidator field='contact.email'/>

1.



格式化資料
除了進行資料驗證之外，格式化輸入的資料也是經常需要用到的。Flex一樣包含了一套用於資料格式化的元件，下面的例子對郵編進行格式化處理：

 

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

2. <mx:ZipCodeFormatter id='ZipCodeDisplay' formatString='#####-####' />
 

3. <mx:Script>
 

4. <![CDATA[
 

5. var storedZipCode=123456789;
 

6. ]]>
 

7. </mx:Script>
 

8. <mx:Panel title='My Application' marginTop='10' marginBottom='10' marginLeft='10' marginRight='10' >
 

9. <mx:TextInput text='' />

10.  </mx:Panel>

11.  </mx:Application>

 


常用的資料格式化還有對日期的格式化處理：

: NumberFormatter 數字格式化
2 : CurrencyFormatter 貨幣格式化
3 : PhoneFormatter 電話號碼格式化
4 : ZipCodeFormatter 郵編格式化
5 : DateFormatter 日期格式化
6 : SwitchSymbolFormatter 建立自定義格式

 

1



使用樣式表
還可以使用<mx:Style>標記表來定義Flex元件的樣式表。

 

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

2. <mx:Style>
 

3. .myclass {  color: Red  } /* class selector */
 

4. Button {  font-size: 18pt } /* type selector */
 

5. </mx:Style>
 

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

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

8. <mx:Button styleName='myclass' label='This is red 18 point text.'/>
 

9. </mx:Panel>

10.  </mx:Application>

 

注意該標記不能巢狀在除根標記外的標記中。
執行效果如圖


使用效果
可以對元件使用過渡效果，效果往往是在事件觸發後產生，如滑鼠單擊、元件失去焦點和元件消失等。Flex專門提供了一套內建的效果元件。下面看一個例子：

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

 

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

3. <mx:Button id='myButton' mouseOverEffect='Zoom' />

4. </mx:Panel>

5. </mx:Application>

1.



使用MXML元件
可以使用MXML檔案定義自己的元件或者定義已有元件的組合，並通過<local:自定義元件名/>的方式呼叫。
如

 

1. <!-- MyComboBox.mxml -->
 

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

3. <mx:ComboBox >
 

4. <mx:dataProvider>
 

5. <mx:Array>
 

6. <mx:String>Dogs</mx:String>
 

7. <mx:String>Cats</mx:String>
 

8. <mx:String>Mice</mx:String>
 

9. </mx:Array>

10.  </mx:dataProvider>

11.  </mx:ComboBox>

12.  </mx:VBox>

 


注意，MXML元件檔案並不需要<mx:Application>標記，更復雜的自定義元件可以使用JSP或其它語言動態生成。
呼叫自定義元件的應用程式檔案格式如下：

<!-- MyApplication.mxml -->

 

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

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

4. <!-- 呼叫MyComboBox元件 -->

5. <local:MyComboBox/>

6. </mx:Panel>

7. </mx:Application>

1.

 

相關文章