加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

使用Flex itemEditors – Part 1: Inline itemEditors(翻译)

发布时间:2020-12-15 03:39:58 所属栏目:百科 来源:网络整理
导读:转自:http://zmfkplj.iteye.com/blog/629379 理解 Flex itemEditor-第 1 部分:内联 itemEditor 转载 http://www.adobe.com/cn/devnet/flex/articles/itemeditors_pt1.html ? 我最近完成了一个有关 itemRenderer 的系列-对列表控制的自定义,它们用于控制

转自:http://zmfkplj.iteye.com/blog/629379

理解 Flex itemEditor-第 1 部分:内联 itemEditor

转载 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>

restrictmaxChars 属性确保了 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 是用于检索新值的属性。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读