Flex 3快速入门: 构建高级用户界面 创建项目编辑器4

 在应用程序中，可以定义可重用的条目编辑器在多处使用。使用设置了id属性的<mx:Component>标记，可以创建可重用的内联条目编辑器，绑定组件的itemEditor属性到id属性就可以使用了。

通过把可重用的内联条目编辑器统一放到程序中的一个位置，可以提交程序的可维护性。即使你没有多次使用条目编辑器。

此例中，使用NumericStepper控件创建了一个可重用的内联条目编辑器。

例子

Data model (artwork.xml)

<artwork> <piece> <name>The Wall</name> <image>artwork1.jpg</image> <price>250</price> <quantity>5</quantity> </piece> <piece> <name>Blue Flake</name> <image>artwork5.jpg</image> <price>400</price> <quantity>2</quantity> </piece> <piece> <name>Butterfly</name> <image>artwork6.jpg</image> <price>375</price> <quantity>17</quantity> </piece></artwork>

MXML file

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

<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml"

viewSourceURL="src/ItemEditorReusable/index.html"

width="525" height="525"

>

<mx:Model id="artwork" source="model/artwork.xml"/>

<!-- Reusable inline item editor -->

<mx:Component id="NumericStepEditor">

<mx:NumericStepper

maximum="100" stepSize="10"

/>

</mx:Component>

<!-- Reusable inline item renderer -->

<mx:Component id="ImageRenderer">

<mx:VBox

width="100%" height="140"

horizontalAlign="center" verticalAlign="middle"

>

<mx:Image source="{'assets/'+data.image}"/>

<mx:Label text="{data.image}"/>

</mx:VBox>

</mx:Component>

<mx:DataGrid

rowCount="3" variableRowHeight="true"

dataProvider="{artwork.piece}"

editable="true"

>

<mx:columns>

<mx:DataGridColumn

dataField="image" headerText="Image" width="150"

itemRenderer="{ImageRenderer}"

/>

<mx:DataGridColumn headerText="Name" dataField="name"/>

<mx:DataGridColumn headerText="Price" dataField="price"/>

<mx:DataGridColumn

headerText="Quantity"

dataField="quantity"

itemEditor="{NumericStepEditor}"

editorDataField="value"

>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>

<mx:LinkButton

textAlign="center"

label="Photos (c) 2006 geishaboy500 (CC Attribution License)"

click="{navigateToURL(new URLRequest('http://www.flickr.com/photos/geishaboy500/'));}"

/>

<mx:Script>

<!--[CDATA[

import flash.net.navigateToURL;

]]-->

</mx:Script>

</mx:Application>