第10章使用列表和表格ppt课件

1、第10章 运用列表和表格用户界面中，常利用表格和列表显示数据的条目和详细信息。Flex设计了不同的控件来实现列表和表格，不仅可以将数据显示在表格和列表中，还可以实现对数据进展支配、修正等更为强大的功能。由于这些控件的数据格式都需是格式化的数据，数据提供器读取构造化的数据，这些控件也称之为数据驱动控件Data-driven Controls。与列表和表格相关的控件如下所示。列表控件List Control：将数据显示在垂直的列表中。程度列表控件HorizontalList Control：与列表控件类似，程度列表控件那么是以程度的方式横向阅读数据。片式列表控件TileList Control：与

2、上述2种列表控件类似，片式列表中不仅可以显示文字、数据，还可以显示该数据相关的图片。组合框控件ComboBox Control与其他列表式控件不同，组合框控件只需占用很少的界面控件，单击控件中的下拉箭头，可动态弹出列表栏选择需求的数据选项。数据表格控件DataGrid Control对于某一类数据，往往包括很多数据项，比如一个学生的数据包括：年龄、性别、出生年月等，利用数据表格控件，可以以行和列的方式表达多个学生的详细信息。树形控件Tree Control：将构造化的数据显示到树形的构造中。在树形控件中的，利用树形的叶子节点以及叶子节点的双亲节点表示数据之间的关联。10.1 列表和表格控件接口

3、类 上述几种控件在Flex中，都同样直接或间接地承继mx.controls.listClasses.ListBase类。所以在这些控件中均承继该类的属性和事件。本节简要引见ListBase类属性和方法。10.1.1 ListBase类属性ListBase类的属性主要围绕控件的行、列、数据和控件其他功能。由于属性较多，这里只选择常用的进展讲述。ListBase类常用属性如表所示。10.1.2 ListBase类事件ListBase类事件是运用列表和表格控件时涉及的相关事件，详细有如下几种：change：当控件的selectedIndex和selectedItem属性值发生改动时，触发该事件。da

4、taChange：在运用其他组件作为控件的条目渲染器时，利用data属性指定在控件中显示的内容，当该内容改动时触发该事件。itemClick：当用户单击条目时，触发该事件。itemDoubleClick：当用户双击条目时，触发该事件。itemRollOut：当鼠标在条目上滚动时，触发该事件。itemRollOver：当鼠标停留在某个条目上，触发该事件。每次鼠标停留在条目上时，控件高亮显示该条目。10.2 列表 列表控件List Control将数据显示在垂直的列表中。用户在显示的数据条目中选择本人需求列项。假设列表数据的尺寸超出控件的尺寸时。可以拖动控件中的程度或者垂直的滚动条显示。列表控件如

5、下图。10.2.1 列表控件标签 在Flex中运用标签创建列表控件。同时列表控件的外观及事件都是由控件的属性定义。列表控件的属性除集成ListBase类的属性外，还包括如表所示的常用属性。10.2.2 列表控件事件列表控件的事件除承继ListBase类的事件外还包括条目编辑时的事件。条目编辑事件如下所示：itemEditBegin：当对条目进展编辑，即editedItemPosition属性被赋值时，触发该事件。该事件阐明条目处于预备被编辑的形状。itemEditBeginning：用户单击条目时进入itemEditBegin形状，在用户释放鼠标时，触发该事件，进入条目编辑形状。itemEdi

6、tEnd：完成条目编辑。当编辑后的数据从条目编辑器中保管到数据提供器中时，触发该事件。itemFocusIn：当鼠标焦点停留在条目渲染器时，触发该事件。itemFocusOut：当条目渲染器失去鼠标焦点时，触发该事件。scroll：假设控件中出现滚动条，那么拖动滚动条时触发该事件。上述几个事件的事件对象类型均为mx.events.ListEvent。10.2.3 创建列表控件 创建列表控件运用的是标签。经过为列表控件设置不同的属性和事件满足不同的需求。为了更清楚的讲述如何创建控件，如何运用控件的事件和更复杂的属性。这里采用由浅至深的顺序，首先从最简单的例子讲述。10.2.4 列表控件事件定义列

7、表控件事件是为与列表控件相关的事件创建事件处置函数。上面的两个例子为简单的列表控件例子，只显示需求的数据标签，而无其他功能。但是在实践需求中，在用单击相应条目时，或者当鼠标在各条目上滚动时，都需求与用户进展交互。下面的这个例子显示了，当鼠标在列表条目上滚动时显示条目的data值，在单击条目时，弹出对话框显示用户选中条目内容。图为鼠标在条目上滚动的效果，图为单击相应数据条目时，显示弹出对话框。10.3 列表控件中操作 在运用列表控件的过程还可以对列表控件相应的操作，主要包括显式提示、运用图标、编辑列表条目中数据。下面逐一引见这些操作。10.3.1 运用数据提示在运用列表过程中，当鼠标停留在条目上

8、时，可以显示该条目的相关数据提示。当利用滚动条时，可以显示滚动条的相关提示。在列表控件中运用showDataTips和showScrollTips属性指明能否显示条目提示和滚动条提示。当showDataTips为true时，鼠标在每行的条目上停留时，都会显示该条目的提示。默许情况下显示的是数据label属性中的内容。假设需求读取数据中其他属性的内容，可以运用dataTipField属性指定显示的内容。假设上述2种依然不能满足要求，可以运用dataTipFunction属性指明定义显示内容的方法，dataTipFunction属性方法的格式如下所示。myDataTipFunction(item:

9、Object):String /定义方法的内容Return 显示的内容 10.3.2 在列表控件中运用图标上面的例子都是在列表的条目中显示单一的文字，假设能为数据配上图标，那么就可以更笼统表达数据。而列表控件提供了为数据项显式图标的功能。在列表控件中，可以运用iconField和iconFunction属性定义图标相关的属性以及方法。iconField属性指明在数据中图标文件的地址是由哪项数据提供的。图为一个在列表控件中显示数据项图标的例子。10.3.3 编辑列表条目中数据编辑列表中的数据时，需求将editable属性设为true。在编辑数据的时候也触发相应的事件。图是一个编辑数据的例子，当鼠

10、标单击条目时，触发itemEditBeginning事件条目显示为一个文本输入控件，在控件中可以修正文字。当修正终了后，鼠标单击条目之外的区域时触发itemEditEnd事件，条目显示为编辑后的文字。单击该条目，在控件下方的文本区域显示当前条目的标签，如下图10.4 程度列表程度列表控件HorizontalList Control与列表控件的不同点在于，列表控件以垂直的方式显示数据条目，程度列表控件运用程度方向显示数据条目。假设只在列表中运用文字，那么程度列表与列表控件的创建方式一样的。但在实践的运用中，程度列表控件较常用来表示图片，例如相册中图片的显示、产品图片的展现等。在程度斜砜丶校苁谴幼

11、蟮接蚁允咎跄康摹假设列表项超出控件的范围，可以利用滚动条查看剩余的条目。图是一个展现手机图片的程度列表控件。10.4.1 程度列表控件标签 程度列表控件对应的MXML标签为，该控件的属性承继ListBase类的属性。属性和事件都可以参照列表控件的属性。10.4.2 创建程度列表控件在创建程度列表控件时，只需插入控件的标签，定义相应的属性和事件即可。下面以图为例引见简单的程度列表创建。图片的显示是借助图片控件Image Control实现的。程度列表控件利用条目渲染器将图片控件嵌入其中。图的代码如下所示。 10.4.3 运用条目渲染器 上面的例子采用在条目中完全显示图片的方式.有时，也需求为图片

12、配上阐明文字。假设要实现图片和文字同时显示，也需求运用条目渲染器。由于需求将文字和图片显示在同一区域内，只能本人定制组件，再将组件嵌入到控件中，效果如下图。10.5 瓦片式列表 瓦片式列表控件TileList Control的外观与程度列表控件的外观类似。程度列表控件常用于在条目中同时显示图片和文字，而瓦片式列表控件中每个条目像瓦片一样陈列中控件区域中。瓦片式控件的可以多行显示，而与程度列表控件只能单行显示。图为瓦片式列表控件的一个例子。10.5.1 瓦片列表控件标签 瓦片列表控件对应的标签为，控件的属性和事件可以运用列表控件的属性和事件设定。该控件默许的条目渲染器为TileListItemR

13、enderer。10.5.2 创建瓦片列表控件创建该控件时，方法与创建程度列表控件类似。在运用图形和文字时可以运用默许的条目渲染器，也可以根据需求本人定义条目渲染器。首先引见默许的条目渲染器TileListItemRenderer。它包括两个属性：icon和text。icon属性定义条目渲染器中的图标，text属性定义了条目渲染器中的文字。在图中运用了默许的条目渲染器时图标在上，文字在图标下方。在运用默许条目渲染器时，TileListItemRenderer自动读取数据中text和icon属性值。10.6 数据表格利用表格中行和列表示数据也是用户常用的界面元素。在Flex中，运用数据表格控件D

14、ataGrid Control可以实如今表格中显式数据的功能。数据表格控件可以看做运用多列条目的列表来表示数据。实践上，在表格控件中是利用行和列来确定数据中的元素。数据表格控件也是建立在列表控件根底上，所以列表控件中的许多特性可在数据表格控件上表达。除此之外，数据表格控件还具有其他功能，如下所示。编辑表格中的数据元素。在运转时对表格中的数据进展排序。单击表头改动数据的陈列顺序。支持自定义的表格列表。10.6.1 数据表格控件标签 数据表格控件对应的MXML标签为。该控件的属性除承继ListBase类的属性外，还包括一些常用属性，如表所示。10.6.2 数据表格列项 由于在数据表格中添加了列项C

15、olumns来表达数据，所以控件需添加相应的属性来描画列以及列数据上发生的事件。 在Flex中，数据表格列项也是作为一种控件出现的。它对应的MXML标签为，在该标签内可以定义与该列相关的内容，如该列表头元素的标签等。它的一部分于属性与数据列表控件中的是一致的，如editable属性。数据表格控件中的editable属性为全局属性。只需该属性为true时，在列项控件中定义editable属性为true或者false时才有效。10.6.3 数据列表控件事件数据列表控件中的事件除承继ListBase类中的事件外，还包括如下几个事件：columnStretch：用户改动某一行的高度时，触发该事件。假设

16、控件不允许运用滚动条，在改动某一行高度的同时，其他行也进展收缩，以显示在控件区域内。headerRelease：在用户单击表头对表项排序后，释放鼠标按键时，触发该事件。只需控件允许排序，该事件才处于可触发的形状。headerShift：当单击表头排序后，表中的行移至其他位置，顺序发生改动时触发该事件。itemEditBegin：当对于条目进展编辑，即editedItemPosition属性被赋值时，触发该事件。itemEditBeginning：用户单击条目时进入itemEditBegin形状，在用户释放鼠标时，触发该事件。itemEditEnd：完成条目编辑。当编辑后的数据从条目编辑器中保管

17、到数据提供器中时，触发该事件。itemFocusIn：鼠标焦点停留在条目渲染器时，触发该事件。itemFocusOut：条目渲染器失去鼠标焦点时，触发该事件。10.6.4 创建数据列表控件 创建数据列表时，在代码中插入标签，定义标签的属性和控件的事件后，还需定义每列数据显示的详细信息。下面以图为例引见创建列表控件的过程。该例运用XMLList格式的数据。在数据列表控件中也可以运用其他的层次化数据格式，详细情况可以查看数据篇中的相应内容。10.6.5 定义数据表格控件事件 在数据表格中显示数据后，往往需求对用户在表格上的操作做出呼应。常用的事件为单击表格项ItemClick事件。在图中当用户单击

18、数据项，在控件下方的文本区域显示详细信息。10.6.6 编辑数据表格中的数据项编辑数据表格中的数据项，需求将控件的editable属性设为true。假设在中将属性设为true，整个控件的数据都可以进展编辑。但有些时候，有的条目是不能被更改的，如员工的姓名等。对于不能更改的条目，在内将editable属性设为false。图中允许对表格内数据编辑，但是制止对姓名和性别进展编辑。10.6.7 对数据表格控件中数据排序对数据表格控件中数据排序是经过单击数据项的表头实现的。默以为升序或者降序陈列该表头下的内容。排序的过程实践上只是改动数据在控件中的外部表现，并没有改动其在原始数据文件中的位置。陈列的顺序

19、根据表格控件中相应的属性进展。在数据表格控件中sortableColumns属性指明能否允许排序，默许值为true。在列项控件中运用sortable定义该列的数据能否参与排序。设定sortable属性后，该列的排序运用默许的排序方式。假设需求自定义排序方式，可以运用sortCompareFunction指定排序的方法，编写该方法时采用固定的构造，如下所示。mySortCompareFunction(obj1:Object, obj2:Object):int /定义排序的方式return 序号10.7 树形控件树形控件用来表示构造化的数据。在树形构造中包括叶子Leaf节点和树枝Branch节点。

20、其中树枝节点还可以包含叶子节点，而叶子节点不可以再分解。在树形控件中，叶子节点用文本图标进展标识，而树枝节点运用文件夹图标，类似于Windows中的文件夹图标。图是一个树形控件，它显示了某个文件的目录。10.7.1 树形控件标签 树形控件对应的MXML标签为，该控件的属性除承继ListBase类的属性外，常用属性如表所示。10.7.2 树形控件事件 在树形控件中，除发生change之类ListBase中的事件外，单击翻开树枝节点、封锁树枝节点等都会触发相应的事件。常用的事件如下。 itemClose：当闭合树枝节点时，触发该事件。 itemOpen：当树枝节点翻开或者展开时，触发该事件。 it

21、emOpening：当初始化树枝节点展开和闭合时，触发该事件。 上述事件的类型均为mx.events.TreeEvent。 在编辑控件中节点的内容时，触发的编辑事件与列表控件一致，可以参考列表控件。10.7.3 树形控件类的方法在编写树形控件的事件处置中，常需求获得节点的双亲等属性以及对控件进展动态操作，例如展开某个节点，可以经过树形控件类的方法获得。常用的方法如下。expandChildrenOf()：展开或者封锁节点下一切的子节点。方法有两个参数：第一个是操作的节点，类型为Object；第二个是操作的类型，true为展开，false为封锁。expandItem()：展开或封锁节点。当展开或

22、封锁节点时，控件保管子节点的形状。该方法包含4个参数：第一个是支配的节点，类型为Object；第二个是操作形状，true为展开，false为封锁；第三个能否激活转换，默以为false，当节点的孩子超越20个时，当节点第一次翻开时，不进展转换；第四个展开或者封锁节点时能否触发事件。getParentItem()：获得当前节点的双亲节点。setItemIcon()：设置控件中的图标。该方法包含3个参数：第一个要更改的节点，第二个是叶子节点或者闭合树枝节点的图标，第三个是树枝节点翻开状的图标。10.7.4 创建树形控件创建树形控件，经过定义控件的数据，插入控件的标签，定义控件的属性和事件即可。下面以

23、图10.20为例引见简单树形控件的创建。在图10.20中，只对数据进展展现，未添加其他功能，其代码如下。 10.7.5 树形控件事件处置 在用户单击树形控件中的节点时，常需求对的事件进展处置。图是一个单击节点后判别能否为文件夹节点的例子。10.7.6 展开树形控件中的节点 默许情况下，在控件初始化时，总是显示闭合状的根节点，如下图。假设希望节点呈展开状，可以运用expandItem()方法。10.7.7 改动控件中的图标有时为了更加笼统地表达数据，需求改动树形控件中不同节点的图标。在树形控件中可以经过3种方式设定图标。运用folderOpenIcon、folderClosedIcon和defa

24、ultLeafIcon属性设定图标。运用控件数据中的icon属性为每个节点定义图标。经过setItemIcon()方法动态改动图标。运用folderOpenIcon、folderClosedIcon和defaultLeafIcon定义图表示只需为相应的属性赋值即可，这里不再详述，只引见后2种方式。图运用icon字段定义图标。图的根底上，经过单击【改动图标】按钮再次改动图标。10.8 渲染条目在列表类的控件中，如何显示列表都是由控件的条目渲染器ItemRenderer实现的。条目渲染器在Flex 1.5以及ActionScript中都被称之为单元渲染器CellRenderer。Flex 2将单元

25、渲染器进展修订更名为条目渲染器，更加灵敏的定制条目显示。在每个控件中都有默许的条目渲染器。同时这些控件也提供相应的属性以及方法，去运用其他组件或者自定义组件作为控件的条目渲染器。在本章前面的控件引见中曾经讲述过条目渲染器的运用，如程度列表控件和瓦片式列表控件。运用条目渲染器有多种方式。例如运用列表类控件中内置的渲染器和编辑器、运用其他控件定义、自定义组件，本节将从这几个方面引见如何运用条目渲染器。10.8.1 运用默许的条目渲染器在列表类控件中，每个控件都拥有本人的默许的条目渲染器。如在数据表格中运用DataGridItemRenderer。DataGridItemRenderer运用文本控件

26、表示数据表格中的条目。而其他几种默许的条目渲染器，如ListItemRenderer、MenuItemRenderer、MenuBarItem、TileListItemRenderer和TreeItemRenderer都运用文本和图片组合的方式表示条目。在前面讲述列表控件时，为列表项添加图标就运用了ListItemRenderer。图是一个运用默许条目渲染器的例如。10.8.2 运用其他控件作为条目渲染器在Flex中，有很多控件可以作为列表类控件的条目渲染器，如按钮控件、复选框控件、日期选择控件、图片控件、标签控件、数字步进器控件文本控件和文本区控件文本输入控件。在运用这些控件时，在组件的itemRenderer属性后填写相应组件的类名即可。例如运用按钮控件时的代码如下。itemRenderer=“mx.controls.Button下面的例子在数据表格的第一列和最后一列分别运用了图片和数字步进器控件作为条目渲染器。如下图。10.8.3 自定义组件作为条目渲染器 上面的例子中运用Flex中的控件作为