flash list组件与CellRenderer API

Flash MX 2004中的新组件对于我们开发网络应用程序的确带来了很大的方便，无论是在美观和易使用方面都得到了不错的评价。开发应用程序过程中相信大家使用的比较多的还是基于列表的组件（List、DataGrid、Tree 和 Menu），DataGrid、Tree 和 Menu 组件是 List 类的扩展.下面引用Flash MX 2004帮助文档中的一段描述。
[color="#008000"]关于 List 类的构成
List 类由行构成。这些行显示滑过和选区突出显示，用作行选区的点击状态，并在滚动中扮演重要的角色。除了选区突出显示和图标（如节点图标和Tree 组件的展开箭头）之外，行还包含一个单元格（或者，如果是 DataGrid，则包含多个单元格）。在默认情况下，这些单元格是实现 CellRenderer API 的 TextField 对象。但是，您可以让 List 使用不同的组件类作为每一行的单元格。唯一的要求是该类必须实现 List 用于与单元格通信的 CellRenderer API。
[img]/uploads/allimg/080329/1842100.jpg[/img]
CellRenderer API 是一组属性和方法，基于列表的组件（List、DataGrid、Tree 和 Menu）使用它们来处理和显示每一行的自定义单元格内容。该自定义单元格可以包含预先建立的组件（如 CheckBox）或您创建的任何类。[/color]
即我们可以在基于列表的组件中用不同的组件类作为每一行的单元格，在单元格中填入更丰富的内容。Flash MX 2004帮助文档中提到要在单元格中填入不同的组件类我们必须要把作为填充单元格的类实现CellRenderer API。要实现CellRenderer API 我们必须要在此类文件中实现如下四个方法（CellRenderer.getPreferredHeight()、CellRenderer.getPreferredWidth()、CellRenderer.setSize()、CellRenderer.setValue()）并且系统将为单元格自动指定两个方法和一个属性（CellRenderer.getCellIndex()、CellRenderer.getDataLabel() 和 CellRenderer.listOwner），以便允许它与基于列表的组件通信。
利用List组件我们可以实现一个列表，让用户选择一个列表中的某个或多个项目，默认情况下列表中的项目只能是文字内容，如果我们想列表中的每一项是一个图片，那是不是会更让用户感兴趣一些。今天我们就用CellRenderer API来实现我们的这个想法。
1、新建一空白文档(尺寸:200 * 150,背景色设为#006600),打开组件面板,从面板中拖一list组件到舞台中并把他的实类名设为myList，宽高分别为160 * 130。保存为LogoAd.fla。
[img]/uploads/allimg/080329/1842101.gif[/img]
2、在时间轴面板中新建一图层取名为 actions，我们将在这一图层写入我们所需要的所有的actionscript语句。
[img]/uploads/allimg/080329/1842102.gif[/img]
把不同的内容放在不同的图层并给这些图层取一个和内容相关的名字是一个好习惯。
3、用选择工具选择List组件，下面我们要为List组件设置一些参数，rowHeight 设为128，labels 参数设置如图。
[img]/uploads/allimg/080329/1842103.gif[/img]
同时请大家准备好5张jpg格式的图片，图片的宽高分别为 128 * 128 ，文件名分别为one,jpg、two.jpg、three.jpg、four.jpg、five.jpg，并且和LogoAd.fla文件在同一目录。在我的源文件中有这样的五张图片，大家可以拿来使用。
4、在单元格中可以放入不同的组件，要在单元格中显示图片，我们可以将loader组件作为单元格的填充，然后在loader组件中装载图片。
5、下面我们来写需要的类文件，如上所述要实现CellRenderer API必须要实现四个方法。为了大家更好的理解每个方法的执行过程，首先在类文件中只写出这四个方法，在函数体内什么都不做。新建一动作脚本文件，写下如下代码：
import mx.core.UIComponent;
class LogoAd extends UIComponent{
 
 //构造函数********************
 function LogoAd(){
  trace("构造函数执行");
 }
 
 function setValue(suggested:String, item:Object, selected:Boolean) :Void{
  trace("setValue 方法执行");
  trace("suggested 的值是" + suggested);
  trace("item 的值是" + item);
  trace("selected 的值是" + selected);
 }
 
 function setSize(w:Number, h:Number){
  trace("setSize 方法执行");
                trace(w);
本文转自：http://www.5uflash.com/flashjiaocheng/Flashzujianxuexi/1369.html