`
zhouyangchenrui
  • 浏览: 81848 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

Flex的itemRenderer属性使用例子

阅读更多
flex的部分组件有itemRenderer属性,这是个非常有用的属性,通过它同一个组件可以创建出各式漂亮的外观来。下面通过做一个例子展示其效果,例子展示的效果包括对栅格控制颜色显示,增加图片和文本。
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"!=data.@col1.toString()){
					return 0x03f066;
				}
				//设置第八行显示颜色
				if("2107"==data.@col1.toString()){
					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"==data.@col1){return you;}
			if("2102"==data.@col1){return liang;}
			if("2103"==data.@col1){return cha;}
			return hao;
		}
		
		private function getText(data:Object):String {
			if(data==null) return null;
			if("2101"==data.@col1){return "优";}
			if("2102"==data.@col1){return "良";}
			if("2103"==data.@col1){return "差";}
			return "好";
		}
	]]> 
	</mx:Script> 
	<mx:Label id="serial" text="{this.data.@col1}"/>
	<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>




6、不同的业务需求要求不同的处理效果,就要写符合要求的组件。这里关键是要掌握felx类库对该属性提供的支持,继承或实现什么借口,或者覆写什么方法能达到效果,其默认的传递数据格式等。
  • 大小: 33.2 KB
  • 大小: 40.8 KB
5
0
分享到:
评论
1 楼 mfdefs 2010-04-06  
谢谢太好了

相关推荐

    flex itemRenderer深入学习--flex相册例子

    注册ItemRenderer需要在主容器(如List或DataGrid)的itemRenderer属性中指定。例如: ```xml &lt;List.itemRenderer&gt; &lt;/List.itemRenderer&gt; ``` 在这里,`local:AlbumItemRenderer`是我们的自定义...

    Flex中itemRenderer的使用简介

    本文将深入探讨Flex中ItemRenderer的使用方法。 首先,我们需要理解ItemRenderer的基本概念。ItemRenderer是一个轻量级组件,用于呈现数据列表中的单一数据项。当数据提供者中的每一项数据都需要不同的外观或行为时...

    理解 Flex_itemRenderer

    ### 理解 Flex_itemRenderer #### 一、Flex_itemRenderer 概述 Flex_itemRenderer 是 Flex 框架中的一个重要概念,它主要用于定义列表、数据网格等控件中的每一项是如何呈现的。通过自定义 itemRenderer,开发者...

    Flex内联itemRenderer

    Flex内联itemRenderer是Adobe Flex框架中的一种技术,用于...总之,掌握Flex内联itemRenderer的使用,对于提升Flex应用的用户体验和视觉效果至关重要。通过实践和探索,你可以创造出更加生动、交互丰富的数据展示效果。

    flex4做的itemrenderer呈现器

    在Flex4中,ItemRenderer是一种强大的工具,用于自定义数据Grid、List或其他数据绑定组件中的项显示方式。本文将深入探讨如何使用Flex4...但这个例子已经足够说明了如何使用Flex4来创建和使用自定义的ItemRenderer。

    Flex中如何根据每行内容设置不同底色

    在这个例子中,我们直接使用了Spark Label,并将`backgroundColor`属性绑定到了数据的`color`字段。 3. **在DataGrid中使用itemRenderer** 在`DataGrid`的`&lt;mx:columns&gt;`标签内,为需要显示不同背景色的列指定`...

    flex中渲染器简介

    本系列将深入探讨Flex的itemRenderer及其高效使用方法。 首先,我们了解一个基本概念:Flex的列表控件并不为每个数据项创建单独的渲染器实例。比如,如果你有一个包含1000条记录的列表,但只有10行在屏幕上可见,...

    flex中ComboBox嵌套checkbox的例子以及源代码

    这个主题——“flex中ComboBox嵌套checkbox的例子以及源代码”——将深入探讨如何实现这种功能。 首先,我们要明白,Flex本身并不直接支持ComboBox内部包含Checkbox的原生功能。但是,通过自定义组件或者使用第三方...

    flex+as3项目渲染器的使用

    这可以通过在MXML中使用`itemRenderer`属性或者在ActionScript中使用`setStyle("itemRenderer", MyCustomRenderer)`来完成。 4. **数据绑定** 数据绑定是项目渲染器的核心部分,它使得渲染器可以根据数据模型的...

    ItemRenderer的用法

    在这个例子中,我们创建了一个Spark渲染器,显示数据对象的`title`和`description`属性。如果`isImportant`属性为真,描述文本将显示为红色。 在提供的文件列表中,我们看到`.mxml`文件,这可能是`Main.mxml`,它...

    flex与数据库交互

    以下是一个简单的HTTPService使用的例子: ```actionscript (event)" fault="handleFault(event)"&gt; ``` 这里,`url`属性定义了WebService的地址,`resultFormat`指定了返回数据的格式,`result`和`fault`事件处理...

    Flex创建精美相册(HorizontalList)

    在本文中,我们将深入探讨如何使用Flex技术来创建一个精美的相册,特别是利用HorizontalList组件。Flex是一种基于ActionScript的开发框架,广泛用于构建富互联网应用程序(RIA)。HorizontalList是Flex提供的一种...

    Flex DataGrid 插入子组件

    在Flex中,我们可以使用自定义的ItemRenderer来实现子组件的插入。ItemRenderer是DataGrid的一个关键概念,它是每个数据显示单元的可重用视图。通过创建自定义的ItemRenderer类,我们可以自由地设计每个单元格的外观...

    Flex itemEditor详解

    本文旨在详细介绍`itemEditor`的使用方法及其在Flex项目中的实际应用。 #### 二、理解Flex ItemEditor ##### 2.1 ItemEditor与ItemRenderer的区别 在深入探讨`itemEditor`之前,我们需要先了解它与`itemRenderer`...

    flex android开发学习好实例

    在这个例子中,我们创建了一个ArrayCollection并绑定了它到List的dataProvider属性。ArrayCollection是ActionScript中的动态数组,支持双向绑定。我们还定义了一个自定义的itemRenderer(myRenderer),用于决定每个...

    Flex 自定义ToolTip

    - **自定义`ToolTip`**:`itemRenderer`属性被用来指定每个列表项的渲染器,这里用到了`CustomToolTip`。`toolTipCreate`和`toolTipShow`事件处理器负责在适当的时机创建和显示`ToolTip`。 ### 4. 解析`Custom...

    flex 自定义dataGrid渲染器.根据数据变色

    在DataGrid中,我们可以通过设置`itemRenderer`属性来指定特定列使用我们的自定义渲染器。例如: ```xml 数据列" dataField="yourDataField" itemRenderer="utils.MyCustomLabelRenderer"/&gt; ``` 这里的`utils....

    ItemRanderer Examples

    在Flex开发中,`ItemRenderer`是一个至关重要的组件,它定义了数据项在列表或网格控件中的显示方式。...通过学习和理解这些例子,开发者可以更好地掌握`ItemRenderer`在实际项目中的运用,提升Flex应用的用户体验。

    flex 数据绑定 dataGrid.rar

    4. **自定义列显示**:通过设置`itemRenderer`属性,可以自定义单元格的显示方式,以满足复杂的数据格式需求。 5. **排序和过滤**:DataGrid支持内置的排序功能,只需点击列头即可。也可以通过监听`sort`事件来实现...

    Flex Tree XML

    然而,我们可以通过设置`itemRenderer`属性来自定义每个节点的显示。例如,我们可以显示"category"节点的"name"属性,同时显示"item"节点的文本。 此外,Tree组件还支持事件监听,比如`click`事件,可以捕捉用户的...

Global site tag (gtag.js) - Google Analytics