FLEX4实践—动态生成DataGrid及应用客户化itemRenderer

合集下载

WPF动态生成DataGrid及动态绑定解决方案

WPF动态⽣成DataGrid及动态绑定解决⽅案⼀、场景有过WPF项⽬经验的朋友可能都知道，如果⼀个DataGrid要绑定静态的数据是⾮常的简单的（所谓静态是指绑定的数据源的类型是静态的），如下图所⽰，想要显⽰产品数据，只需绑定到⼀个产品列表即可，这个⼤家都清楚，所以这个要讲的肯定不是这个。

但是现在有⼀个新的需求，根据所选择产品的不同，要动态⽣成第⼆个表格中的不同数据，以便进⾏编辑，如下图1、2所⽰，当选择的产品不同时，第⼆个表格显⽰的内容是完全不⼀样的。

这样就会产⽣⼀个问题，⽆法直接对第⼆个表格进⾏绑定，因为它的数据源类型都是不⼀样的，⽆法按照传统⽅法进⾏绑定。

如何解决，先⾃⼰思考⼀下，也许会有更好的解决⽅案。

⼆、思路1、定义Domain既然⽆法知道要绑定的数据类型是什么，因为它是动态的，⽆法事先预知的，根据所选择的产品（因为产品数据都存储于DB中，所以将类型定义于Domain项⽬中）不同⽽变化的。

那么可以在 Product 中定义 SKUFields 属性⽤于代表产品可显⽰的字段。

产品定义如下所⽰。

///<summary>///产品///</summary>[Table("Product")]public class Product{public int ProductId { get; set; }public string ProductDesc { get; set; }public bool IsRFID { get; set; }public bool IsTID { get; set; }public string CustomerItemCode { get; set; }public string ProductCode { get; set; }public string SuggestedPrinter { get; set; }///<summary>///产品对应的⽂件名称///</summary>public string ProfileName { get; set; }///<summary>///产品对应的SKU字段列表///</summary>public ICollection<SKUField> SKUFields { get; set; }}///<summary>/// SKU 字段///</summary>public class SKUField{///<summary>///产品ID///</summary>public int ProductId { get; set; }///<summary>///字段ID///</summary>public int SKUFieldId { get; set; }///<summary>///字段名称///</summary>public string FieldName { get; set; }///<summary>///字段标题，⽤于显⽰///</summary>public string FieldTitle { get; set; }///<summary>///字段是否可编辑///</summary>public bool IsEditable { get; set; }///<summary>///字段的值///</summary>public object DefaultValue { get; set; }///<summary>///字段值是否可选///</summary>public bool IsValueSelectable { get; set; }///<summary>///字段的类型，如int、string或其他///</summary>public Type FieldType { get; set; }///<summary>///如果IsValueSelectable = True,那么SKUFieldValues代表可选择的值列表///</summary>public ICollection<SKUFieldValue> SKUFieldValues { get; set; }}///<summary>///⽤于定义SKU字段的取值///</summary>public class SKUFieldValue{public int SKUFieldId { get; set; }public int SKUFieldValueId { get; set; }public string FieldValue { get; set; }}然后在项⽬中定义 IProductRepository 接⼝，⽤于定义获取产品的⽅法。

FLEX4_Flex4教程

Flex 应用的构建形式尽管用 Flex 开发 RIA 有多种形式，但现在主流的架构是：Flex 作为 Client（客户端），Java、PHP、 Asp、Ruby 等技术作为 Server（服务器端）。
本教程之后的内容主要介绍 Flex 与 Java 技术的整合。
Flex 访问服务器端数据的 3 种方式既然 Flex 可以和 Java 等 Sever 端技术整合，那么它们之间怎样实现通信的呢？Flex 通过 HTTPService，WebService 和 RemoteObject 这 3 个组件实现与 Server 端的通信。

外观与样式设计使用 CSS 和图形属性编辑器自定义应用程序外观。快速设置最常用的属性，并在“Design”（设计）视图中预览结果。使用新的 Theme Browser（主题浏览器）浏览可用主题，并将它们应用于您的项目。

与 Adobe Creative Suite 设计工具集成导入使用 Adobe Flash Professional、Illustrator®、Photoshop® 或 Fireworks® 软件创建的设计资源，或导入使用 Flash Catalyst 创建的整个应用程序用户界面。Flash Professional 与 Flash Builder 之间的新工作流程简化了自定义 Flex 组件的导入和更新。

HTTPService 组件
HTTPService 组件允许你与 HTTP 服务交互，可以是接收 HTTP 请求和发送 HTTP 响应的任何 HTTP URI。你可以通过 HTTPService 组件调用任何类型的 Server 端技术，包括 PHP pages, ColdFusion Pages, JavaServer Pages, Java servlets, Ruby on Rails 和 ASP pages。 HTTPService 组件允许你发送 HTTP GET、POST、HEAD、OPTIONS、PUT、TRACE 和 DELETE 请求，并典型的以 XML 形式返回。

第24-28讲：Flex数据集成基础-Flex数据集成基础-Flex与XML、DataGrid、项目呈现器集成开发

<item id="2" name=“a"/> <item id="3" name=“b"/> <item id="4" name=“c"/> XML 对象需要设定顶级节点: <items> <item id="2" name=“a"/> <item id="3" name=“b"/> <item id="4" name=“c"/> </items>

可以使用”@”运算符来指定所需的属性值为一个字段: xml.bar.@type 要存取多个名称相同的子节点, 可以使用”[]”运算符。好像以下的例子: var xml:XML = <foo> <bar type="salutation">Hello World</bar> <bar type="salutation">Hola</bar> <bar type="salutation">Guten Tag</bar> </foo> 你可以使用以下的方法来存取<bar>系列的第三个对象: xml.bar[2].@type

Flex 4 和ActionScript 3.0 支持ECMAScript 或E4X 标准的 XML 语法, 使你可以通过点(.)标记来存取一个XML 分层架构的各个节点。通过E4X 所提供的简易标记, 你可以根据其名称或索引, 轻易地存取特定的节点或节点组, 而无需使用一些复杂的自定义回调函数。同时,它也定义了各种方法及属性, 用以存取XML 对象的各个部分, 包括注释, 命名空间和处理指令等。Flex Framework 及ActionScript 3.0 定义了两个级别的对象来处理XML 语言: XML 和 XMLList 对象。XML 对象代表单一的XML 元素, 一个XML 文档或该文档中的一个单值元素。XMLList 则代表一组跟其他组同级的XML 元素。 XMLList 对象不需要设置顶级节点, 例如:

flex4.0标签

Flex 4 读取xml文件，xml文件的格式：<root>根节点<leaf>叶子<info>信息<in id="logo">test-logo</in><in id="left">test-left</in></info></leaf><in id="middle">test-middle</in></root>fx:Binding可以使用 <fx:Binding> 标签将某个对象的数据绑定到另一个对象。

可以使用 <fx:Component> 标签在 MXML 文件中定义内联单元格渲染器或单元格fx:Component编辑器。

fx:Declarations可以使用 <fx:Declarations> 标签声明当前类的非默认、不可视属性。

可以在 <fx:Library> 标签内使用 <fx:Definition> 标签定义图形子对象，然后fx:Definition可以将子对象用于应用程序的其他部分中。

fx:DesignLayer<fx:DesignLayer> 标签仅供内部使用。

fx:Library可以使用 <fx:Library> 标签声明当前类的非默认、非可视属性。

fx:Metadata使用 <fx:Metadata> 标签可以在 MXML 文件中插入 metadata 标签。

fx:Model可以使用 <fx:Model> 标签在 MXML 中声明数据模型。

fx:Private可以使用 <fx:Private> 标签提供有关 MXML 或 FXG 文档的元数据信息。

作为视图状态更改的一部分，可以使用 <fx:Reparent> 标签更改某个组件的父容fx:Reparent器。

第9章 Flex 4系统组件：图表

χ
1．条形图． Flex 4中使用BarChart组件创建条形图，使用BarSeries序列组件定义BarChart
Hale Waihona Puke 的数据。BarSeries的属性主要有以下几个。（1）xField （2）yField （3）minField （4）fill （5）stroke
（1）指定数据源。为BarChart组件指定数据源，本示例在<fx:Script>标签中使用ActionScript代码定义一个ArrayCollection类型的变量barChartData作为显示的数据源。在 <s:Application>标签下添加如下代码： <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var barChartData:ArrayCollection = new ArrayCollection( [ { month: "Jan", profit:550, amount: 50}, { month: "Feb", profit:1000, amount: 110}, { month: "Mar", profit:680, amount: 80} ]); ]]> </fx:Script>
折线图的效果如图所示。示例代码所示。
Flex使用PieChart组件创建饼图，使用PieSeries序列组件定义PieChart的数据。根据数据源中的数据确定每个数值在圆饼上所占的份额。PieSeries组件常用的属性如下所示。（1）field （2）nameField （3）labelFunction （4）labelField （5）labelPosition （6）calloutStroke （7）radialStroke （8）fills （9）stroke

myflex笔记

Flex原理1．事件的原理分为三个阶段：捕获、目标、冒泡事件的起源是跟结点stage 直到发生事件的对象，之后又向相反的方向回到stageStage->obj :捕获阶段寻找obj的过程：目标阶段Obj->stage:冒泡阶段节点：stage->application-> 容器（panel等）->obj;2. data 绑定原理[Bindable(event="propertyChange")]。

（默认的绑定）Flex组件默认监听了propertyChange 事件；3． flex通信原理：3.1过程：通道-》端点-》消息-》服务-》目的地-》适配器3.2 通信的组件：. RemoteObject –远程调用• HTTPService –http代理• WebService –http代理• Producer –消息• Consumer –消息3.3 原理BlazeDS ：是一个基于服务器的Java远程调用（remoting）和Web消息传递（messaging）技术图解：3.1端点(Endpoint) (在MessageBrokerServlet中实现)。

endpoint,其默认形式是/messagebroker/amf通道类型：amf Channel（速度快）、httpChannel(二进制无压缩的)等消息通过channel传到endPoint ，Channel 和endpoint的编码格式必须一致比如都用amf的3.2. messgeBroker（消息代理人）messgeBroker 将消息根据(destination)服务请求的种类，传给不同的服务，服务再传到对应的服务的destination3.3.Service and destination 类别remoteService->remoteServiceDestination（RomoteObject 对象）->remote-config.xmlhttpproxyService->httpproxyserviceDestination(httpService\webService 对象)->proxy-config.xmlmessageservice->messageDestination(producer\consumer 对象)->message-config.xmldestination：目标其实是一个请求的目标：对于常用的远程方法调用来说，其目标(destination)就是某个特定的java服务，或者某个特定的配置好的Java类对于代理目标来说，则是定义好的代理种类，比如说普通HTTP代理还是基于WebService的代理对于消息目标来说，则是某个特定的消息服务种类3.4．AdapterRemote->javaadapterProxy->httproxyAdaper\soapadaperMessage->jms or as(客户端交换信息)4. flex 配置Flex socket 通信1．DataGrid1．dataGrid 数据的处理itemClick 事件：event：ListEvent；(var grid:DataGrid= event.target as DataGrid)所点击列的表头：grid.columns[event.columnIndex].headerText;列索引：event.columnIndex;行索引：event.rowIndex;选中的行数据：grid.selectedItem选中的单元格数据：grid.selectedItem[grid.columns[e.columnIndex].dataFiled]2． DataGrid 数据的移动方法：grid.removeItemAt;grid.addItemAt;3． Mxml中引入xml文件（利用HTTPService）可以作为dataGrid的数据源实例：<mx:HTTPService id="simpletest"url="assets\photoFood.xml"result="photoColl=stResult.list.food"/>注意：private var photoColl：arrayCollection；或者用监听方式取回结果：Private function onResult(event:ResultEvent):void{This. photocell=event.result.list.food ；}photoFood.xml：<list><food><food_name>Artichoke Dip</food_name><photo>artichokeDip.jpg</photo></food><food><food_name>Bread Pudding</food_name><photo>breadPudding.jpg</photo></food><food><food_name>Cheesecake</food_name><photo>cheesecake.jpg</photo></food></list>4．dataGrid 的itemReader 可以是自定义的任何组件；rendererIsEditor="true" ：渲染的组件可以编辑，并且编辑后的值可以返回到datagrideditorDataField="value"（默认为“text”）：渲染器要编辑的属性5．ArrayCollection的过滤器：实例：利用combobox控制数据的显示private function myFilter():void{if(this.myCom.selectedItem.toString()=="ALL"){this.reviewList.filterFunction=null;}else{this.reviewList.filterFunction=myFunc;}//refresh() 必须添加的方法this.reviewList.refresh();}//过滤器的筛选规则返回值为boolean，参数为容器的一个对象private function myFunc(item:Object):Boolean{return(item.rating.toString()==this.myCom.selectedItem.toString());}<mx:ComboBox dataProvider="{}" change="myFilter()" id="myCom"/>Private var com:ArrayCollection=new ArrayCollection(["1","2","3","4","5","ALL"]);DataGrid颜色专题总结：1。

使用Flex图表组件

使用Flex图表组件2009-05-09 13:25以图表或是图的方式显示数据的能力可以使得Flex程序用户的数据交互更为容易。

与仅显示简单的数字数据表不同，我们可以显示条状图，饼图，线图或是其他类型的图表，并且可以使用颜色，标题以及二维图形来表示我们的数据。

在这一部分我们会介绍Flex图表，菜单数据，以及我们可以在Flex中创建的其他类型的图表。

关于图表数据表示可以使得我们简化数据表示与数据关系的方式来表示数据。

图表是数据的一种类型，从而我们可以使用二维的图形来表示我们的数据。

Flex支持最常见的二维图形，例如条状图，柱状图，饼图，并且提供给我们对于图表显示的的极大控制。

一个简单的图表显示单一的数据系列，在这里系列是一组相关的数据点。

例如，一个数据系列也许是月度销售收益，或者是一天的旅馆占有率。

下面的图表显示了过去六个月的与销售收益相应的数据系列：JiniiJiv lM>rch 卜i&hl 」uni另一种图表也许会添加第二个数据系列。

例如，我们也许会包含过去六个月的利润。

下面的图表显示了两个数据系列，一个是销售，一个是利润：定义图表数据图表控件使用为图表定义数据的date Provider属性。

一个数据提供者(date provider)是一个对象的集合，与数组类似。

图表组件使用平的，或者是基于列表的，数据提供者，与一维数组类似。

一个数据提供者由两部分组成：一个数据对象集合与API。

数据提供者API是个类必须实现的方法与属性的集合，从而Flex组件可以将其看作数据提供者。

图表类型Flex支持最常见的一些图表类型，包括条状图，线图，饼图以及其他的类型。

这一部分描述Flex所提供的图表集合。

除了这些图表类型以外，我们还可以扩展笛卡尔图表控件还创建自定义的图表。

区域图表我们使用图表控件将数据表示为一个用与数据值相关的线来界定的区域。

下的区域用一种颜色或是一种类型来进行填充。

我们可以用图标或是符号来表示线上的每一个数据点，或者是不使用图标而仅用单一的线。

flex4 读书笔记

chapter 11、flex包含一个基于组件的开发模型，你只需要按需求继承现有的组件并扩展相关的方法就可开发你的应用。

2、可视化组件包括以下主要特性：尺寸、事件、样式、效果、皮肤。

3、flex定义了两套组件。

一套为Spark，放在spark.*包下。

一套为MX，放在mx.*包下。

Spark是在flex4中新添加的，mx为旧版本中定义的。

两套组件的主要不同点在于样式及皮肤的使用。

另外对于容器组件，布局的方式也改变了。

4、有些组件在两套UI中都存中，例如按钮，在这种情况下adobe建议你使用Spark中的组件。

有些组件是某套UI特有的。

例如Spark中的3d效果。

mx组件中的数据可视化组件，例如DataGrid、AdvancedDataGrid。

所以你的应用会包含两套UI中的组件。

5、可视化组件的继承层次结构：Object-EventDispatcher-DisplayObject-InteractiveObject-DisplayObjectContainer-Sprite-FlexSprite-UIComponent。

flex中所有的可视化对像都继承自UIComponent。

6、UIComponent中需要注意以下属性。

doubleClickEnabled:flex默认是不支持双击的，如果要开启双击，请把该属性设为true;height:在mxml中你可以设置值为数字，这时默认单位为pix。

你也可以设置为70%这种比例。

在as中，如果要设置百分比，你需要用percentHeight这个属性。

x,y:这组属性只在layout为绝对布局时才有效。

7、每一个flex组件都有对应的mxml接口和as接口。

两者之间是相等的。

8、每个一可视化组件都包含以下三个生命周期事件：preInitialize:组件刚被创建，还没有添加子节点，且不可见。

initialize：把子节点初始化好，并尺寸也设置好，但仍然处于不可见状态。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

FLEX4实践—动态生成DataGrid及应用客户化itemRenderer 收藏
应用场景：
1）从后台取到的数据为数组类型，但数据的列名及列个数均是动态的
2）抽取到的数据中有些是DATE类型的，如果直接显示在DataGrid中默认格式很难让用户接受，希望对特殊类型的数据（如日期）进行格式转换处理
下面的例子将模拟这一场景：
数据准备：gridColumns1搭配gridProvider1，gridColumns2搭配gridProvider2；两组数据的列名及列个数均不同，其中一组数据包括DATE类型数据。

主应用：DynamicGridTest.mxml
1.<?xml version="1.0"encoding="utf-8"?>
2.<s:Application xmlns:fx="/mxml/2009"
3.xmlns:s="library:///flex/spark"
4.xmlns:mx="library:///flex/mx"minWidth="955
"minHeight="600">
5.<fx:Script>
6. 
26.</fx:Script>
27.<fx:Declarations>
28.
29.<fx:Array id="gridColumns1">
30.<fx:Object colCode='Name'colType='VARCHAR2'/>
31.<fx:Object colCode='Price'colType='VARCHAR2'/>
32.<fx:Object colCode='StartDate'colType='DATE'/>
33.</fx:Array>
34.<fx:Array id="gridProvider1">
35.<fx:Object Name="Apple"Price="18"StartDate="{new Date()}
"/>
36.<fx:Object Name="Banana"Price="10"StartDate="{new Date(2
010,1,3)}"/>
37.</fx:Array>
38.
39.<fx:Array id="gridColumns2">
40.<fx:Object colCode='Name'colType='VARCHAR2'/>
41.<fx:Object colCode='Class'colType='VARCHAR2'/>
42.</fx:Array>
43.<fx:Array id="gridProvider2">
44.<fx:Object Name="Apple"Class="1"/>
45.<fx:Object Name="Banana"Class="3"/>
46.</fx:Array>
47.</fx:Declarations>
48.<s:Button x="384"y="155"label="GridWin1"click="showWin1()"/>
49.<s:Button x="532"y="155"label="GridWin2"click="showWin2()"/>
50.
51.</s:Application>
组件DynamicGridWin.mxml
注：DynamicGridWin.mxml中的dateRenderer就是用以处理日期格式数据的格式转换，initGrid()实现动态生成表格并根据'ColType'判断是否需要添加itemRenderer进行类型转换显示。

演示效果：
GridWin1:
GridWin2:。