`

理解 Flex itemEditor-第 2 部分:编辑事件和复杂编辑器

    博客分类:
  • Flex
阅读更多

理解 Flex itemEditor-第 2 部分:编辑事件和复杂编辑器

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

 

在本系列的第 1 部分中,您已经看到如何创建一些简单的内联 itemEditor。如果您阅读过 itemRenderer 系列,您可能会发现两者十分相似。

使 itemEditor 能正常运行有两个要点。首先,使用 itemEditor 属性命名类。其次,使用 editorDataField 属性命名 itemEditor 的 value 属性。

在本文中,我将说明如何使用事件创建更复杂的 itemEditor,它们可以执行一些简单的数据验证操作并且可以防止他人编辑某些单元格。

这里请注意一点:这里的“复杂”并不不是指包含许多控制和布局的编辑器。我指的是比内联 itemEditor 复杂一些。我认为要求用户在 DataGrid 的列表或单元格中进行复杂编辑时不公平的。编辑器应当只关注一件事:单元格的内容。例如,如果您使用列表控制并展示一个购物车,那么允许用户直接编辑单元格中的值来更改购物车中的商品数量无可厚非。但允许他们更改商品本身、颜色、特殊说明等内容是不合理的。换言之,允许他们直接从购物车购买商品并不合理,因为整个站点都可以购买商品。购物车只是方便他们结帐而已。当然,他们应该可以再加一罐冰激凌或拿掉一包薯片,但不可以把薯片换成两盒全麦意大利面。

 

itemEditEnd 事件

假设您的应用程序有一个 DataGrid 用于协助管理库存。用户可以使用它更改部件号,但您不希望允许他们将部件号留空。如果使用默认 itemEditor,即 TextInput 控制,用户可以单击“Part #”列中的单元格,按 delete 键并擦除部件号。以下代码通过实施一种技术来防止这种情况。

         <mx:DataGrid x="10" y="64" editable="true" dataProvider="{inventoryDB}" 
                 itemEditEnd="verifyInput(event)">
                 <mx:columns>
                          <mx:DataGridColumn headerText="Product" dataField="product"/>
                          <mx:DataGridColumn headerText="Part #" dataField="part"/>
                          <mx:DataGridColumn headerText="Type" dataField="type"
                                   itemEditor="editors.ProductTypeEditor" editorDataField="type"/>
                          <mx:DataGridColumn headerText="Quantity" dataField="quantity"/>
                 </mx:columns>
         </mx:DataGrid>

每当编辑即将完成时,列表控制调度一个 itemEditEnd 事件。在数据提交回 dataProvider 之前,事件发生。通过处理该事件,您可以更改数据,或验证数据并根据情况停止提交。在此例中,verifyInput() 函数确保产品部件号不空。

                 private function verifyInput( event:DataGridEvent ) : void
                 {
                          // it is OK if the user cancels the edit
                          if( event.reason == DataGridEventReason.CANCELLED ) return;
                          
                          // grab the instance of the itemEditor. For this DataGrid, only the
                          // TextInput control is used as the editor, so it is safe to get the
                          // editor no matter what column has been edited.
                          var editor:TextInput = (event.currentTarget as DataGrid).itemEditorInstance as TextInput;
                          
                          // if  the edit is on the part number column, make sure it is not blank
                          if( event.dataField == "part" )
                          {
                                   if( editor.text.length == 0 ) {
                                            // call event.preventDefault() so the edit will not continue and store the
                                            // blank value
                                            event.preventDefault();
                                            // give the editor an error to display to the user
                                            editor.errorString = "You must enter a part number";
                                            return;
                                   }
                          }
                          
                          // handle other columns here
                 }

该事件是 DataGridEvent 类的一个实例,它包含一些很实用的属性。reason 属性说明调度该事件的原因。如果用户按下 ESCAPE 键或单击 DataGrid 以外区域,原因是 DataGridEventReason.CANCELLED。您可能希望像我那样忽略该事件,告诉 DataGrid 只需执行默认操作,即取消编辑并恢复先前值。

如果决定处理该事件,您需要 itemEditor 才能访问其属性。事件的 currentTarget 属性包含控制,我已经将它转换为 DataGrid。DataGrid 包含一个 itemEditorInstance 属性,我将它转换为 TextInput,对于本例,它属性 itemEditor 类型。

因为将为任何单元格调用该事件处理程序,所以您必须决定您是否想验证编辑。我检查事件的 dataField 属性,确保单元格在“part”列中。如果是,我测试编辑器的 text 属性,查看它是否包含任何字符。如果没有字符,会发生两件事。

首先,会调用 event.preventDefault()。我通过这种方式防止编辑操作,并防止 DataGrid 将新值恢复回 dataProvider 中。对于用户而言,他们在按下 TAB 或 ENTER 键后,似乎未发生任何事。preventDefault() 函数将 itemEditor 保留在原位。

其次,我将一个 errorString 放到 TextInput 控制上。这是可选的,但它却是会告诉用户出错了。毕竟,当他们按下 TAB 或 ENTER 键时,未发生任何事,此时应当提供一个理由。

itemEditBeginning 事件

有时您可能希望防止单元格被编辑。您可以将 DataGridColumn 的可编辑属性设置为 false,但这会防止每个单元格被编辑。假设您只希望将列中的某些单元格变为无法编辑?您可以使用 itemEditBeginning 事件指定某个单元格是否可编辑。

    <mx:DataGrid x="10" y="64" editable="true" dataProvider="{inventoryDB}" 
        itemEditEnd="verifyInput(event)" 
        itemEditBeginning="allowForEdit(event)">
        <mx:columns>
            <mx:DataGridColumn headerText="Product" dataField="product"/>
            <mx:DataGridColumn headerText="Part #" dataField="part"/>
            <mx:DataGridColumn headerText="Type" dataField="type"
                itemEditor="editors.ProductTypeEditor" editorDataField="type"/>
            <mx:DataGridColumn headerText="Quantity" dataField="quantity"/>
        </mx:columns>
    </mx:DataGrid>

通过处理 itemEditBeginning 事件,您可以动态决定单元格的可编辑性。在本例中,数据的每个记录中包含一个名为 permanent 的字段。我们的想法是 permanent=true 表示产品名是一个无法更改的值,因而无法编辑该行的产品单元格。它由 allowForEdit() 函数处理:

        private function allowForEdit(event:DataGridEvent) : void
        {
            // if the field to be edited is a product, prevent the user from making
            // changes if the permanent flag is true<. You can use more complex logic, 
            // of course.
            if( event.dataField == "product" ) {
                
                var item:Object = ((event.currentTarget as DataGrid).dataProvider as ArrayCollection)[event.rowIndex];
                if( item.permanent ) {
                    event.preventDefault();
                }
            }
            
            // handle other columns here
        }

再次说明,该事件是 DataGridEvent 类的一个实例,我在此处已检查事件的 dataField 属性,确保它是我正在处理的“product”字段。随后,我可以使用事件的 currentTarget 属性从 DataGrid 的 dataProvider 获得记录,并将它转换为 DataGrid。随后,我将 DataGrid 的 dataProvider 转换为 ArrayCollection 并获得 event.rowIndex 值。我也可以在这个函数中直接访问 inventoryDB ArrayCollection,因为它们在同一文件中,但这个方法更普通。

获得记录后,我就可以查询其参数属性以及它是否为 true,调用 event.preventDefault() 函数来禁用该单元格的编辑操作。在此例中,itemEditBeginning 的默认行为是显示 itemEditor;阻止默认行为将使该单元格无法编辑。

编辑限制

必须注意,处理编辑事件时要考虑到一些限制。当您使用编辑事件决定是否应继续事件时,您可能希望调用后端或服务器进程。例如,您可能有一个可验证部件号的 Web 服务。此时,您可以在 itemEditEnd 事件中尝试执行 Web 服务调用并验证用户刚才输入的内容。看上去符合逻辑,对吗?

似乎符合逻辑,但实际不可行,因为服务调用是异步的。您当然可以执行调用,但稍后才能返回结果-这要等到事件处理程序退出之后了。事实上,在您的函数退出之前不会执行调用。您的调用将排队,并在 Flex 框架退出函数时执行请求,随后由 Web 服务的结果处理程序返回结果。

所以在编辑单元格时,无法执行这类服务器端验证。如果要执行这类验证,那么当您的应用程序启动时,您应当向服务器查询要验证的数据,并在编辑单元格时使用它。

后续工作

动态允许编辑和验证更改的能力可以大幅改善应用程序的用户体验。您可以帮助用户减少错误并在编辑过程中提出反馈。您可以防止他们编辑特定数据并简化应用程序开发,因为您不必验证用户无法更改的内容。

 

分享到:
评论

相关推荐

    Flex itemEditor详解

    Flex中支持在展示容器中编辑数据,并且可以为数据指定编辑器,本文将对编辑器做详细说明

    flex3的cookbook书籍完整版dpf(包含目录)

    创建Cairngorm视图、事件和模型 21.6节.创建Cairngorm命令和事务代理类 21.7节.创建CairngormFrontController和ServiceLocator 21.8节.使用Cairngorm框架生成器生成应用程序骨架 21.9节.学习常用的提高性能的技巧 ...

    item-editor:用于编辑OTB项目文件的编辑器

    OTItemEditor 是一个用于编辑 OpenTibia 服务器和工具使用的 OTB 数据文件的程序,用于将客户端使用的项目 ID 映射到服务器和工具使用的一组一致的 ID。 这是必要的,因为 CIPSoft 会在每个主要版本发布时更改...

    D2 1.10物品修改器.rar

    D2 1.10物品修改器.rar

    【车牌识别】 GUI BP神经网络车牌识别(带语音播报)【含Matlab源码 668期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    【作业视频】六年级第1讲--计算专项训练(2022-10-28 22-51-53).mp4

    【作业视频】六年级第1讲--计算专项训练(2022-10-28 22-51-53).mp4

    3文件需求申请单.xls

    3文件需求申请单.xls

    【脑肿瘤检测】 GUI SOM脑肿瘤检测【含Matlab源码 2322期】.zip

    【脑肿瘤检测】 GUI SOM脑肿瘤检测【含Matlab源码 2322期】

    GOGO语言基础教程、实战案例和实战项目讲解

    GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解GO语言基础教程、实战案例和实战项目讲解

    全国计算机等级考试二级笔试样卷C语言程序设计

    全国计算机等级考试二级笔试样卷C语言程序设计主要考察考生对C语言编程的基础知识、语法和编程能力的掌握程度。考试内容主要包括C语言程序的结构、数据类型及其运算等基础知识,以及循环、条件语句、函数等编程能力。

    Excel模板个人简历文艺清新单页01.docx

    Excel模板个人简历文艺清新单页01.docx

    【图像边缘检测】自适应阈值的八方向和四方向sobel图像边缘检测【含Matlab源码 2058期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    HC070-3.5标定版描述文件及标定版ps文件

    HC070-3.5标定版描述文件及标定版ps文件

    【目标跟踪】 GUI帧差法结合卡尔曼滤波行人姿态识别【含Matlab源码 1127期】.zip

    【目标跟踪】 GUI帧差法结合卡尔曼滤波行人姿态识别【含Matlab源码 1127期】

    ISO文件电子文档发文删文记录表.xls

    ISO文件电子文档发文删文记录表.xls

    【红绿灯识别】机器视觉红绿灯识别【含Matlab源码 4044期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    【图像去噪】稀疏表示KSVD彩色图像去噪(含PSNR)【含Matlab源码 4261期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    node-v0.10.48-sunos-x86.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v0.10.48-linux-x64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    PREEvision关于ECU软件与诊断设计的一致性功能

    PREEvision关于ECU软件与诊断设计的一致性功能

Global site tag (gtag.js) - Google Analytics