`
piaoyun29
  • 浏览: 46174 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Flex 的dataprovider和data的一点理解

    博客分类:
  • flex
阅读更多

原文地址:http://www.k-zone.cn/zblog/post/adobe-flex-air-traing-diagrams-data-2.html

 

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所服务:)

附加:
关于dataProvideritemRendererdata的具体用法有些抽象,因此我特此列举一个例子来说明一下。
这是一个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 }" 

以上就是一个非常简单,但是又非常典型的一个dataProvideritemRendererdata的用法,希望大家可以理解:)

分享到:
评论

相关推荐

    flex DataGrid设置dataProvider

    动态填充DataGrid示例 博文链接:https://feiying-zone.iteye.com/blog/810267

    用ArrayCollection当做flex中Tree控件的DataProvider

    tree多数情况下操作xml比较方便,而本人却对xml有些排斥,说得更确切些,对xml用的不是那么得心应手,所以选择了ArrayCollection

    Flex课程学习(附带源码)

    &lt;DataGrid dataProvider="{ws.getProducts...}" /&gt; &lt;LineChart dataProvider"{ws.getProducts...}" /&gt; A、 Application/WebService/Button/DataGrid/LineChart MXML组件 B、 id="ws" MXML 组件的id C、 click...

    flex柱状图动态切换数据源实例

    &lt;mx:ColumnChart x="6" y="65" id="columnchart1" showDataTips="true" dataProvider="{list}" height="390" itemClick="onItemClick(event)"&gt; 苹果" yField="apple" click="columnseries1_...

    flex添加动态曲线(lineChart)

    动态添加曲线条数 通过传递lablefild,和dataProvider的数组实现动态添加曲线

    使用Flex,Java,Json更新Mysql数据【高级篇】

    但是有一个问题就是在更新的时候都是发送整个datagrid的dataprovider中信息到数据库,无论有的资料并没有需要更新,这样处理起来效率就很低了。所在在高级篇中我想传递的数据只是用户更新的那部分。这样效率就会明显...

    flex 异步加载tree

    dataProvider="{loadingxml}" y="10" height="400" width="394" labelField="@label" itemClick="tree_itemClick(event);" itemOpening="tree_itemOpening(event);" &gt; &lt;/lns:AsyncTree&gt; ...

    Flex调用xml通过DataGrid遍历简单示例

    creationComplete="service.send()" &gt; &lt;![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent;... import mx.collections.... dataProvider="{slides}"/&gt; &lt;/mx:Application&gt;

    flex导出excel的代码

    &lt;mx:DataGrid id="dg1" dataProvider ="{dp}"&gt; (data as Object)} " /&gt; &lt;/mx:DataGridColumn&gt; &lt;mx:DataGridColumn headerText="names" dataField="names" width="200" /&gt; ...

    看完Flex就可以做出一个小游戏

    Design 视图:按钮,图片 Source 视图 MXML/ActionScript 3.0 动态效果:移动,旋转,放大,淡入...表格DataGrid, dataProvider,集合对象Array,ArrayCollection Http请求 HttpService, 报表:饼图,折线图,柱状图

    flex 初学者入门资料

    快步进入flex门槛 1.效果-模糊化 ...&lt;mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}"&gt; 获取每行的值:DataGrid.selectedItem.postLink)

    flex实列demo

    &lt;mx:Tree id="tree" width="100%" height="100%" dataProvider="{content}" change="iFrame.source=tree.selectedNode.path" /&gt; &lt;![CDATA[ import mx.collections.ArrayCollection; //...

    Flex Olap完整项目源码,可直接运行

    &lt;mx:LinkBar dataProvider="{viewStack}" direction="horizontal" labelField="name" /&gt; &lt;mx:ViewStack id="viewStack" width="100%" height="75%" creationComplete="showData()" change="viewChanged(event)"&gt; ...

    Developing Flex Applications 910p dda_doc88_cracker.zip

    1. a book Developing Flex Applications 2. a web page viewer for doc88 ebt 3. a DDA downloader for doc88.com CONTENTS PART I: Presenting Flex CHAPTER 1: Introducing Flex. . . . . . . . . . . . . . ...

    Flash(ActionScript 3.0) Tree组织结构树

    纯as3.0写的Tree,完美支持xml,用法: &lt;!-- 将非可视元素(例如服务、值对象)... itemRenderer="tasklib.component.UserTreeRenderer" labelField="@labels" dataProvider="{data}"&gt; &lt;/component:UserTree&gt;

    VB编程资源大全(英文源码 控件)

    1 , vb5dialog.zip This demonstrates how to subclass the Common Dialog Dialogs and manipulate a specific Dialog.&lt;END&gt;&lt;br&gt;2 , cpnl.zip Form_Taskbar is a control for Visual Basic which, once placed...

    asp.net知识库

    我对J2EE和.NET的一点理解 难分难舍的DSO(一) InternalsVisibleToAttribute,友元程序集访问属性 Essential .NET 读书笔记 [第一部分] NET FrameWork的Collections支持 .NET的反射在软件设计上的应用 关于跨程序集...

Global site tag (gtag.js) - Google Analytics