Flex 之 可变背景表格渲染器
2011-01-11 20:56 c#在路上 阅读(935) 评论(0) 编辑 收藏 举报1.实现的效果如下；
该表格的单元格的背景色可以变化，随着单元格数数据的变化而变化，字体也随着变化，但背景为深色时，字体改为白色显示。
2.实现步骤：
CellColorItemRenderer 渲染器的实现，一般的渲染器如，实现有checkbox 的tree 组件的渲染器，只需继承TreeItemRenderer，重写如下的几个方法：
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{}
override public function set data(value:Object):void
{}
override protected function createChildren():void
{}
而gridview 的 可以继承DataGridItemRenderer 。但是这种功能好像没有办法来继承DataGridItemRenderer。但是用如下的实现，
继承如下的类，然后重写方法。设计的思想是通过改变该单元格的背景色与字体的颜色。重写的方法有：validateNow data
，在实现改变颜色时：var dataField:String=DataGridListData(listData).dataField;
dataField=dataField.substring(1,dataField.length);取得该单元格的值，然后改写背景色与字体颜色。为什么要以该种方式实现，是为了方便的实现动态的增加与删除行列。
1 package com.owncontrol
2 {
3 import mx.containers.HBox;
4 import mx.controls.Text;
5 import mx.controls.dataGridClasses.DataGridListData;
6 import mx.controls.listClasses.BaseListData;
7 import mx.controls.listClasses.IDropInListItemRenderer;
8 import mx.controls.listClasses.IListItemRenderer;
9 import mx.core.IDataRenderer;
10 public class CellColorItemRenderer extends HBox implements IDataRenderer, IDropInListItemRenderer,IListItemRenderer
11 {
12
13 public var mytxt:Text;
14 public function CellColorItemRenderer()
15 {
16 super();
17 mytxt= new Text();
18 mytxt.width=this.width;
19 this.addChild(mytxt);
20 }
21
22 private var _data:Object;
23 override public function get data():Object
24 {
25 return _data;
26 }
27 override public function set data(value:Object):void
28 {
29 _data = value;
30 }
31
32 private var _listData:DataGridListData;
33
34 [Bindable( "dataChange" )]
35 public function get listData():BaseListData
36 {
37 return _listData;
38 }
39 public function set listData( value:BaseListData ):void
40 {
41 _listData = DataGridListData( value );
42 }
43
44 override public function validateNow():void
45 {
46 if(data!=null)
47 {
48 var item:XML=data as XML;
49
50 var dataField:String=DataGridListData(listData).dataField;
51 dataField=dataField.substring(1,dataField.length);
52
53 var valueInt:Number=Number(item.attribute(dataField).toString());
54 //getColor()方法为外部的任意方法，用来获取参数的颜色
55 var colo:uint=getColor(dataField,valueInt);
56 setStyle("backgroundColor",colo);
57 if(setOnFont(colo))
58 mytxt.setStyle("color",0xffffff);
59 else
60 mytxt.setStyle("color",0x0);
61 //setStyle("color",colo);
62 mytxt.width=this.width;
63 mytxt.text=valueInt.toString();
64 }
65 super.validateNow();
66 }
67
68 /**
69 * @private
70 * 如果颜色在字体的矩阵中，则改变字体的颜色为白色
71 * @param: 输入的颜色
72 * @return 是否设置字体颜色
73 */
74 private function setOnFont(colo:uint):Boolean
75 {
76 var blueRow1:uint=0;
77 var blueRow2:uint=13056;//3300
78 var greenRow1:uint=3342336;//330000
79 var greenRow2:uint=3355392;//333300 //蓝色
80 for(var i:int=0;i<6;i++)
81 {
82
83 if(colo==blueRow1)
84 return true;
85 if(colo==blueRow2)
86 return true;
87 if(colo==greenRow1)
88 return true;
89 if(colo==greenRow2)
90 return true;
91 blueRow1=blueRow1+51;
92 blueRow2=blueRow2+51;
93 greenRow1=greenRow1+51;
94 greenRow2=greenRow2+51;
95 }
96 return false;
97 }
98 }
99 }
3 import mx.containers.HBox;
4 import mx.controls.Text;
5 import mx.controls.dataGridClasses.DataGridListData;
6 import mx.controls.listClasses.BaseListData;
7 import mx.controls.listClasses.IDropInListItemRenderer;
8 import mx.controls.listClasses.IListItemRenderer;
9 import mx.core.IDataRenderer;
10 public class CellColorItemRenderer extends HBox implements IDataRenderer, IDropInListItemRenderer,IListItemRenderer
11 {
12
13 public var mytxt:Text;
14 public function CellColorItemRenderer()
15 {
16 super();
17 mytxt= new Text();
18 mytxt.width=this.width;
19 this.addChild(mytxt);
20 }
21
22 private var _data:Object;
23 override public function get data():Object
24 {
25 return _data;
26 }
27 override public function set data(value:Object):void
28 {
29 _data = value;
30 }
31
32 private var _listData:DataGridListData;
33
34 [Bindable( "dataChange" )]
35 public function get listData():BaseListData
36 {
37 return _listData;
38 }
39 public function set listData( value:BaseListData ):void
40 {
41 _listData = DataGridListData( value );
42 }
43
44 override public function validateNow():void
45 {
46 if(data!=null)
47 {
48 var item:XML=data as XML;
49
50 var dataField:String=DataGridListData(listData).dataField;
51 dataField=dataField.substring(1,dataField.length);
52
53 var valueInt:Number=Number(item.attribute(dataField).toString());
54 //getColor()方法为外部的任意方法，用来获取参数的颜色
55 var colo:uint=getColor(dataField,valueInt);
56 setStyle("backgroundColor",colo);
57 if(setOnFont(colo))
58 mytxt.setStyle("color",0xffffff);
59 else
60 mytxt.setStyle("color",0x0);
61 //setStyle("color",colo);
62 mytxt.width=this.width;
63 mytxt.text=valueInt.toString();
64 }
65 super.validateNow();
66 }
67
68 /**
69 * @private
70 * 如果颜色在字体的矩阵中，则改变字体的颜色为白色
71 * @param: 输入的颜色
72 * @return 是否设置字体颜色
73 */
74 private function setOnFont(colo:uint):Boolean
75 {
76 var blueRow1:uint=0;
77 var blueRow2:uint=13056;//3300
78 var greenRow1:uint=3342336;//330000
79 var greenRow2:uint=3355392;//333300 //蓝色
80 for(var i:int=0;i<6;i++)
81 {
82
83 if(colo==blueRow1)
84 return true;
85 if(colo==blueRow2)
86 return true;
87 if(colo==greenRow1)
88 return true;
89 if(colo==greenRow2)
90 return true;
91 blueRow1=blueRow1+51;
92 blueRow2=blueRow2+51;
93 greenRow1=greenRow1+51;
94 greenRow2=greenRow2+51;
95 }
96 return false;
97 }
98 }
99 }
在界面的使用
1 private function AddColumn(par:String):void
2 {
3 var dgColumn:DataGridColumn=new DataGridColumn(par);
4 dgColumn.dataField="@"+par;
5 var cellColorRenderer:ClassFactory=new ClassFactory(CellColorItemRenderer);
6 dgColumn.itemRenderer=cellColorRenderer;
7 grid.columns=grid.columns.concat(dgColumn);
8 }
9
10
11 /*
12 *remove last column
13 */
14 private function RemoveColumn():void
15 {
16 var columns:Array=this.grid.columns;
17 var column:Object=columns.pop();
18 this.grid.columns=columns;
19 }
20
21 private function ColumnIsExist(par:XML):Boolean
22 {
23 var ret:Boolean=false;
24 var columns:Array=this.grid.columns;
25 for each(var column:Object in columns)
26 {
27 if(par.@name==column.dataField)
28 {
29 ret=true;
30 break;
31 }
32 }
33 return ret;
34 }
35
36 private function AddRow(item:Object):void
37 {
38 if(this.da!=null)
39 this.da.appendChild(item);
40 }
41
42 private function RemoveRow(items:Array):void
43 {
44
45 for each(var item:XML in items)
46 {
47 delete item.parent().*[item.childIndex()];
48 }
49 }
50
51 private function RowIsExist(par:XML):Boolean
52 {
53 var ret:Boolean=false;
54 var items:Object=this.da..Item;
55 for each(var item:Object in items)
56 {
57 if(par.@test==item.@test)
58 {
59 ret=true;
60 break;
61 }
62 }
63 return ret;
64 }
65
66 <view:GridView id="grid" width="100%" height="100%" rowCount="1" dataProvider="{da.Item}" allowMultipleSelection="true" y="10">
67 <view:columns>
68 <mx:DataGridColumn id="test" dataField="@test" headerText="test"/>
69 <mx:DataGridColumn id="time" dataField="@time" headerText="Time"/>
70 </view:columns>
71 </view:GridView >
3 var dgColumn:DataGridColumn=new DataGridColumn(par);
4 dgColumn.dataField="@"+par;
5 var cellColorRenderer:ClassFactory=new ClassFactory(CellColorItemRenderer);
6 dgColumn.itemRenderer=cellColorRenderer;
7 grid.columns=grid.columns.concat(dgColumn);
8 }
9
10
11 /*
12 *remove last column
13 */
14 private function RemoveColumn():void
15 {
16 var columns:Array=this.grid.columns;
17 var column:Object=columns.pop();
18 this.grid.columns=columns;
19 }
20
21 private function ColumnIsExist(par:XML):Boolean
22 {
23 var ret:Boolean=false;
24 var columns:Array=this.grid.columns;
25 for each(var column:Object in columns)
26 {
27 if(par.@name==column.dataField)
28 {
29 ret=true;
30 break;
31 }
32 }
33 return ret;
34 }
35
36 private function AddRow(item:Object):void
37 {
38 if(this.da!=null)
39 this.da.appendChild(item);
40 }
41
42 private function RemoveRow(items:Array):void
43 {
44
45 for each(var item:XML in items)
46 {
47 delete item.parent().*[item.childIndex()];
48 }
49 }
50
51 private function RowIsExist(par:XML):Boolean
52 {
53 var ret:Boolean=false;
54 var items:Object=this.da..Item;
55 for each(var item:Object in items)
56 {
57 if(par.@test==item.@test)
58 {
59 ret=true;
60 break;
61 }
62 }
63 return ret;
64 }
65
66 <view:GridView id="grid" width="100%" height="100%" rowCount="1" dataProvider="{da.Item}" allowMultipleSelection="true" y="10">
67 <view:columns>
68 <mx:DataGridColumn id="test" dataField="@test" headerText="test"/>
69 <mx:DataGridColumn id="time" dataField="@time" headerText="Time"/>
70 </view:columns>
71 </view:GridView >
