使用列表和表格.ppt

第10章使用列表和表格 用户界面中 常利用表格和列表显示数据的条目和详细信息 Flex设计了不同的控件来实现列表和表格 不仅能够将数据显示在表格和列表中 还可以实现对数据进行操纵 修改等更为强大的功能 由于这些控件的数据格式都需是格式化的数据 数据提供器读取结构化的数据 这些控件也称之为数据驱动控件 Data drivenControls 与列表和表格相关的控件如下所示 列表控件 ListControl 将数据显示在垂直的列表中 水平列表控件 HorizontalListControl 与列表控件相似 水平列表控件则是以水平的方式横向浏览数据 片式列表控件 TileListControl 与上述2种列表控件类似 片式列表中不仅可以显示文字 数据 还可以显示该数据相关的图片 组合框控件 ComboBoxControl 与其他列表式控件不同 组合框控件只需占用很少的界面控件 单击控件中的下拉箭头 可动态弹出列表栏选择需要的数据选项 数据表格控件 DataGridControl 对于某一类数据 往往包括很多数据项 比如一个学生的数据包括 年龄 性别 出生年月等 利用数据表格控件 可以以行和列的方式表达多个学生的详细信息 树形控件 TreeControl 将结构化的数据显示到树形的结构中 在树形控件中的 利用树形的叶子节点以及叶子节点的双亲节点表示数据之间的关联 10 1列表和表格控件接口类 上述几种控件在Flex中 都同样直接或间接地继承mx controls listClasses ListBase类 所以在这些控件中均继承该类的属性和事件 本节简要介绍ListBase类属性和方法 10 1 1ListBase类属性 ListBase类的属性主要围绕控件的行 列 数据和控件其他功能 由于属性较多 这里只选择常用的进行讲述 ListBase类常用属性如表所示 10 1 2ListBase类事件 ListBase类事件是使用列表和表格控件时涉及的相关事件 具体有如下几种 change 当控件的selectedIndex和selectedItem属性值发生改变时 触发该事件 dataChange 在使用其他组件作为控件的条目渲染器时 利用data属性指定在控件中显示的内容 当该内容改变时触发该事件 itemClick 当用户单击条目时 触发该事件 itemDoubleClick 当用户双击条目时 触发该事件 itemRollOut 当鼠标在条目上滚动时 触发该事件 itemRollOver 当鼠标停留在某个条目上 触发该事件 每次鼠标停留在条目上时 控件高亮显示该条目 10 2列表 列表控件 ListControl 将数据显示在垂直的列表中 用户在显示的数据条目中选择自己需要列项 如果列表数据的尺寸超出控件的尺寸时 可以拖动控件中的水平或者垂直的滚动条显示 列表控件如图所示 10 2 1列表控件标签 在Flex中使用标签创建列表控件 同时列表控件的外观及事件都是由控件的属性定义 列表控件的属性除集成ListBase类的属性外 还包括如表所示的常用属性 10 2 2列表控件事件 列表控件的事件除继承ListBase类的事件外还包括条目编辑时的事件 条目编辑事件如下所示 itemEditBegin 当对条目进行编辑 即editedItemPosition属性被赋值时 触发该事件 该事件表明条目处于准备被编辑的状态 itemEditBeginning 用户单击条目时进入itemEditBegin状态 在用户释放鼠标时 触发该事件 进入条目编辑状态 itemEditEnd 完成条目编辑 当编辑后的数据从条目编辑器中保存到数据提供器中时 触发该事件 itemFocusIn 当鼠标焦点停留在条目渲染器时 触发该事件 itemFocusOut 当条目渲染器失去鼠标焦点时 触发该事件 scroll 如果控件中出现滚动条 则拖动滚动条时触发该事件 上述几个事件的事件对象类型均为mx events ListEvent 10 2 3创建列表控件 创建列表控件使用的是标签 通过为列表控件设置不同的属性和事件满足不同的需求 为了更清楚的讲述如何创建控件 如何使用控件的事件和更复杂的属性 这里采用由浅至深的顺序 首先从最简单的例子讲述 10 2 4列表控件事件 定义列表控件事件是为与列表控件相关的事件创建事件处理函数 上面的两个例子为简单的列表控件例子 只显示需要的数据标签 而无其他功能 但是在实际需求中 在用单击相应条目时 或者当鼠标在各条目上滚动时 都需要与用户进行交互 下面的这个例子显示了 当鼠标在列表条目上滚动时显示条目的data值 在单击条目时 弹出对话框显示用户选中条目内容 图为鼠标在条目上滚动的效果 图为单击相应数据条目时 显示弹出对话框 10 3列表控件中操作 在使用列表控件的过程还可以对列表控件相应的操作 主要包括显式提示 使用图标 编辑列表条目中数据 下面逐一介绍这些操作 10 3 1使用数据提示 在使用列表过程中 当鼠标停留在条目上时 可以显示该条目的相关数据提示 当利用滚动条时 可以显示滚动条的相关提示 在列表控件中使用showDataTips和showScrollTips属性指明是否显示条目提示和滚动条提示 当showDataTips为true时 鼠标在每行的条目上停留时 都会显示该条目的提示 默认情况下显示的是数据label属性中的内容 如果需要读取数据中其他属性的内容 可以使用dataTipField属性指定显示的内容 如果上述2种仍然不能满足要求 可以使用dataTipFunction属性指明定义显示内容的方法 dataTipFunction属性方法的格式如下所示 myDataTipFunction item Object String 定义方法的内容Return显示的内容 10 3 2在列表控件中使用图标 上面的例子都是在列表的条目中显示单一的文字 如果能为数据配上图标 那么就可以更形象表达数据 而列表控件提供了为数据项显式图标的功能 在列表控件中 可以使用iconField和iconFunction属性定义图标相关的属性以及方法 iconField属性指明在数据中图标文件的地址是由哪项数据提供的 图为一个在列表控件中显示数据项图标的例子 10 3 3编辑列表条目中数据 编辑列表中的数据时 需要将editable属性设为true 在编辑数据的时候也触发相应的事件 图是一个编辑数据的例子 当鼠标单击条目时 触发itemEditBeginning事件条目显示为一个文本输入控件 在控件中可以修改文字 当修改完毕后 鼠标单击条目之外的区域时触发itemEditEnd事件 条目显示为编辑后的文字 单击该条目 在控件下方的文本区域显示当前条目的标签 如图所示 10 4水平列表 水平列表控件 HorizontalListControl 与列表控件的不同点在于 列表控件以垂直的方式显示数据条目 水平列表控件使用水平方向显示数据条目 如果只在列表中使用文字 则水平列表与列表控件的创建方式一样的 但在实际的应用中 水平列表控件较常用来表示图片 例如相册中图片的显示 产品图片的展示等 在水平斜砜丶 校 苁谴幼蟮接蚁允咎跄康摹如果列表项超出控件的范围 可以利用滚动条查看剩余的条目 图是一个展示手机图片的水平列表控件 10 4 1水平列表控件标签 水平列表控件对应的MXML标签为 该控件的属性继承ListBase类的属性 属性和事件都可以参照列表控件的属性 10 4 2创建水平列表控件 在创建水平列表控件时 只需插入控件的标签 定义相应的属性和事件即可 下面以图为例介绍简单的水平列表创建 图片的显示是借助图片控件 ImageControl 实现的 水平列表控件利用条目渲染器将图片控件嵌入其中 图的代码如下所示 10 4 3使用条目渲染器 上面的例子采用在条目中完全显示图片的方式 有时 也需要为图片配上说明文字 若要实现图片和文字同时显示 也需要使用条目渲染器 由于需要将文字和图片显示在同一区域内 只能自己定制组件 再将组件嵌入到控件中 效果如图所示 10 5瓦片式列表 瓦片式列表控件 TileListControl 的外观与水平列表控件的外观相似 水平列表控件常用于在条目中同时显示图片和文字 而瓦片式列表控件中每个条目像瓦片一样陈列中控件区域中 瓦片式控件的可以多行显示 而与水平列表控件只能单行显示 图为瓦片式列表控件的一个例子 10 5 1瓦片列表控件标签 瓦片列表控件对应的标签为 控件的属性和事件可以使用列表控件的属性和事件设定 该控件默认的条目渲染器为TileListItemRenderer 10 5 2创建瓦片列表控件 创建该控件时 方法与创建水平列表控件类似 在使用图形和文字时可以使用默认的条目渲染器 也可以根据需要自己定义条目渲染器 首先介绍默认的条目渲染器TileListItemRenderer 它包括两个属性 icon和text icon属性定义条目渲染器中的图标 text属性定义了条目渲染器中的文字 在图中使用了默认的条目渲染器时图标在上 文字在图标下方 在使用默认条目渲染器时 TileListItemRenderer自动读取数据中text和icon属性值 10 6数据表格 利用表格中行和列表示数据也是用户常用的界面元素 在Flex中 使用数据表格控件 DataGridControl 可以实现在表格中显式数据的功能 数据表格控件可以看做使用多列条目的列表来表示数据 实际上 在表格控件中是利用行和列来确定数据中的元素 数据表格控件也是建立在列表控件基础上 所以列表控件中的许多特性可在数据表格控件上体现 除此之外 数据表格控件还具有其他功能 如下所示 编辑表格中的数据元素 在运行时对表格中的数据进行排序 单击表头改变数据的排列顺序 支持自定义的表格列表 10 6 1数据表格控件标签 数据表格控件对应的MXML标签为 该控件的属性除继承ListBase类的属性外 还包括一些常用属性 如表所示 10 6 2数据表格列项 由于在数据表格中增加了列项 Columns 来表达数据 所以控件需增加相应的属性来描述列以及列数据上发生的事件 在Flex中 数据表格列项也是作为一种控件出现的 它对应的MXML标签为 在该标签内可以定义与该列相关的内容 如该列表头元素的标签等 它的一部分于属性与数据列表控件中的是一致的 如editable属性 数据表格控件中的editable属性为全局属性 只有该属性为true时 在列项控件中定义editable属性为true或者false时才有效 10 6 3数据列表控件事件 数据列表控件中的事件除继承ListBase类中的事件外 还包括如下几个事件 columnStretch 用户改变某一行的高度时 触发该事件 如果控件不允许使用滚动条 在改变某一行高度的同时 其他行也进行收缩 以显示在控件区域内 headerRelease 在用户单击表头对表项排序后 释放鼠标按键时 触发该事件 只有控件允许排序 该事件才处于可触发的状态 headerShift 当单击表头排序后 表中的行移至其他位置 顺序发生改变时触发该事件 itemEditBegin 当对于条目进行编辑 即editedItemPosition属性被赋值时 触发该事件 itemEditBeginning 用户单击条目时进入itemEditBegin状态 在用户释放鼠标时 触发该事件 itemEditEnd 完成条目编辑 当编辑后的数据从条目编辑器中保存到数据提供器中时 触发该事件 itemFocusIn 鼠标焦点停留在条目渲染器时 触发该事件 itemFocusOut 条目渲染器失去鼠标焦点时 触发该事件 10 6 4创建数据列表控件 创建数据列表时 在代码中插入标签 定义标签的属性和控件的事件后 还需定义每列数据显示的详细信息 下面以图为例介绍创建列表控件的过程 该例使用XMLList格式的数据 在数据列表控件中也可以使用其他的层次化数据格式 详细情况可以查看数据篇中的相应内容 10 6 5定义数据表格控件事件 在数据表格中显示数据后 往往需要对用户在表格上的操作做出响应 常用的事件为单击表格项 ItemClick 事件 在图中当用户单击数据项 在控件下方的文本区域显示具体信息 10 6 6编辑数据表格中的数据项 编辑数据表格中的数据项 需要将控件的editable属性设为true 如果在中将属性设为true 整个控件的数据都可以进行编辑 但有些时候 有的条目是不能被更改的 如员工的姓名等 对于不能更改的条目 在内将editable属性设为false 图中允许对表格内数据编辑 但是禁止对姓名和性别进行编辑 10 6 7对数据表格控件中数据排序 对数据表格控件中数据排序是通过单击数据项的表头实现的 默认为升序或者降序排列该表头下的内容 排序的过程实际上只是改变数据在控件中的外部表现 并没有改变其在原始数据文件中的位置 排列的顺序根据表格控件中相应的属性进行 在数据表格控件中sortableColumns属性指明是否允许排序 默认值为true 在列项控件中使用sortable定义该列的数据是否参与排序 设定sortable属性后 该列的排序使用默认的排序方式 如果需要自定义排序方式 可以使用sortCompareFunction指定排序的方法 编写该方法时采用固定的结构 如下所示 mySortCompareFunction obj1 Object obj2 Object int 定义排序的方式return序号 10 7树形控件 树形控件用来表示结构化的数据 在树形结构中包括叶子 Leaf 节点和树枝 Branch 节点 其中树枝节点还可以包含叶子节点 而叶子节点不可以再分解 在树形控件中 叶子节点用文本图标进行标识 而树枝节点使用文件夹图标 类似于Windows中的文件夹图标 图是一个树形控件 它显示了某个文件的目录 10 7 1树形控件标签 树形控件对应的MXML标签为 该控件的属性除继承ListBase类的属性外 常用属性如表所示 10 7 2树形控件事件 在树形控件中 除发生change之类ListBase中的事件外 单击打开树枝节点 关闭树枝节点等都会触发相应的事件 常用的事件如下 itemClose 当闭合树枝节点时 触发该事件 itemOpen 当树枝节点打开或者展开时 触发该事件 itemOpening 当初始化树枝节点展开和闭合时 触发该事件 上述事件的类型均为mx events TreeEvent 在编辑控件中节点的内容时 触发的编辑事件与列表控件一致 可以参考列表控件 10 7 3树形控件类的方法 在编写树形控件的事件处理中 常需要获得节点的双亲等属性以及对控件进行动态操作 例如展开某个节点 可以通过树形控件类的方法获得 常用的方法如下 expandChildrenOf 展开或者关闭节点下所有的子节点 方法有两个参数 第一个是操作的节点 类型为Object 第二个是操作的类型 true为展开 false为关闭 expandItem 展开或关闭节点 当展开或关闭节点时 控件保存子节点的状态 该方法包含4个参数 第一个是操纵的节点 类型为Object 第二个是操作状态 true为展开 false为关闭 第三个是否激活转换 默认为false 当节点的孩子超过20个时 当节点第一次打开时 不进行转换 第四个展开或者关闭节点时是否触发事件 getParentItem 获得当前节点的双亲节点 setItemIcon 设置控件中的图标 该方法包含3个参数 第一个要更改的节点 第二个是叶子节点或者闭合树枝节点的图标 第三个是树枝节点打开状的图标 10 7 4创建树形控件 创建树形控件 通过定义控件的数据 插入控件的标签 定义控件的属性和事件即可 下面以图10 20为例介绍简单树形控件的创建 在图10 20中 只对数据进行展示 未添加其他功能 其代码如下 10 7 5树形控件事件处理 在用户单击树形控件中的节点时 常需要对的事件进行处理 图是一个单击节点后判断是否为文件夹节点的例子 10 7 6展开树形控件中的节点 默认情况下 在控件初始化时 总是显示闭合状的根节点 如图所示 如果希望节点呈展开状 可以使用expandItem 方法 10 7 7改变控件中的图标 有时为了更加形象地表达数据 需要改变树形控件中不同节点的图标 在树形控件中可以通过3种方式设定图标 使用folderOpenIcon folderClosedIcon和defaultLeafIcon属性设定图标 使用控件数据中的icon属性为每个节点定义图标 通过setItemIcon 方法动态改变图标 使用folderOpenIcon folderClosedIcon和defaultLeafIcon定义图表示只需为相应的属性赋值即可 这里不再详述 只介绍后2种方式 图使用icon字段定义图标 图的基础上 通过单击 改变图标 按钮再次改变图标 10 8渲染条目 在列表类的控件中 如何显示列表都是由控件的条目渲染器 ItemRenderer 实现的 条目渲染器在Flex1 5以及ActionScript中都被称之为单元渲染器 CellRenderer Flex2将单元渲染器进行修订更名为条目渲染器 更加灵活的定制条目显示 在每个控件中都有默认的条目渲染器 同时这些控件也提供相应的属性以及方法 去使用其他组件或者自定义组件作为控件的条目渲染器 在本章前面的控件介绍中已经讲述过条目渲染器的使用 如水平列表控件和瓦片式列表控件 使用条目渲染器有多种方式 例如使用列表类控件中内置的渲染器和编辑器 使用其他控件定义 自定义组件 本节将从这几个方面介绍如何使用条目渲染器 10 8 1使用默认的条目渲染器 在列表类控件中 每个控件都拥有自己的默认的条目渲染器 如在数据表格中使用DataGridItemRenderer DataGridItemRenderer使用文本控件表示数据表格中的条目 而其他几种默认的条目渲染器 如ListItemRenderer MenuItemRenderer MenuBarItem TileListItemRenderer和TreeItemRenderer都使用文本和图片组合的方式表示条目 在前面讲述列表控件时 为列表项添加图标就使用了ListItemRenderer 图是一个使用默认条目渲染器的示例 10 8 2使用其他控件作为条目渲染器 在Flex中 有很多控件可以作为列表类控件的条目渲染器 如按钮控件 复选框控件 日期选择控件 图片控件 标签控件 数字步进器控件文本控件和文本区控件文本输入控件 在使用这些控件时 在组件的itemRenderer属性后填写相应组件的类名即可 例如使用按钮控件时的代码如下 itemRenderer mx controls Button 下面的例子在数据表格的第一列和最后一列分别使用了图片和数字步进器控件作为条目渲染器 如图所示 10 8 3自定义组件作为条目渲染器 上面的例子中使用Flex