存儲和驗證數據
你可以使用數據模型來存儲特定數據，數據模型是一個可以提供存儲數據屬性和包含附加方法的
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
>
格式化數據
除了進行數據驗證之外，格式化輸入的數據也是經常需要用到的。
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
創建自定義格式
使用樣式表
還可以使用
<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'
>?????
<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
>
使用
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>
.?
</
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
>
posted on 2007-01-12 11:45
???MengChuChen 閱讀(170)
評論(0) 編輯 收藏 所屬分類:
flex2.0