Adobe Flex/AIR学习路线（Flex部分之数据篇二）

上一篇文章《Adobe Flex/AIR学习路线（Flex部分之数据篇一）》分析了Flex里面经常使用的一些数据类型、处理数据的一些常用的class等内容，今天我们简述一下，Flex里面的哪些组件也具有数据处理能力。

 

1、dataProvider
     在Adobe ActionScript 3.0里面的定义如下：

    要查看的数据集。此属性允许您将大多数类型的对象用作数据提供程序。如果将 dataProvider属性设置为 Array，则会将其转换为 ArrayCollection。如果将该属性设置为 XML对象，则会将其转换为仅包含一个项目的 XMLListCollection。如果将该属性设置为XMLList，则会将其转换为 XMLListCollection。如果将该属性设置为实现 IList 或 ICollectionView接口的对象，则可直接应用此对象。受转换操作的影响，在您获取 dataProvider属性时，该属性值将始终为 ICollectionView，所以此值不一定是您设置的对象类型。如果要修改数据提供程序中的数据，则了解以下行为非常重要：可能不会检测对原始数据所做的更改，但将检测对从 dataProvider属性获取的 ICollectionView 对象所做的更改。默认值为 null.此属性可用作数据绑定的源。

    上面那一大堆的东西其实就说明以下几点：
    a、凡是具有dataProvider的组件，都可以将Array、XML等内容作为数据源。
    b、将这些作为数据源的内容“自动”绑定并显示在这些控件上面。
    所以通常的做法，当Flex获取了外部数据后，可以将其直接赋值为dataProvider，然后通过一些设定，就可以在这些组件上面显示数据了。

    关于这个例子我就不在这里复述了，大家可以自行去找一下，或者直接看这里的内容： http://livedocs.adobe.com/flex/3_cn/mx/controls/ComboBox.html#includeExamplesSummary

 

2、itemRenderer（项目渲染器）及其data属性。
     itemRenderer的作用就是可以自定义一些组件的项目显示效果，例如我们熟知的Combobox、List、DataGrid等都具有这样的属性，也就是说，我们可以利用itemRenderer来改善ComBoBox里面的下拉的显示效果。当然，List、DataGrid也是这样的。

     当ComboBox中自定义了一个渲染器后，同时使用dataProvider的方式绑定了一个数据源，这个时候，如何与我们自定义的渲染器里面的item发生作用呢？就是使用data方式。

     也就是说，dataProvider可以绑定数据到UI、如果这个组件使用了自定义渲染器，那么就可以使用data.XXX的方式获取到dataProvider里面的数据。

 

okay，以上介绍的两个知识点是关于Flex组件的数据处理能力，其中dataProvider可以把Array、XML等内容作为数据源直接绑定并显示到UI上面，而itemRenderer里面的data是实现组件与其渲染器之间的数据处理。

下一篇的内容是关于Flex与后台进行通讯的常见的几种方式：HTTPService、WebService、Remote等方式，而通过这几种方式可以轻松的让一些例如Java、C#、Python、Ruby、PHP等主流编程语言为Flex所服务：）

 

附加：
关于dataProvider、itemRenderer、data的具体用法有些抽象，因此我特此列举一个例子来说明一下。
这是一个HorizontalList组件，而且其中它的itemRenderer=ToolBoxRenderer，想让我们看一下HorizontalList的片段代码：
<mx:HorizontalList id="myHorizontalList" itemRenderer="ToolBoxRenderer">
         <mx:dataProvider>
             <mx:Array>
                   <mx:Object tooltip= "rubber" styleName="rubber" language="{ _language }"/>
             </mx:Array>
         </mx:dataProvider>
</mx:HorizontalList>

然后是ToolBoxRenderer的片段代码：

<mx:Canvas width="30" height="30">
         <mx:Button
            width="30" height="30"
            toolTip="{ data.tooltip }"
            styleName="{ data.styleName }"/>
</mx:Canvas>

 

再让我们看看itemRenderer是如何与我们今天这个主题联系起来的。
1、在myHorizontalList中定义了一个dataProvider，通过代码可以看出是一个Array类型的变量，然后将其赋值给dataProvider。这个时候，其实就应该将数据显示到myHorizontalList上面了，这也就是dataProvider的用处。
2、在dataProvider包含的Array中，定义如下的结构：<mx:Object tooltip= "rubber" styleName="rubber" language="{ _language }"/>
3、我们不仅设定了dataProvider，还是同时设定了itemRenderer，即为ToolBoxRenderer。
4、在ToolBoxRenderer里面，定义了一个Button，同时我们使用类似于这样的方式可以取得dataProvider里面的数据：toolTip="{ data.tooltip }"

以上就是一个非常简单，但是又非常典型的一个dataProvider、itemRenderer、data的用法，希望大家可以理解：）