Flex3.0数据绑定的两种方式

开发 后端
本文向大家介绍一下如何使用Flex3.0数据绑定来处理数据,Flex3.0数据绑定是连接一个对象中数据到另一个对象的处理过程,它提供了在应用程序中传递数据的方便的途径。

在学习Flex3.0的过程中,你会经常遇到Flex3.0数据绑定问题,这里和大家分享一下它的使用,Flex3.0数据绑定是连接一个对象中数据到另一个对象的处理过程。

使用Flex3.0数据绑定来处理数据

Flex3.0数据绑定是连接一个对象中数据到另一个对象的处理过程。它提供了在应用程序中传递数据的方便的途径。

AdobeFlex3提供几个途径来指定Flex3.0数据绑定:

◆使用大括号({})语法。
◆使用在大括号中ActionScript表达式
◆在MXML中使用<mx:Binding>标签
◆在ActionScript中使用绑定
 

使用大括号({})语法

Flex3.0数据绑定需要源属性,目标属性,触发事件。触发事件表名了合适需要从源向目标拷贝数据。下边的例子展示了一个Text控件获得Hslider控件值属性的数据。在大括号中的属性名是绑定表达式的源属性。当原属性的值发生变化,Flex复制源属性的当前值mySlider.value到目标属性,Text控件的text属性。

连接:要查看使用大括号语法更复杂的关于Flex3.0数据绑定的例子,查看Definingdatamodels

例子

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  2. <mx:Application 
  3. xmlns:mx="http://www.adobe.com/2006/mxml" 
  4. viewSourceURL="src/DataBindingSimple/index.html" 
  5. width="250"height="150"  
  6. > 
  7. <mx:Panel 
  8. title="Simpledatabinding" 
  9.  
  10. paddingLeft="10"paddingRight="10"paddingBottom="10" 
  11. paddingTop="10" 
  12. horizontalAlign="center" 
  13.  
  14. > 
  15. <mx:HSlideridmx:HSliderid="mySlider"/> 
  16. <mx:Texttextmx:Texttext="{mySlider.value}"/> 
  17. </mx:Panel> 
  18.  
  19. </mx:Application> 
  20.  

 使用在大括号中ActionScript表达式

大括号中的绑定表达式能够被包含在ActionScript表达式中用来发回一个结果。例如你能够使用大括号语法用于下边类型的绑定:

◆在大括号中一个单独的可绑定属性
◆在大括号中使用字符串串联,其中报站一个可绑定的属性
◆在大括号中基于可绑定属性的计算
◆在大括号中使用条件运算来判断一个可绑定属性
下边的例子中这事了用户界面中使用了每一种类型的绑定表达式

例子

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  2. <mx:Application 
  3. xmlns:mx="http://www.adobe.com/2006/mxml" 
  4. viewSourceURL="src/DataBindingActionScriptExpressionsSimple/index.html" 
  5. width="420"height="350"  
  6. > 
  7. <mx:Modelidmx:Modelid="myModel"> 
  8.  
  9. <myModel> 
  10. <!--Performsimplepropertybinding.--> 
  11. <a>{nameInput.text}</a> 
  12. <!--Performstringconcatenation.--> 
  13. <b>Thisis{nameInput.text}</b> 
  14.  
  15. <!--Performacalculation.--> 
  16. <c>{(Number(numberInput.text)asNumber)*6/7}</c> 
  17.  
  18. <!--Performaconditionaloperationusingaternaryoperator;  
  19. thepersonobjectcontainsaBooleanvariablecalledisMale.--> 
  20. <d>{(isMale.selected)?"Mr.":"Ms."}{nameInput.text}</d> 
  21. </myModel> 
  22.  
  23. </mx:Model> 
  24.  
  25. <mx:Panel 
  26. paddingBottom="10"paddingLeft="10"paddingRight="10"paddingTop="10"  
  27.  
  28. width="100%"height="100%"  
  29. title="Bindingexpressions" 
  30. > 
  31. <mx:Form> 
  32. <mx:FormItemlabelmx:FormItemlabel="LastName:"> 
  33.  
  34. <mx:TextInputidmx:TextInputid="nameInput"/> 
  35. </mx:FormItem> 
  36. <mx:FormItemlabelmx:FormItemlabel="Selectsex:"> 
  37. <mx:RadioButton 
  38. id="isMale" 
  39. label="Male" 
  40. groupName="gender" 
  41.  
  42. selected="true" 
  43. /> 
  44. <mx:RadioButton 
  45. id="isFemale" 
  46. label="Female" 
  47. groupName="gender" 
  48.  
  49. /> 
  50. </mx:FormItem> 
  51. <mx:FormItemlabelmx:FormItemlabel="Enteranumber:"> 
  52. <mx:TextInputidmx:TextInputid="numberInput"text="0"/> 
  53.  
  54. </mx:FormItem> 
  55. </mx:Form> 
  56.  
  57. <mx:Texttextmx:Texttext="{'Simplebinding:'+myModel.a}"/> 
  58. <mx:Texttextmx:Texttext="{'Stringconcatenation:'+myModel.b}"/> 
  59.  
  60. <mx:Texttextmx:Texttext="{'Calculation:'+numberInput.text+'*6/7='+myModel.c}"/> 
  61. <mx:Texttextmx:Texttext="{'Conditional:'+myModel.d}"/> 
  62.  
  63. </mx:Panel> 
  64. </mx:Application> 
  65.  

【编辑推荐】

  1. 探秘Flex与JavaScript交互
  2. 常用FlexBuilder快捷键用法指导
  3. Flex框架Riawave的定制应用
  4. 技术前沿 Flex2.0 从零开始实现文件上传
  5. FlexBuilder开发方法及特点解析 

 

 


 

责任编辑:佚名 来源: Adobe.com
相关推荐

2010-08-06 09:38:11

Flex读取XML

2010-07-27 15:03:37

Flex ArrayC

2010-07-28 13:54:42

Flex数据绑定

2010-07-30 09:16:24

Flex数据绑定

2010-11-29 09:56:00

sybase数据库备份

2010-08-11 14:22:26

Flex弹出窗口

2011-03-03 10:26:04

Pureftpd

2023-03-29 13:06:36

2010-08-13 12:54:20

Flex弹出窗口

2010-07-30 11:03:54

Flex数据绑定

2021-05-27 10:57:01

TCP定时器网络协议

2010-07-28 13:48:49

Flex数据绑定

2010-03-29 18:31:09

Nginx配置

2010-09-07 11:09:59

2010-10-21 16:24:18

sql server升

2009-06-25 13:43:00

Buffalo AJA

2010-04-06 10:52:06

Oracle数据库

2009-09-08 15:22:20

Spring依赖注入

2011-04-02 09:48:38

深拷贝

2010-07-15 14:38:55

Perl eval函数
点赞
收藏

51CTO技术栈公众号