Flex基础-----之DataProvider详解

      在我分享的一篇文章中，讲解了几种关于做DataProvider的途径，但是最近没事又仔细的了解了一下。发现这其中还有好多变化之处。

下面就讲拿用数组作为数据提供器来详细解析一下：

举个最简单的例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataProviderArray/index.html"

width="150" height="140"
>
<mx:Script>
<![CDATA[

[Bindable]
  public var cards:Array = ["Visa", "MasterCard", "American Express"]; 
]]>

</mx:Script>
<mx:ComboBox id="statesCombo" dataProvider="{cards}"/>
</mx:Application>
这很简单吧。选择下拉框，弹出三个选项。

如果改成这样呢？

<fx:Script>
  <![CDATA[

[Bindable]
  public var cards:Array= 
   [ 
  {label:"Visa",data:1}, 
  {label:"MasterCard",data:2}, 
  {label:"American Express",data:3} 
  ];

private function closeHandler(event:Event):void {
myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.label;

myData.text = "Data: " + ComboBox(event.target).selectedItem.data;
}
]]>
</fx:Script>

<mx:Panel title="ComboBox Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

  <mx:ComboBox width="150"  close="closeHandler(event);" dataProvider="{cards}">
</mx:ComboBox>
<mx:VBox width="250">
<mx:Text width="200" color="blue" text="Select a type of credit card."/>
<mx:Label id="myLabel" text="You selected:"/>
<mx:Label id="myData" text="Data:"/>
</mx:VBox>

</mx:Panel>
 我们只看关键代码，发现还是一样能运行，这是怎么回事呢，查一下官方文档才知道，

是这么说的：dataProvider Array 中项目的字段名，将在 TextInput 部分和下拉列表中显示为标签。默认情况下，该控件会使用每个 Array 对象的 label 的属性，并显示该属性。 恍然大悟。。。原来它会自动匹配上这个属性。其实这种写法是正规的，一开始那种不太规范。

如果我们把其中的label全该为别的名的话，比如labelfoo，在运行的话，发现关联不上了。这时我们怎么办呢，我们难道不能随便写这个名字吗？官方文档还说了下句话：但是，如果 dataProvider 项目不包含 label 属性，则可以设置 labelField 属性以使用其它属性。 

God!人家都已经说的很明白了。

这是我们可以这样，

<fx:Script>
  <![CDATA[

[Bindable]
  public var cards:Array = 
   [ 
   {labelfoo:"Visa",data:1}, 
   {labelfoo:"MasterCard",data:2},
   {labelfoo:"American Express",data:3}
   ];

private function closeHandler(event:Event):void {
  myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.labelfoo;//???????????

  myData.text = "Data: " + ComboBox(event.target).selectedItem.data;//????????????
}
]]>
</fx:Script>

<mx:Panel title="ComboBox Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

<mx:ComboBox width="150"
close="closeHandler(event);" dataProvider="{cards}">
<mx:labelField>labelfoo</mx:labelField>//这样就可以随意匹配了。
</mx:ComboBox>

<mx:VBox width="250">
<mx:Text width="200" color="blue" text="Select a type of credit card."/>
<mx:Label id="myLabel" text="You selected:"/>
<mx:Label id="myData" text="Data:"/>
</mx:VBox>

</mx:Panel> 

问题又来了：现在我们遇到这样的问题：通过上面的方法，我们只能用到它其中的一个属性。那如果我们有这么个数组private var myDP:Array=   [{id:1,fName:"Lucky", lName:"Luke"},   {id:2, fName:"Bart", lName:"Simpson"}]; 现在想在下拉别表框显示

 

fName和IName这两个属性的拼接，也就是每个下拉列表显示Lucky Luke和Bart Simpson，但是我们值能在<labelField>中只能写一个属性，这样就不能实现我们想的那样了，怎么办呢？

 

默认情况下，在Flex 中基于List 的控件都是使用dataProvider 中的元素的label 属性来做显 示。在一些情况中，无论如何，dataProvideer 中都没有label 属性存在，这些情况就需要你 来设定连接dataProvider 中的多个字段来实现一个显示值。这个labelFunction 属性允许用户 定义自己的方法来呼叫dataProvider 中每个元素，然后对于每个元素返回显示值。如下范例，
ComboBox 的labelFunction 属性包含了一个getFullName 函数的引用，这个函数连接了 dataProvider 中单个元素的fName 和lName 字段来返回一个全名的字串。

<mx:Application  
xmlns:mx="http://www.adobe.com/2006/mxml"  
layout="horizontal">  
<mx:Script>  
<![CDATA[  
import mx.collections.ArrayCollection;  
[Bindable]  
private var myDP:ArrayCollection =   new ArrayCollection([  
                                                                                             {id:1,fName:"Lucky", lName:"Luke"},   
                                                                                             {id:2, fName:"Bart", lName:"Simpson"}]);  
private function getFullName(item:Object):String{  
return item.fName + " " + item.lName;  
} 

<mx:ComboBox dataProvider="{myDP}"  
labelFunction="getFullName"/>   
 
]]>  
</mx:Script>  
</mx:Application>  

 

 这个问题解决了，还有个问题，

ComboBox(event.target).selectedItem.labelfoo和

 

ComboBox(event.target).selectedItem.data这两句是什么意思？如果用Flex Buider的话打点儿只能点到selectedItem这，再点也没有labelfoo和data这两个属性，后来观察这两个字段不正是 数组里中的 每个对象的两个属性嘛。又是查了文档才知道：  
   selectedItem属性包含对 dataProvider 中所选项目的引用。如果该数据是一个对象或类实例，则修改该对象或实例中的属性会修改dataProvider，其视图也会随之更改。

哦，原来鱼刺！