定义自定义 CellRenderer 类

例如,下面的代码中包括两个类。ListSample 类用于实例化 List 组件,并且该类使用另一个类 CustomRenderer 来定义用于此 List 组件的单元格渲染器。CustomRenderer 类扩展了 CellRenderer 类。

使用扩展 CellRenderer 类的类来定义自定义 CellRenderer:

  1. 选择"文件">"新建"。
  2. 在显示的"新建文档"对话框中,选择"Flash 文件 (ActionScript 3.0)",然后单击"确定"。
  3. 选择"窗口">"组件"以显示"组件"面板。
  4. 在"组件"面板中,将 List 组件拖到舞台上。
  5. 如果 Flash 未显示"属性"检查器,请选择"窗口">"属性">"属性"。
  6. 选择 List 组件后,在"属性"检查器中设置属性:
    • 实例名称:myList
    • W(宽度):200
    • H(高度):300
    • X:20
    • Y:20
  7. 在时间轴中选择图层 1 的第 1 帧,然后选择"窗口">"动作"。
  8. 在"动作"面板中键入以下脚本:
    myList.setStyle("cellRenderer", CustomCellRenderer);
    myList.addItem({label:"Burger -- $5.95"});
    myList.addItem({label:"Fries -- $1.95"});
    
  9. 选择"文件">"保存"。为文件指定一个名称,然后单击"确定"按钮。
  10. 选择"文件">"新建"。
  11. 在显示的"新建文档"对话框中,选择"ActionScript 文件",然后单击"确定"按钮。
  12. 在脚本窗口中,输入以下代码来定义 CustomCellRenderer 类:
package {
    import fl.controls.listClasses.CellRenderer;
    import flash.text.TextFormat;
    import flash.filters.BevelFilter;
    public class CustomCellRenderer2 extends CellRenderer {
        public function CustomCellRenderer2() {
            var format:TextFormat = new TextFormat("Verdana", 12);
            setStyle("textFormat", format);
            this.filters = [new BevelFilter()];
        }
    }
}
  1. 选择"文件">"保存"。将文件命名为 CustomCellRenderer.as,并将其放在 FLA 文件所在的目录中,然后单击"确定"按钮。
  2. 选择"控制">"测试影片"。

还可以使用继承 DisplayObject 类并实现 ICellRenderer 接口的任何类来定义 CellRenderer。例如,下面的代码定义了两个类。ListSample2 类将 List 对象添加到显示列表中,并将其 CellRenderer 定义为使用 CustomRenderer 类。CustomRenderer 类扩展了 CheckBox 类(CheckBox 类扩展了 DisplayObject 类)并实现了 ICellRenderer 接口。请注意,CustomRenderer 类为 ICellRenderer 接口中定义的 datalistData 属性定义了 getter 和 setter 方法。ICellRenderer 接口中定义的其它属性和方法(selected 属性和 setSize() 方法)已在 CheckBox 类中定义:

使用实现 ICellRenderer 接口的类来定义自定义 CellRenderer:

  1. 选择"文件">"新建"。
  2. 在显示的"新建文档"对话框中,选择"Flash 文件 (ActionScript 3.0)",然后单击"确定"。
  3. 选择"窗口">"组件"以显示"组件"面板。
  4. 在"组件"面板中,将 List 组件拖到舞台上。
  5. 如果 Flash 未显示"属性"检查器,请选择"窗口">"属性">"属性"。
  6. 选择 List 组件后,在"属性"检查器中设置属性:
    • 实例名称:myList
    • W(宽度):100
    • H(高度):300
    • X:20
    • Y:20
  7. 在时间轴中选择图层 1 的第 1 帧,然后选择"窗口">"动作"。
  8. 在"动作"面板中键入以下脚本:
    myList.setStyle("cellRenderer", CustomCellRenderer);
    myList.addItem({name:"Burger", price:"$5.95"});
    myList.addItem({name:"Fries", price:"$1.95"});
    
  9. 选择"文件">"保存"。为文件指定一个名称,然后单击"确定"按钮。
  10. 选择"文件">"新建"。
  11. 在显示的"新建文档"对话框中,选择"ActionScript 文件",然后单击"确定"按钮。
  12. 在脚本窗口中,输入以下代码来定义 CustomCellRenderer 类:
package
{
    import fl.controls.CheckBox;
    import fl.controls.listClasses.ICellRenderer;
    import fl.controls.listClasses.ListData;
    public class CustomCellRenderer extends CheckBox implements ICellRenderer {
        private var _listData:ListData;
        private var _data:Object;
        public function CustomCellRenderer() {
        }
        public function set data(d:Object):void {
            _data = d;
            label = d.label;
        }
        public function get data():Object {
            return _data;
        }
        public function set listData(ld:ListData):void {
            _listData = ld;
        }
        public function get listData():ListData {
            return _listData;
        }
    }
}
  1. 选择"文件">"保存"。将文件命名为 CustomCellRenderer.as,并将其放在 FLA 文件所在的目录中,然后单击"确定"按钮。
  2. 选择"控制">"测试影片"。

还可以使用库中的元件定义 CellRenderer。必须为 ActionScript 导出此元件,并且此库元件的类名称必须有一个实现 ICellRenderer 接口或扩展 CellRenderer 类(或其子类之一)的关联类文件。

下面的示例使用库元件定义自定义 CellRenderer。

使用库元件定义 CellRenderer:

  1. 选择"文件">"新建"。
  2. 在显示的"新建文档"对话框中,选择"Flash 文件 (ActionScript 3.0)",然后单击"确定"。
  3. 选择"窗口">"组件"以显示"组件"面板。
  4. 在"组件"面板中,将 List 组件拖到舞台上。
  5. 如果 Flash 未显示"属性"检查器,请选择"窗口">"属性">"属性"。
  6. 选择 List 组件后,在"属性"检查器中设置属性:
    • 实例名称:myList
    • W(宽度):100
    • H(高度):400
    • X:20
    • Y:20
  7. 单击"参数"面板,然后双击 dataProvider 行的第二列。
  8. 在显示的"值"对话框中,单击加号两次以添加两个数据元素(标签分别设置为 label0 和 label1),然后单击"确定"按钮。
  9. 使用"文本"工具在舞台上绘制一个文本字段。
  10. 选择该文本字段后,在"属性"检查器中设置属性:
    • 文本类型:动态文本
    • 实例名称:textField
    • W(宽度):100
    • 字体大小:24
    • X:0
    • Y:0
  11. 选择该文本字段后,选择"修改">"转换为元件"。
  12. 在"转换为元件"对话框中进行以下设置,然后单击"确定"。
    • 名称:MyCellRenderer
    • 类型:MovieClip
    • 为 ActionScript 导出:选中
    • 在第一帧导出:选中
    • 类:MyCellRenderer
    • 基类:flash.display.SimpleButton

    如果 Flash 显示"ActionScript 类警告",请单击警告框中的"确定"按钮。

  13. 从舞台上删除新影片剪辑元件的实例。
  14. 在时间轴中选择图层 1 的第 1 帧,然后选择"窗口">"动作"。
  15. 在"动作"面板中键入以下脚本:
    myList.setStyle("cellRenderer", MyCellRenderer);
    
  16. 选择"文件">"保存"。为文件指定一个名称,然后单击"确定"按钮。
  17. 选择"文件">"新建"。
  18. 在显示的"新建文档"对话框中,选择"ActionScript 文件",然后单击"确定"按钮。
  19. 在脚本窗口中,输入以下代码来定义 MyCellRenderer 类:
    package {
        import flash.display.MovieClip;
        import flash.filters.GlowFilter;
        import flash.text.TextField;
        import fl.controls.listClasses.ICellRenderer;
        import fl.controls.listClasses.ListData;
        import flash.utils.setInterval;
        public class MyCellRenderer extends MovieClip implements ICellRenderer {
            private var _listData:ListData;
            private var _data:Object;
            private var _selected:Boolean;
            private var glowFilter:GlowFilter;
            public function MyCellRenderer() {
                glowFilter = new GlowFilter(0xFFFF00);
                setInterval(toggleFilter, 200);
            }
            public function set data(d:Object):void {
                _data = d;
                textField.text = d.label;
            }
            public function get data():Object {
                return _data;
            }
            public function set listData(ld:ListData):void {
                _listData = ld;
            }
            public function get listData():ListData {
                return _listData;
            }
            public function set selected(s:Boolean):void {
                _selected = s;
            }
            public function get selected():Boolean {
                return _selected;
            }
            public function setSize(width:Number, height:Number):void {
            }
            public function setStyle(style:String, value:Object):void {
            }
            private function toggleFilter():void {
                if (textField.filters.length == 0) {
                    textField.filters = [glowFilter];
                } else {
                    textField.filters = [];
                }
            }
        }
    }    
    
  20. 选择"文件">"保存"。将文件命名为 MyCellRenderer.as,并将其放在 FLA 文件所在的目录中,然后单击"确定"按钮。
  21. 选择"控制">"测试影片"。