Flex的itemRenderer属性使用例子
程序员文章站
2022-07-07 23:19:20
...
flex的部分组件有itemRenderer属性，这是个非常有用的属性，通过它同一个组件可以创建出各式漂亮的外观来。下面通过做一个例子展示其效果，例子展示的效果包括对栅格控制颜色显示，增加图片和文本。
1、新建一个应用文件dataGridTest.mxml，这是主文件
2、新建CellColorIFactory.as和CellColorItemRenderer.as文件，这里是通过实现IFactory接口的方式实现，CellColorItemRenderer继承了DataGridItemRenderer，覆写了set data方法，用来设置文本的显示颜色。
3、新建StatusIFactory.as和statusItemRenderer.mxml文件，同样是用到了IFactory接口，statusItemRenderer组件重新定义了现实样式，包括添加状态图片和文本。小图片放在工程根目录下的resources文件夹中。
4、例子中用到了
private var itemRender:IFactory = new CellColorIFactory(cellColor);
private var itemRenderImg:IFactory = new StatusIFactory();
的方式定义一个itemRenderer，然后通过引用变量名称；也可以直接在组件中以属性的方式引用（要保证引用的文件路径正确）
<mx:DataGridColumn headerText="学号" dataField="@col1" itemRenderer="statusItemRenderer" textAlign="left" id="column"/>
5、例子的students.xml数据和效果。
[img]http://dl.iteye.com/upload/attachment/149641/ece6534a-a346-341b-8f61-9a7f14580f6f.jpg[/img]
[img]http://dl.iteye.com/upload/attachment/149642/b22448e1-4f06-38a6-9078-247e980f64ee.jpg[/img]
6、不同的业务需求要求不同的处理效果，就要写符合要求的组件。这里关键是要掌握felx类库对该属性提供的支持，继承或实现什么借口，或者覆写什么方法能达到效果，其默认的传递数据格式等。
1、新建一个应用文件dataGridTest.mxml，这是主文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
initialize="init()" width="600" height="600">
<mx:Script>
<![CDATA[
import com.test.StatusIFactory;
import com.test.CellColorIFactory;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
//定义渲染器
private var itemRender:IFactory = new CellColorIFactory(cellColor);
private var itemRenderImg:IFactory = new StatusIFactory();
private var dataXml:XML;
private function init():void {
dataXmlService.url = "students.xml";//可改成具体请求方式
try{
dataXmlService.send();
}catch(e:IOError){
Alert.show("请求出错");
}
}
private function dataXmlToData(evt:ResultEvent):void{
dataXml = XML(evt.result);
dataGrid.dataProvider = dataXml.children();
//使用渲染，使行列显示不同的颜色
dataGrid.itemRenderer = itemRender;
grid.dataProvider = dataXml.children();
//使用渲染，增加显示图片和状态文字
column.itemRenderer = itemRenderImg;
}
//定义渲染器中用到的回调函数
private function cellColor(dataField:String,data:XML):uint{
//设置前两页显示颜色
if((dataField=="col1" || dataField=="col2") && "2107"[email protected]()){
return 0x03f066;
}
//设置第八行显示颜色
if("2107"[email protected]()){
return 0x0000FF;
}
//设置默认显示颜色
return 0x000000;
}
]]>
</mx:Script>
<mx:HTTPService id="dataXmlService" resultFormat="xml" result="dataXmlToData(event)" />
<mx:DataGrid id="dataGrid" x="26" y="10" width="543" height="270" fontSize="12" textAlign="center">
<mx:columns>
<mx:DataGridColumn headerText="学号" dataField="@col1"/>
<mx:DataGridColumn headerText="姓名" dataField="@col2"/>
<mx:DataGridColumn headerText="年龄" dataField="@col3"/>
<mx:DataGridColumn headerText="爱好" dataField="@col4"/>
<mx:DataGridColumn headerText="住址" dataField="@col5"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid id="grid" x="26" y="288" width="543" height="302" fontSize="12" textAlign="center">
<mx:columns>
<mx:DataGridColumn headerText="学号" dataField="@col1" textAlign="left" id="column"/>
<mx:DataGridColumn headerText="姓名" dataField="@col2"/>
<mx:DataGridColumn headerText="年龄" dataField="@col3"/>
<mx:DataGridColumn headerText="爱好" dataField="@col4"/>
<mx:DataGridColumn headerText="住址" dataField="@col5"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>2、新建CellColorIFactory.as和CellColorItemRenderer.as文件，这里是通过实现IFactory接口的方式实现，CellColorItemRenderer继承了DataGridItemRenderer，覆写了set data方法，用来设置文本的显示颜色。
package com.test
{
import mx.core.IFactory;
//必须要实现IFactory接口
public class CellColorIFactory implements IFactory
{
//回调方法
private var _cellColorFunction:Function ;
public function CellColorIFactory(f:Function){
super();
this._cellColorFunction = f;
}
public function newInstance():*{
//实例化渲染器，实现具体功能
return new CellColorItemRenderer(_cellColorFunction);
}
}
} package com.test
{
import mx.controls.dataGridClasses.DataGridItemRenderer;
import mx.controls.dataGridClasses.DataGridListData;
public class CellColorItemRenderer extends DataGridItemRenderer
{
//传递回调函数
private var _cellColorFunction:Function ;
public function CellColorItemRenderer(f:Function)
{
super();
this._cellColorFunction = f;
}
override public function set data(value:Object):void
{
if(value != null)
{
var data:XML = XML(value);
super.data = value;
//调用父类的public function get listData():BaseListData
var dataField:String = DataGridListData(listData).dataField;
while(dataField.indexOf("@")!=-1)
dataField = dataField.replace("@","");
//改变颜色；两个参数，dataField表示数据列（名称），data表示一行数据
setStyle("color", this._cellColorFunction.call(this,dataField,data));
}
}
}
}3、新建StatusIFactory.as和statusItemRenderer.mxml文件，同样是用到了IFactory接口，statusItemRenderer组件重新定义了现实样式，包括添加状态图片和文本。小图片放在工程根目录下的resources文件夹中。
package com.test
{
import mx.core.IFactory;
//必须要实现IFactory接口
public class StatusIFactory implements IFactory
{
public function StatusIFactory(){
super();
}
public function newInstance():*{
//实例化渲染器，实现具体功能
return new statusItemRenderer();
}
}
}<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0.0" width="100%"
horizontalAlign="center">
<mx:Script>
<![CDATA[
[Embed(source="../resources/you.png")]
private static const you:Class;
[Embed(source="../resources/liang.png")]
private static const liang:Class;
[Embed(source="../resources/hao.png")]
private static const hao:Class;
[Embed(source="../resources/cha.png")]
private static const cha:Class;
private function getImage(data:Object):Object {
if(data==null) return null;
if("2101"[email protected]){return you;}
if("2102"[email protected]){return liang;}
if("2103"[email protected]){return cha;}
return hao;
}
private function getText(data:Object):String {
if(data==null) return null;
if("2101"[email protected]){return "优";}
if("2102"[email protected]){return "良";}
if("2103"[email protected]){return "差";}
return "好";
}
]]>
</mx:Script>
<mx:Label id="serial" text="{[email protected]}"/>
<mx:Image id="stateImage" source="{getImage(this.data)}"/>
<mx:Label id="stateText" text="{getText(this.data)}"/>
</mx:HBox>
4、例子中用到了
private var itemRender:IFactory = new CellColorIFactory(cellColor);
private var itemRenderImg:IFactory = new StatusIFactory();
的方式定义一个itemRenderer，然后通过引用变量名称；也可以直接在组件中以属性的方式引用（要保证引用的文件路径正确）
<mx:DataGridColumn headerText="学号" dataField="@col1" itemRenderer="statusItemRenderer" textAlign="left" id="column"/>
5、例子的students.xml数据和效果。
<?xml version="1.0" encoding="UTF-8"?>
<datas>
<data col1="2100" col2="张三" col3="20" col4="篮球" col5="北京" />
<data col1="2101" col2="张四" col3="21" col4="篮球" col5="北京" />
<data col1="2102" col2="张五" col3="22" col4="篮球" col5="北京" />
<data col1="2103" col2="张六" col3="20" col4="篮球" col5="北京" />
<data col1="2104" col2="张七" col3="22" col4="篮球" col5="北京" />
<data col1="2105" col2="张八" col3="22" col4="篮球" col5="北京" />
<data col1="2106" col2="李四" col3="20" col4="篮球" col5="北京" />
<data col1="2107" col2="张大" col3="21" col4="篮球" col5="北京" />
<data col1="2108" col2="张关" col3="21" col4="篮球" col5="北京" />
<data col1="2109" col2="张看" col3="20" col4="篮球" col5="北京" />
</datas>[img]http://dl.iteye.com/upload/attachment/149641/ece6534a-a346-341b-8f61-9a7f14580f6f.jpg[/img]
[img]http://dl.iteye.com/upload/attachment/149642/b22448e1-4f06-38a6-9078-247e980f64ee.jpg[/img]
6、不同的业务需求要求不同的处理效果，就要写符合要求的组件。这里关键是要掌握felx类库对该属性提供的支持，继承或实现什么借口，或者覆写什么方法能达到效果，其默认的传递数据格式等。
上一篇： 黑马程序员_毕向东_Java基础****学习笔记（十五）
下一篇： c语言中令人迷惑的局部静态变量
推荐阅读
-
基于IView中on-change属性的使用详解
-
Winform中在使用Dock属性设计页面布局控件的顺序导致页面效果不同的问题
-
详谈js使用in和hasOwnProperty获取对象属性的区别
-
修正IE下使用CSS属性overflow的bug
-
iOS中使用schema协议调用APP和使用iframe打开APP的例子分析
-
Flex中创建一个简单计算器的例子
-
Python中使用glob和rmtree删除目录子目录及所有文件的例子
-
iOS 【使用第三方字典转模型时增加额外的属性】
-
Python中property属性的概论和使用方法
-
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用