理解项目编辑器---part1:使用

转载 http://www.adobe.com/cn/devnet/flex/articles/itemeditors_pt1.html

 

我最近完成了一个有关 itemRenderer 的系列－对列表控制的自定义，它们用于控制列表内容的显示格式。显示和渲染内容是一种十分有效的 UI 技术，而使用 Flex 您几乎可以完成想象得到的任何事。

这是有关 itemEditor 的新系列的第 1 部分，允许在列表控制中直接更改数据。第一篇文章讨论内联 itemEditor，可以在 MXML 文件中直接编写这些简单却十分有用的组件。该系列的后续文章将讨论更复杂的编辑、验证、事件以及将 itemRenderer 用作 itemEditor。

 

TextInput 编辑器

在列表控制中直接编辑十分便捷。想象一个仓库库存的 DataGrid，您可以在网格中直接调整内容而无需特殊弹出（请参阅图 1）。列表控制有一个内建编辑器 TextInput 控制，每当用户单击可编辑区域时会显示它，该区域包括行（对于列表）、分支（对于树）或单元格（对于 DataGrid）。您只需将列表控制的 editable 属性设置为 true。对于 DataGrid，将 DataGridColumn 的 editable 属性设置为 false 即可将某个列排除在可编辑范围以外。

图 1.itemEditor 允许在 DataGrid 中直接编辑

itemEditor 与 itemRenderer 的不同之处在于只能看到 itemEditor 的一个实例，它在编辑的单元格上。仅当要编辑的单元格收到输入焦点后，才能看到 itemEditor。随后将隐藏 itemRenderer 并将 itemEditor 移到该位置、根据该区域大小做出调整并为它提供记录的数据。完成编辑（通过将焦点移到另一个位置）时，列表控制将新值从编辑器复制到 dataProvider 记录。

在图 1 显示的应用程序中，当用户单击“Part #”列的某个单元格时，dataProvider[row][dataField] 值将赋予 itemEditor (TextInput) 控制的 text 属性。完成编辑时，itemEditor (TextInput) 控制的 text 属性值将复制到dataProvider[row][dataField]。作为一个集合，dataProvider 根据更新调度事件。

虽然默认 TextInput 控制是个不错的编辑器，它实际上只适用于最简单的情况。例如，它适用于书名、作者姓名或产品编号等字符串值。如果需要更多控制或要验证用户输入，您就需要亲自动手。

Flex 控制用作 itemEditor

以下说明了如何创建一个只接受数值的 itemEditor：

<mx:DataGrid x="46" y="270" editable="true" dataProvider="{employeeDB}">     <mx:columns>          <mx:DataGridColumn headerText="Name" dataField="name"/>          <mx:DataGridColumn headerText="Position" dataField="position"/>          <mx:DataGridColumn headerText="Age" dataField="age">               <mx:itemEditor>                    <mx:Component>                         <mx:TextInput restrict="0-9" maxChars="3" />                    </mx:Component>               </mx:itemEditor>           </mx:DataGridColumn>     </mx:columns></mx:DataGrid>

restrict 和 maxChars 属性确保了 age 值限制为三位数的数值。

CheckBox 是用于 itemEditor 的另一个常见控制，因为它在编辑布尔值时很实用。图 2 显示了一个示例，它使用 CheckBox 编辑某个库存程序的“In Stock”列的值。

图 2.将 CheckBox 用作布尔值的 itemEditor

以下是它需要的代码：

<mx:DataGrid x="531" y="273" editable="true" dataProvider="{inventoryDB}">     <mx:columns>          <mx:DataGridColumn headerText="Product" dataField="product"/>          <mx:DataGridColumn headerText="Part #" dataField="part"/>          <mx:DataGridColumn headerText="In Stock?" dataField="inStock"               labelFunction="inStockLabeler"               itemEditor="mx.controls.CheckBox" editorDataField="selected" />            <mx:DataGridColumn headerText="Quantity" dataField="quantity"/>     </mx:columns></mx:DataGrid>

在此例中，使用 labelFunction (inStockLabeler) 渲染该列中单元格的内容，它可以显示“Yes”、“No”、“In Stock”或“Out of Stock”等描述性字符串。itemEditor 属性设置为 mx.controls.CheckBox 类。DataGridColumn 还设有一个同样重要的属性：editorDataField。该字段表明完成编辑时用于取走值的 itemEditor 类的属性。此例中，它是 CheckBox 的 selected 属性。完成编辑时，DataGrid 将使用 CheckBox 的 selected 属性替换数据记录中的 inStock 属性。

此时，您可能会疑惑为什么 TextInput 的示例没有提供 editorDataField 属性。这是因为 editorDataField 的默认值是“text”，它恰巧是 TextInput 控制中保留该值的属性的名称。

可以将这种技术用于许多 Flex 控制。以下是用于使用 NumericStepper 的订单数量列的一个示例，如图 3 所示：

<mx:DataGrid x="531" y="82" editable="true" dataProvider="{inventoryDB}">     <mx:columns>          <mx:DataGridColumn headerText="Product" dataField="product"/>          <mx:DataGridColumn headerText="Part #" dataField="part"/>          <mx:DataGridColumn headerText="In Stock?" dataField="inStock"/>          <mx:DataGridColumn headerText="Quantity" dataField="quantity"               itemEditor="mx.controls.NumericStepper" editorDataField="value"/>     </mx:columns></mx:DataGrid>

图 3.使用 NumericStepper 编辑数量

注意，editorDataField 是“value”－NumericStepper 保留控制当前值的属性。确保为 itemEditor 属性使用标准类名，否则编译器将找不到该类并将该行标为出错。

更复杂的编辑器

现在，您可能希望更进一步，这次没有现成的 Flex 控制。以下示例允许用户使用四个单独的四位数字段输入信用卡号（请参阅图 4）：

图 4.通过四个单独字段编辑信用卡号

以下是它需要的代码：

<mx:DataGrid x="46" y="463" editable="true" dataProvider="{accountDB}" width="302">     <mx:columns>          <mx:DataGridColumn headerText="Account" dataField="account" width="100"/>          <mx:DataGridColumn headerText="Credit Card" dataField="ccard" editorDataField="value">               <mx:itemEditor>                    <mx:Component>                         <mx:HBox>                              <mx:Script>                                   <![CDATA[                                        public function get value() : String                                        {                                             return part1.text+part2.text+part3.text+part4.text;                                        }                                        override public function set data(value:Object):void                                        {                                             super.data = value;                                             part1.text = value.ccard.substr(0,4);                                             part2.text = value.ccard.substr(4,4);                                             part3.text = value.ccard.substr(8,4);                                             part4.text = value.ccard.substr(12,4);                                        }                                   ]]>                              </mx:Script>                              <mx:TextInput id="part1" maxChars="4" restrict="0-9" width="40" />                              <mx:TextInput id="part2" maxChars="4" restrict="0-9" width="40" />                              <mx:TextInput id="part3" maxChars="4" restrict="0-9" width="40" />                              <mx:TextInput id="part4" maxChars="4" restrict="0-9" width="40" />                         </mx:HBox>                    </mx:Component>               </mx:itemEditor>          </mx:DataGridColumn>     </mx:columns></mx:DataGrid>

这个内联 itemEditor 遵循与其他 itemEditor 相同的规则，将 editorDataField 命名为“value”。我们为这个 itemEditor 选择的组件是 HBox，它没有“value”属性。为了使这个 itemEditor 能正常运行，我们创建一个名为value 的 getter 函数，用于返回四个连接在一起的输入字段。当用户完成单元格编辑时，DataGrid 可以调用 itemEditor 的 value 属性，它将收到合并在一起的字段。

注意 data setter 函数中的 super.data = value。data 属性－实际上是 data getter 函数－广泛用于列表控制幕后以及框架的其他位置（更不用说您自己的代码）。如果不使用 super.data 设置数据的内部值，data getter 函数将返回一个空值，并且很可能导致应用程序崩溃。

您还会发现我覆盖了 data setter 函数。在这个函数中，我将信用卡号分到四个 TextInput 字段。这种技术用于显示待编辑数据。editorDataField 是用于检索新值的属性。