<!-- [if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:SpaceForUL/> <w:BalanceSingleByteDoubleByteWidth/> <w:DoNotLeaveBackslashAlone/> <w:ULTrailSpace/> <w:DoNotExpandShiftReturn/> <w:AdjustLineHeightInTable/> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!-- [if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--><!-- [if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} </style> <![endif]-->

和 MX 控件一起使用 Spark 项目渲染器

许多 MX 基于 list 的控件例如 DataGrid 、 AdvancedDataGrid 和 Tree 都支持项目渲染器。这三个控件也支持项目编辑器。项目编辑器可以使你建立一个自定义的编辑数据处理的视图。项目编辑器返回新的数据给控件，以便控件可以更新它的数据提供者。

Flash Builder 已经内置了对建立 Spark 项目渲染器的支持。为了支持 Flash Builder 建立项目编辑器和 MX 控件的项目编辑器， Flex 定义了 mx.controls.listClasses.MXItemRenderer 类。这个类是 spark.components.supportClasses.ItemRenderer 的子类。你可以使用 MXItemRenderer 类来建立 MX DataGrid 和 Tree 的项目渲染器和项目编辑器。

注意： 许多 MX 控件例如 MX List 和 MX TileList 支持项目渲染器和编辑器。但是 Flex 提供了 Spark List 和 Spark TileLayout 类类替换 MX List 和 MX TileList 控件。应尽可能的使用 Spark 组件。但是 Spark 还没有同样的泪来替换 MX AdvancedDataGrid 和 MX Tree 控件，因此只能使用哪些支持 MXItemRenderer 类的 MX 控件。

关于 MX 项目渲染器和项目编辑器

MXItemRenderer 类简化了在 Flash Builder 中的项目渲染器和编辑器的开发工作，你的 MX 控件可以利用 MXItemRenderer 类所有的特性，并且包含了 Flash Builder 的支持。

MX 项目渲染器和编辑器的所有特性都被 MXItemRenderer 类支持。所以在你建立基于 MXItemRenderer 类的子类时，必须熟悉 MX 项目渲染器和编辑器的所有特性。

下面这张列表展示了 MX 项目渲染器的一些基本信息：

u About MX item renderers（关于 MX项目渲染器）

u Creating MX item renderers and item editor components（建立 MX项目渲染器和项目编辑器组件）

u About the MX cell editing process（关于 MX cell编辑处理流程）

u Using item renderers with the AdvancedDataGrid control（和 AdvancedDataGrid一起使用项目渲染器）

u Returning data from an MX item editor（从 MX项目编辑器中返回数据）

u Using MX cell editing events（使用 MX cell编辑事件）

u MX item editor examples（ MX项目编辑器示例）

使用 MXItemRenderer 类

你可以基于 MXItemRenderer 类为 MX 控件建立一个 Spark 项目渲染器或项目编辑器。既可以基于 MXItemRenderer 本身，也可以基于下面这些 MXItemRenderer 子类之一：

u MXDataGridItemRenderer  配合 MX DataGrid 控件使用的 Spark 项目渲染器或编辑器。

u MXAdvancedDataGridItemRenderer  配合 MX AdvancedDataGrid 控件使用的 Spark 项目渲染器或编辑器。

u MXTreeItemRenderer  配合 MX Tree 控件使用的 Spark 项目渲染器或编辑器。

给 MX DataGrid 控件建立一个 Spark 项目渲染器

下面的程序展示了 MX DataGrid 控件使用的一个自定义项目渲染器：

<?xml version="1.0"?>

<!-- itemRenderers/sparkmx/SparkMainDGImageRenderer.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

width="650">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var initDG:ArrayCollection = new ArrayCollection([

{Artist:'Pavement', Album:'Slanted and Enchanted',

Price:11.99, Cover: '../assets/slanted.jpg'},

{Artist:'Pavement', Album:'Brighten the Corners',

Price:11.99, Cover: '../assets/brighten.jpg'}

]);

]]>

</fx:Script>

<mx:DataGrid id="myGrid" height="400" width="600"

dataProvider="{initDG}">

<mx:columns>

<mx:DataGridColumn dataField="Artist"/>

<mx:DataGridColumn dataField="Album"/>

<mx:DataGridColumn dataField="Cover"

itemRenderer="myComponents.RendererDGImage"/>

<mx:DataGridColumn dataField="Price"/>

</mx:columns>

</mx:DataGrid>

</s:Application>

在这个示例中你建立了一个自己的项目渲染器用于显示列表中每一张专辑的封面。数据提供者的 Cover 属性提供了封面 JPG 文件的路径。

下面的程序展示了上面自定义项目渲染器的 RendererDGImage.mxml 文件细节：

<?xml version="1.0"?>

<!-- itemRenderers/sparkmx/myComponents/RendererDGImage.mxml -->

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<mx:Image id="albumImage" height="175" source="{data.Cover}"/>

</s:MXDataGridItemRenderer>

注意这个项目渲染器是基于 MXDataGridItemRenderer 类。这个项目渲染器使用了 Image 控件来显示专辑的封面。

下面的程序示例也显示了专辑名称和图像，但是它们在单独一个列中显示两个属性：

<?xml version="1.0"?>

<!-- itemRenderers/sparkm/SparkMainDGTitleRenderer.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

width="650">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var initDG:ArrayCollection = new ArrayCollection([

{Artist:'Pavement', Album:'Slanted and Enchanted',

Price:11.99, Cover: '../../assets/slanted.jpg'},

{Artist:'Pavement', Album:'Brighten the Corners',

Price:11.99, Cover: '../../assets/brighten.jpg'}

]);

]]>

</fx:Script>

<mx:DataGrid id="myGrid" width="600"

dataProvider="{initDG}"

variableRowHeight="true">

<mx:columns>

<mx:DataGridColumn dataField="Artist" />

<mx:DataGridColumn dataField="Album"

itemRenderer="myComponents.RendererDGTitleImage" />

<mx:DataGridColumn dataField="Price" />

</mx:columns>

</mx:DataGrid>

</s:Application>

RendererDGTitleImage.mxml 文件实现了这个渲染器，它使用了 Spark Label 控件和一个 MX Image 控件来显示专辑名称和专辑封面：

<?xml version="1.0"?>

<!-- itemRenderers/sparkmx/myComponents/RendererDGTitleImage.mxml -->

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<s:layout>

<s:HorizontalLayout verticalAlign="middle"

paddingLeft="5" paddingRight="5"/>

</s:layout>

<s:Label id="albumName"

width="100%"

text="{data.Album}"/>

<mx:Image id="albumImage"

source="{data.Cover}"/>

</s:MXDataGridItemRenderer>

给 MX AdvancedDataGrid 控件建立一个 Spark 项目渲染器

下面的程序展示了如何使用 AdvancedDataGrid 控件：

<?xml version="1.0"?>

<!-- itemrenderers/sparkmx/SparkHierarchicalADGSimpleRenderer.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

include "SimpleHierarchicalData.as";

]]>

</fx:Script>

<mx:AdvancedDataGrid width="100%" height="100%">

<mx:dataProvider>

<mx:HierarchicalData source="{dpHierarchy}"/>

</mx:dataProvider>

<mx:columns>

<mx:AdvancedDataGridColumn dataField="Region"/>

<mx:AdvancedDataGridColumn dataField="Territory_Rep"

headerText="Territory Rep"/>

<mx:AdvancedDataGridColumn dataField="Actual"/>

<mx:AdvancedDataGridColumn dataField="Estimate"/>

<mx:AdvancedDataGridColumn id="diffCol"

headerText="Difference"/>

</mx:columns>

<mx:rendererProviders>

<mx:AdvancedDataGridRendererProvider column="{diffCol}"

depth="3" renderer="myComponents.SummaryRenderer"/>

</mx:rendererProviders>

</mx:AdvancedDataGrid>

</s:Application>

这段程序使用了一个自定义的项目渲染器 SummaryRenderer ，用来显示不同列的差值。这个值是 Estimate 和 Actual 列之间的差。

如果地区代表超过了预估销售则出现为绿色，否则为红色。

SummaryRenderer.mxml 文件包含了 CurrencyFormatter 来将值格式化为美元格式。该文件如下所示：

<?xml version="1.0"?>

<!-- itemrenderers/sparkmx/myComponents/SummaryRenderer.mxml -->

<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark"

textAlign="center">

<fx:Script>

<![CDATA[

override public function set data(value:Object):void

{

// Calculate the difference.

var diff:Number =

Number(value["Actual"]) - Number(value["Estimate"]);

if (diff < 0)

{

// If Estimate was greater than Actual,

// display results in red.

setStyle("color", "red");

myLabel.text = "Undersold by " + usdFormatter.format(diff);

}

else

{

// If Estimate was less than Actual,

// display results in green.

setStyle("color", "green");

myLabel.text = "Exceeded estimate by " + usdFormatter.format(diff);

}

}

]]>

</fx:Script>

<fx:Declarations>

<mx:CurrencyFormatter id="usdFormatter" precision="2"

currencySymbol="$" decimalSeparatorFrom="."

decimalSeparatorTo="." useNegativeSign="true"

useThousandsSeparator="true" alignSymbol="left"/>

</fx:Declarations>

<s:Label id="myLabel"/>

</s:MXAdvancedDataGridItemRenderer>

给 MX Tree 控件建立一个建立一个 Spark 项目渲染器

下面程序展示了使用 MX Tree 控件显示 XML 数据：

<?xml version="1.0" encoding="iso-8859-1"?>

<!-- itemRenderers/tree/SparkMainTreeItemRenderer.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

initialize="initCollections();">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Script>

<![CDATA[

import mx.collections.*;

public var xmlBalanced:XMLList =

<>

<node label="Containers">

<node label="DividedBoxClasses">

<node label="BoxDivider" data="BoxDivider.as"/>

</node>

<node label="GridClasses">

<node label="GridRow" data="GridRow.as"/>

<node label="GridItem" data="GridItem.as"/>

<node label="Other File" data="Other.as"/>

</node>

</node>

<node label="Data">

<node label="Messages">

<node label="DataMessage"

data="DataMessage.as"/>

<node label="SequenceMessage"

data="SequenceMessage.as"/>

</node>

<node label="Events">

<node label="ConflictEvents"

data="ConflictEvent.as"/>

<node label="CommitFaultEvent"

data="CommitFaultEvent.as"/>

</node>

</node>

</>;

[Bindable]

public var xlcBalanced:XMLListCollection;

private function initCollections():void {

xlcBalanced = new XMLListCollection(xmlBalanced);

}

]]>

</fx:Script>

<mx:Text width="400"

text="The nodes with children are in bold red text, with the number of children in parenthesis.)"/>

<mx:Tree id="compBalanced"

width="400" height="500"

dataProvider="{xlcBalanced}"

labelField="@label"

itemRenderer="myComponents.MyTreeItemRenderer"/>

</s:Application>

该程序使用的项目渲染器定义在 MyTreeItemRenderer.mxml 文件中，它将父节点显示为红色、粗体。还将每一个父节点加上了编号和括号。程序细节如下所示：

<?xml version="1.0" encoding="utf-8"?>

<!-- itemRenderers/sparkmx/myComponents/MyTreeItemRenderer.mxml -->

<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>

<![CDATA[

import mx.controls.treeClasses.*;

import mx.collections.*;

// Override the set method for the data property

// to set the font color and style of each node.

override public function set data(value:Object):void {

super.data = value;

if(treeListData.hasChildren)

{

setStyle("color", 0xff0000);

setStyle("fontWeight", 'bold');

var tmp:XMLList =

new XMLList(treeListData.item);

var myStr:int = tmp[0].children().length();

labelDisplay.text = treeListData.label +

"(" + myStr + ")";

}

else

{

setStyle("color", 0x000000);

setStyle("fontWeight", 'normal');

labelDisplay.text = treeListData.label;

}

}

]]>

</fx:Script>

<s:HGroup left="0" right="0" verticalCenter="0">

<s:Rect id="indentationSpacer"

width="{treeListData.indent}" height="22"

alpha="0">

<s:fill>

<s:SolidColor color="0xFFFFFF" />

</s:fill>

</s:Rect>

<s:Group id="disclosureGroup">

<s:BitmapImage source="{treeListData.disclosureIcon}"

width="16" height="16"

visible="{treeListData.hasChildren}" />

</s:Group>

<s:BitmapImage source="{treeListData.icon}"

width="16" height="16"/>

<s:Label id="labelDisplay" />

</s:HGroup>

</s:MXTreeItemRenderer>

项目渲染器使用了 MXTreeItemRenderer 类的 treeListData 属性来决定树节点中的信息。 treeListData 变量的类型为 TreeListData 。 TreeListData 定义了一些信息例如：节点的深度、节点相关的图标和来自于数据提供者的数据对象。

项目渲染器覆盖了 ItemRenderer.data 变量用于控制树节点的显示。它增加了显示节点的子节点数。

项目渲染器的第二部分定义了树形控件的显示外观。在本示例中，使用了 Rect 控件来控制节点的背景。项目渲染器使用了两个位图控件作为它们的图标。 Label 控件定义了显示节点的文本。

给 MX DataGrid 控件建立一个 Spark 项目编辑器

如果控件的 editable 属性设置为 true 则 MX 的 DataGrid 、 AdvancedDataGrid 和 Tree 控件会显示一个项目编辑器。当用户在该单元格点击鼠标、或使用 Tab 键、或使用其他方式，项目编辑器显示为编辑状态。缺省状况下， editable 属性为 false 。

当使用了项目编辑器，则该编辑器会返回一个值，并更改数据提供者中相应的项目。例如：下面的项目渲染器返回一个新值给 MyRetValue ：

<?xml version="1.0"?>

<!-- itemRenderers/sparkmx/myComponents/NSEditor.mxml -->

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>

<![CDATA[

public var myRetVal:int = 0;

]]>

</fx:Script>

<s:NumericStepper id="myNS"

value="{data.quant}"

stepSize="1"

maximum="50"

change="myRetVal=myNS.value;"/>

</s:MXDataGridItemRenderer>

项目编辑器包含了一个 NumericStepper 控件。当该项目编辑器打开，则 NumericStepper 出现在 DataGrid 控件。用户能够使用 NumericStepper 来编辑单元格的值。

用具结束编辑后，该单元格失去聚集状态。 Flex 会提交该值。下面的程序展示了如何使用这个项目编辑器：

<?xml version="1.0"?>

<!-- itemRenderers/sparkmx/SparkMainNSEditor.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var myDP:ArrayCollection = new ArrayCollection([

{label1:"Order #2314", quant:3, Sent:true},

{label1:"Order #2315", quant:3, Sent:false}

]);

]]>

</fx:Script>

<mx:DataGrid id="myDG" dataProvider="{myDP}"

variableRowHeight="true"

editable="true" >

<mx:columns>

<mx:DataGridColumn dataField="label1"

headerText="Order #"/>

<mx:DataGridColumn dataField="quant"

itemEditor="myComponents.NSEditor"

editorDataField="myRetVal"/>

</mx:columns >

</mx:DataGrid>

</s:Application>

注意在主程序中 DataGridColumn 使用了 ItemEditor 属性来制定项目编辑器的名字。它使用了 editorDataField 属性来制定项目编辑器返回值变量的名字。

给 MX DataGrid 控件建立一个内置的 Spark 项目编辑器

MX DataGrid 、 AdvancedDataGrid 和 Tree 控件可以使用内置项目渲染器或编辑器。下面程序使用了 Spark DropDownList 控件在作为 MX DataGrid 控件的项目渲染器。

<?xml version="1.0"?>

<!-- itemRenderers/sparkmx/SparkDGInlineRenderer.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

width="650">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var initDG:ArrayCollection = new ArrayCollection([

{Artist:'Pavement', Album:'Slanted and Enchanted',

Price:11.99, Cover: '../assets/slanted.jpg', Rating:'none'},

{Artist:'Pavement', Album:'Brighten the Corners',

Price:11.99, Cover: '../assets/brighten.jpg', Rating:'none'}

]);

]]>

</fx:Script>

<mx:DataGrid id="myGrid" height="400" width="600"

dataProvider="{initDG}" editable="true">

<mx:columns>

<mx:DataGridColumn dataField="Artist"/>

<mx:DataGridColumn dataField="Album"/>

<mx:DataGridColumn dataField="Rating" editorDataField="rating">

<mx:itemEditor>

<fx:Component>

<s:MXDataGridItemRenderer focusEnabled="true" height="22" >

<fx:Script>

<![CDATA[

import mx.collections.ArrayList;

public function get rating():String {

return dd.selectedItem;

}

]]>

</fx:Script>

<s:DropDownList id="dd" top="5" left="5"

prompt="{data.Rating}"

initialize="dd.dataProvider =

new ArrayList(['none', 'no good', 'good', 'great'])"/>

</s:MXDataGridItemRenderer>

</fx:Component>

</mx:itemEditor>

</mx:DataGridColumn>

<mx:DataGridColumn dataField="Cover"

itemRenderer="myComponents.RendererDGImage"/>

<mx:DataGridColumn dataField="Price"/>

</mx:columns>

</mx:DataGrid>

</s:Application>

这个事例在 DataGrid 控件中增加了 Rating 列。用户点击 Rating 列中的单元格来打开项目编辑器。当用户离开该单元格时， DropDownList 返回的值被拷贝到 DataGrid 中的数据提供者。