【永恒的瞬间】
☜Give me hapy ☞

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

只有注册用户登录后才能发表评论。


网站导航: