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
分享到:
相关推荐
注册ItemRenderer需要在主容器(如List或DataGrid)的itemRenderer属性中指定。例如: ```xml <List.itemRenderer> </List.itemRenderer> ``` 在这里,`local:AlbumItemRenderer`是我们的自定义...
本文将深入探讨Flex中ItemRenderer的使用方法。 首先,我们需要理解ItemRenderer的基本概念。ItemRenderer是一个轻量级组件,用于呈现数据列表中的单一数据项。当数据提供者中的每一项数据都需要不同的外观或行为时...
### 理解 Flex_itemRenderer #### 一、Flex_itemRenderer 概述 Flex_itemRenderer 是 Flex 框架中的一个重要概念,它主要用于定义列表、数据网格等控件中的每一项是如何呈现的。通过自定义 itemRenderer,开发者...
Flex内联itemRenderer是Adobe Flex框架中的一种技术,用于...总之,掌握Flex内联itemRenderer的使用,对于提升Flex应用的用户体验和视觉效果至关重要。通过实践和探索,你可以创造出更加生动、交互丰富的数据展示效果。
在Flex4中,ItemRenderer是一种强大的工具,用于自定义数据Grid、List或其他数据绑定组件中的项显示方式。本文将深入探讨如何使用Flex4...但这个例子已经足够说明了如何使用Flex4来创建和使用自定义的ItemRenderer。
在这个例子中,我们直接使用了Spark Label,并将`backgroundColor`属性绑定到了数据的`color`字段。 3. **在DataGrid中使用itemRenderer** 在`DataGrid`的`<mx:columns>`标签内,为需要显示不同背景色的列指定`...
本系列将深入探讨Flex的itemRenderer及其高效使用方法。 首先,我们了解一个基本概念:Flex的列表控件并不为每个数据项创建单独的渲染器实例。比如,如果你有一个包含1000条记录的列表,但只有10行在屏幕上可见,...
这个主题——“flex中ComboBox嵌套checkbox的例子以及源代码”——将深入探讨如何实现这种功能。 首先,我们要明白,Flex本身并不直接支持ComboBox内部包含Checkbox的原生功能。但是,通过自定义组件或者使用第三方...
这可以通过在MXML中使用`itemRenderer`属性或者在ActionScript中使用`setStyle("itemRenderer", MyCustomRenderer)`来完成。 4. **数据绑定** 数据绑定是项目渲染器的核心部分,它使得渲染器可以根据数据模型的...
在这个例子中,我们创建了一个Spark渲染器,显示数据对象的`title`和`description`属性。如果`isImportant`属性为真,描述文本将显示为红色。 在提供的文件列表中,我们看到`.mxml`文件,这可能是`Main.mxml`,它...
以下是一个简单的HTTPService使用的例子: ```actionscript (event)" fault="handleFault(event)"> ``` 这里,`url`属性定义了WebService的地址,`resultFormat`指定了返回数据的格式,`result`和`fault`事件处理...
在本文中,我们将深入探讨如何使用Flex技术来创建一个精美的相册,特别是利用HorizontalList组件。Flex是一种基于ActionScript的开发框架,广泛用于构建富互联网应用程序(RIA)。HorizontalList是Flex提供的一种...
在Flex中,我们可以使用自定义的ItemRenderer来实现子组件的插入。ItemRenderer是DataGrid的一个关键概念,它是每个数据显示单元的可重用视图。通过创建自定义的ItemRenderer类,我们可以自由地设计每个单元格的外观...
本文旨在详细介绍`itemEditor`的使用方法及其在Flex项目中的实际应用。 #### 二、理解Flex ItemEditor ##### 2.1 ItemEditor与ItemRenderer的区别 在深入探讨`itemEditor`之前,我们需要先了解它与`itemRenderer`...
在这个例子中,我们创建了一个ArrayCollection并绑定了它到List的dataProvider属性。ArrayCollection是ActionScript中的动态数组,支持双向绑定。我们还定义了一个自定义的itemRenderer(myRenderer),用于决定每个...
- **自定义`ToolTip`**:`itemRenderer`属性被用来指定每个列表项的渲染器,这里用到了`CustomToolTip`。`toolTipCreate`和`toolTipShow`事件处理器负责在适当的时机创建和显示`ToolTip`。 ### 4. 解析`Custom...
在DataGrid中,我们可以通过设置`itemRenderer`属性来指定特定列使用我们的自定义渲染器。例如: ```xml 数据列" dataField="yourDataField" itemRenderer="utils.MyCustomLabelRenderer"/> ``` 这里的`utils....
在Flex开发中,`ItemRenderer`是一个至关重要的组件,它定义了数据项在列表或网格控件中的显示方式。...通过学习和理解这些例子,开发者可以更好地掌握`ItemRenderer`在实际项目中的运用,提升Flex应用的用户体验。
4. **自定义列显示**:通过设置`itemRenderer`属性,可以自定义单元格的显示方式,以满足复杂的数据格式需求。 5. **排序和过滤**:DataGrid支持内置的排序功能,只需点击列头即可。也可以通过监听`sort`事件来实现...
然而,我们可以通过设置`itemRenderer`属性来自定义每个节点的显示。例如,我们可以显示"category"节点的"name"属性,同时显示"item"节点的文本。 此外,Tree组件还支持事件监听,比如`click`事件,可以捕捉用户的...