CellRenderer

可以使用 XML 数据(而非数组)来填充 DataProvider 对象。例如,下面的代码将数据存储在一个名为 employeesXML 的 XML 对象中,然后将该对象作为 DataProvider() 构造函数的 value 参数传递:

import fl.controls.DataGrid; 
import fl.data.DataProvider; 
 
var aDg:DataGrid = new DataGrid(); 
addChild(aDg); 
 
var employeesXML:XML =  
    <employees> 
        <employee Name="Edna" ID="22" /> 
        <employee Name="Stu" ID="23" /> 
    </employees>; 
 
var myDP:DataProvider = new DataProvider(employeesXML); 
aDg.columns = ["Name", "ID"]; 
aDg.dataProvider = myDP;

import fl.controls.List; 
import fl.controls.TextArea; 
import flash.events.Event; 
import fl.data.DataProvider; 
 
var aList:List = new List(); 
var aTa:TextArea = new TextArea(); 
var items:Array = [ 
{label:"David", data:"1/19/1995"}, 
{label:"Colleen", data:"4/20/1993"}, 
{label:"Sharon", data:"9/06/1994"}, 
{label:"Ronnie", data:"7/6/1993"}, 
{label:"James", data:"2/15/1994"}, 
]; 
aList.dataProvider = new DataProvider(items); 
 
addChild(aList); 
addChild(aTa); 
 
aList.move(150,150); 
aTa.move(150, 260); 
 
aList.addEventListener(Event.CHANGE, changeHandler); 
 
function changeHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.data; 
};




List、DataGrid 和 TileList 组件均继承自 SelectableList 基类。因此,这些组件被视为基于 List 的组件。ComboBox 由一个文本框和一个 List 组成,因此它也是基于 List 的组件。

List 由若干行组成。DataGrid 和 TileList 由可分成多个列的若干行组成。行和列的相交部分即为单元格。对于由仅包含一列的若干行组成的 List,它的每一行都是一个单元格。单元格有以下两个重要方面:

  • 单元格中保存的数据值称为项目。“项目”是用于将信息单元存储在 List 中的 ActionScript 对象。可以将 List 看作一个数组,此数组中的每个索引空间就是一个项目。在 List 中,项目是一个对象,该对象通常有一个显示出来的 label 属性和一个用于存储数据的 data 属性。“数据提供程序”是 List 中项目的数据模型。只需将数据提供程序赋给基于 List 的组件的 dataProvider 属性,即可填充该组件。

  • 单元格可以保存不同类型的数据:从文本到图像、影片剪辑或您可以创建的任何类。出于此原因,单元格的绘制或渲染方式必须与其内容相适应。因此,基于 List 的组件有一个用于渲染其单元格的“单元格渲染器”。对于 DataGrid,每一列都是一个 DataGridColumn 对象,此对象也有一个 cellRenderer 属性,所以每一列都可以用适合其内容的方式进行渲染。

    所有基于 List 的组件都有 cellRenderer 和 dataProvider 属性,您可以设置这些属性以加载和渲染这些组件的单元格。




关于 List 类的构成
List 类由行构成。这些行显示滑过和选区突出显示,用作行选区的点击状态,并在滚动中扮演重要的角色。除了选区突出显示和图标(如节点图标和Tree 组件的展开箭头)之外,行还包含一个单元格(或者,如果是 DataGrid,则包含多个单元格)。在默认情况下,这些单元格是实现 CellRenderer API 的 TextField 对象。但是,您可以让 List 使用不同的组件类作为每一行的单元格。唯一的要求是该类必须实现 List 用于与单元格通信的 CellRenderer API。titleCellRenderer API 是一组属性和方法,基于列表的组件(List、DataGrid、Tree 和 Menu)使用它们来处理和显示每一行的自定义单元格内容。该自定义单元格可以包含预先建立的组件(如 CheckBox)或您创建的任何类。







以下为官方文章转载:

http://help.adobe.com/zh_CN/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fd4.html#WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fc2

CellRenderer 是一个类,基于 List 的组件(如 List、DataGrid、TileList 和 ComboBox)使用此类来操作和显示其各行的自定义单元格内容。自定义的单元格可以包含文本、预先构建的组件(如 CheckBox)或您可以创建的任何显示对象类。若要使用自定义 CellRenderer 来渲染数据,您可以扩展 CellRenderer 类或实现 ICellRenderer 接口来创建您自己的自定义 CellRenderer 类。

List、DataGrid、TileList 和 ComboBox 类为 SelectableList 类的子类。SelectableList 类包含 cellRenderer 样式。该样式用于定义组件用来渲染单元格的显示对象。

CellRenderer 属性

data 属性是一个包含为 CellRenderer 设置的所有属性的对象。例如,在下面的类(该类定义了一个扩展 Checkbox 类的自定义 CellRenderer)中,注意 data 属性的 setter 函数将data.label 的值传递给从 CheckBox 类继承的 label 属性:

    public class CustomRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomRenderer() { 
        } 
        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; 
        } 
    } 
}

selected 属性用于定义列表中的某一单元格是否已被选中。

设置单元格格式

CellRenderer 类包含许多用于控制单元格格式的样式。

使用以下样式可以定义用于单元格不同状态(禁用、按下、指针经过和弹起)的外观:

  • disabledSkin 和 selectedDisabledSkin

  • downSkin 和 selectedDownSkin

  • overSkin 和 selectedOverSkin

  • upSkin 和 selectedUpSkin

    以下样式用于设置文本的格式:

  • disabledTextFormat

  • textFormat

  • textPadding

可以通过调用 List 对象的 setRendererStyle() 方法或 CellRenderer 对象的 setStyle() 方法来设置这些样式。可以通过调用 List 对象的 getRendererStyle() 方法或 CellRenderer 对象的 getStyle() 方法来获取这些样式。还可以通过 List 对象的 rendererStyles 属性或 CellRenderer 对象的 getStyleDefinition() 方法访问定义所有渲染器样式(作为对象的命名属性)的对象。

可以调用 clearRendererStyle() 方法将样式重置为其默认值。

若要获取或设置列表中各行的高度值,请使用 List 对象的 rowHeight 属性。


定义自定义 CellRenderer 类

1,继承CellRenderer

package { 
    import fl.controls.listClasses.CellRenderer; 
    import flash.text.TextFormat; 
    import flash.filters.BevelFilter; 
    public class CustomCellRenderer extends CellRenderer { 
        public function CustomCellRenderer() { 
            var format:TextFormat = new TextFormat("Verdana", 12); 
            setStyle("textFormat", format); 
            this.filters = [new BevelFilter()]; 
        } 
    } 
}

2,实现ICellRenderer 接口

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; 
        } 
    } 
}

使用元件定义 CellRenderer

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 { 
        } 
        public function setMouseState(state:String):void{ 
        } 
        private function toggleFilter():void { 
            if (textField.filters.length == 0) { 
                textField.filters = [glowFilter]; 
            } else { 
                textField.filters = []; 
            } 
        } 
    } 
}    

为 DataGrid 对象的列应用 CellRenderer

DataGrid 对象可以有多个列,并且可以为每个列指定不同的单元格渲染器。DataGrid 的每个列均由一个 DataGridColumn 对象表示,并且 DataGridColumn 类包含 cellRenderer 属性,可以通过此属性为该列定义 CellRenderer。

为可编辑单元格定义 CellRenderer

DataGridCellEditor 类定义了用于 DataGrid 对象中可编辑单元格的渲染器。当 DataGrid 对象的 editable 属性设置为 true 并且用户单击要编辑的单元格时,它将成为该单元格的渲染器。若要为可编辑单元格定义 CellRenderer,请为 DataGrid 对象的 columns 数组的每个元素设置 itemEditor 属性。

将图像、SWF 文件或影片剪辑用作 CellRenderer

CellRenderer 的子类 ImageCell 类定义用于渲染单元格(主要内容为图像、SWF 文件或影片剪辑的单元格)的对象。ImageCell 类包含以下用于定义单元格外观的样式:

  • imagePadding — 用于分隔单元格边缘和图像边缘的填充(以像素为单位)

  • selectedSkin — 用于指示所选状态的外观

  • textOverlayAlpha — 单元格标签后面叠加层的不透明度

  • textPadding — 用于分隔单元格边缘和文本边缘的填充(以像素为单位)

    ImageCell 类是 TileList 类的默认 CellRenderer。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值