存储和验证数据
你可以使用数据模型来存储特定数据，数据模型是一个可以提供存储数据属性和包含附加方法的
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 阅读(164)
评论(0) 编辑 收藏 所属分类:
flex2.0