`
glsjay
  • 浏览: 11037 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

对itemrenderer的一些认知(1)-理解data driven

阅读更多
第一阶段的快完成了,回想一下做的过程中遇到问题,分成好几个写下来,希望对大家有帮助

首先是itemrenderer,刚开始的过程对我来说太痛苦了,在还没有充分理解它之前,简直是太二了。其中经典问题之一就是滚动后数据错位和保存的问题,小谈一下:

关键在于itemrenderer是一种data driven的东西,adobe为了提高performance会在可见的范围内建立n+1或2个itemrenderer,这就是为什么会出现拉动滚动条后出现错位的情况,因为滚动后出现的itemrenderer并不是全新的,而是沿用了滚动前已经建好了的,如果你没有重设新建的行的itemrenderer的data属性,新建的itemrender就会分配到的之前已经建好的并延用的itemrenderer的属性,比如背景颜色,选中的项等等。

所以,一定要在itemrenderer里override set data(),并且在这个set方法里用if else判定属性的变化重设各种属性,才能使每一次新建的itemrenderer都是类似于新的。而且如果想对某个itemrenderer做变化并记录,一定要用一个变量去记录,这个变量可以是定义
1. 在这个itemrenderer的容器里,
2. 或更直观的用类似于data.name这种方式去记录,

千万不能是随意一个定义在itemrenderer里的变量,这样下一次重建这行的temrenderer的时候系统就会找到这个已经存在的变量,并且赋给这个itemrenderer。这样你就能用这个变量去改变这个itemrenderer了

这个文章讲的非常好,这个文章讲的非常好,看完之后能知道原理,下面有例子,能帮助理解和自己使用
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html

这是我用到的一个combobox的itemrenderer,里面还有一些别的tricks,之后再详说,现在主要看data那块:

	
	public class ActionComboBoxRenderer extends ComboBox
	{
		public function ActionComboBoxRenderer(){
			super();
		}
		
		override protected function createChildren():void{
			super.createChildren();
		}
		
		public var actionList:ArrayCollection;
		public var selectedAction:ActionVo;
      //这些量是用来跟父容器交互的
		public var currentOwner:LinkageIPPDataGrid;
		public var currentOwnerDataProvider:ArrayCollection;
		public var index:int;
		
		override public function set data(value:Object):void {
			super.data = value; 		// this must be called
			currentOwner = new LinkageIPPDataGrid();
			currentOwner = owner as LinkageIPPDataGrid;
	
			this.dataProvider = null;
                        
         //因为我每点一次这个combobox都问后台要数据做dataProvider,所以要听这两个events
			this.addEventListener(DropdownEvent.OPEN, this.loadActionList);
			this.addEventListener(ListEvent.CHANGE , this.handleSelect);
			//这个就是用来检查属性的改变的方法
			checkActionSelect();
		}
		
		public function checkActionSelect():void{

        //获得父容器的信息
			currentOwnerDataProvider = currentOwner.dataProvider as ArrayCollection;
			index = currentOwnerDataProvider.getItemIndex(data);
			var obj:Object = currentOwnerDataProvider.getItemAt(index);
			

			if(obj.selectedAction){
				data.selectAct = obj.selectedAction;
			}
			
         //这一块是关键,就是这里体现了对属性的改变,一定要用if和else,如果漏了else,就等着错位吧
			if(data.selectAct){
				this.prompt = data.selectAct.actionName;
				if(data.selectAct.actionId == "2"){
					this.setStyle("chromeColor", 0x00CC00);
				}
				else if(data.selectAct.actionId == "3"){
					this.setStyle("chromeColor", 0xff1d23);
				}					
			}else{
				this.prompt = "Select";
				this.setStyle("chromeColor", "white");
			} 
		}
		

		public function loadActionList(event:DropdownEvent):void{
			this.removeEventListener(DropdownEvent.OPEN, loadActionList);
			LinkageHttpService.getInstance().addEventListener(ActionListRendererEvent.ACTION_LIST, 
				handleActionListData);
			LinkageHttpService.getInstance().getActionList();	
		}

        //对后台数据的请求和对选择了数据的				
		public function handleActionListData(event:ActionListRendererEvent):void{
			this.actionList = event.dataCollection;
			this.dataProvider = actionList;
			this.labelField = "actionName";		
			this.open();
			LinkageHttpService.getInstance().removeEventListener(ActionListRendererEvent.ACTION_LIST, 
				handleActionListData);
		}
	  //对选择了数据的保存,是通过用event传给从父容器并用自身data.selectAct来保存	
		public function handleSelect(event:ListEvent):void{
			currentOwnerDataProvider = currentOwner.dataProvider as ArrayCollection;
			index = currentOwnerDataProvider.getItemIndex(data);
			
			this.selectedAction = actionList.getItemAt(this.selectedIndex) as ActionVo;
			if(this.selectedAction is ActionVo){
				if(this.selectedAction.actionId == "2"){
					this.setStyle("chromeColor", 0x00CC00);
				}else this.setStyle("chromeColor", 0xff1d23);
			}else this.setStyle("chromeColor", 0xffffff);
			
			this.data.selectAct = selectedAction;
			this.dispatchEvent(new ActionSelectEvent("actionSelected", selectedAction, index));	
		}
		
		override public function validateNow():void{
			super.validateNow();
			this.height = 26;
			this.y += 8;
		} 
	}




好吧,code单独拿出来可能不容易看懂,但要看的重点应该够清楚,下次再讲讲里面的比如父容器交互的问题吧

分享到:
评论

相关推荐

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

    本篇文章将深入探讨如何利用ItemRenderer实现一个灵活且功能丰富的相册示例,同时也会涉及Flex中的一些核心概念和编程技巧。 首先,我们需要了解ItemRenderer的基本结构。ItemRenderer是ActionScript类,通常继承自...

    理解_Flex_itemRenderer.pdf

    在Flex中,itemRenderer是一个非常重要的概念,它允许开发者对列表、数据网格、树等数据组件的显示方式进行定制。 在本文中,将首先介绍内联itemRenderer的概念和使用方法,然后探讨itemRenderer的设计目的和Flex...

    理解 Flex_itemRenderer

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

    Flex itemRenderer的详细教程

    ### Flex ItemRenderer 的详细教程 #### 一、ItemRenderer 概述 在 Flex 开发中,ItemRenderer 是一种非常强大的工具,它允许开发者自定义列表(List)、数据网格(DataGrid)等控件中每一项的外观和行为。通过 ...

    flex4做的itemrenderer呈现器

    1. **创建ItemRenderer**: 要创建一个ItemRenderer,首先需要创建一个新的MXML文件,例如`friendItem.mxml`。在这个文件中,我们需要继承自`mx.controls.listClasses.ItemRenderer`或`spark.components....

    Flex 定制ItemRender详细解释

    1. **ItemRenderer的基本概念**: - ItemRenderer是Flex中用于显示数据集中的单个数据项的轻量级组件。它们通常与List、DataGrid或其他数据绑定控件一起使用。 - ItemRenderers是可重用的,每个实例对应数据集中的...

    itemrenderer help

    通过理解ItemRenderer的工作原理及其生命周期,可以有效地提高应用程序的性能和用户体验。无论是简单的文本展示还是复杂的UI布局设计,ItemRenderer都能够胜任,使开发者能够充分发挥创造力,构建出更加丰富和实用的...

    Flex手机项目自定义List的ItemRenderer

    在Flex手机项目开发中,创建自定义的List组件ItemRenderer是一项常见的需求,目的是为了提供更加丰富和个性...在项目文件"ListPro"中,你可能找到了更多关于这个话题的示例和代码,这将进一步加深你对这个主题的理解。

    内渲染器_ItemRenderer

    - 例如,如果内渲染器名为`MyItemRenderer1`,则在List的MXML代码中,可以这样设置:`<s:List itemRenderer="components.MyItemRenderer1"/>` - 可以通过在内渲染器中添加事件监听器来处理用户与列表项的交互,如...

    flex itemRenderer 渲染机制的概念和使用

    Flex中的itemRenderer是一种关键的组件渲染机制,它允许开发者自定义列表或数据集项的显示方式。在Flex应用中,特别是在处理数据集如...正确理解和运用itemRenderer,能够极大地提升Flex应用的用户体验和功能表现。

    flex中的渲染器(itemrenderer)

    flex中经常会使用到渲染器,这里简要介绍一下渲染器的一些知识

    Flex中itemRenderer的使用简介

    Flex提供了一些默认的ItemRenderer,但通常我们会根据项目需求创建自定义的ItemRenderer。 创建自定义ItemRenderer通常涉及以下几个步骤: 1. **创建新的MXML或ActionScript类**: 创建一个新的MXML文件,例如`...

    Flex项呈示器ItemRenderer

    1. **创建新类**:首先,我们需要创建一个新的ActionScript类继承自`mx.controls.ListItemRenderer`或`spark.components.supportClasses.ItemRenderer`(Spark架构下)。例如,我们可以创建一个名为`...

    itemRenderer 提前加载问题

    1. **按需加载**:仅在需要显示特定数据项时才创建对应的ItemRenderer,而不是一次性加载所有。 2. **缓存策略**:对于已创建但不再显示的ItemRenderer,可以将其缓存起来,以便再次需要时快速复用,减少新实例的...

    ItemRenderer的用法

    在ActionScript和Flex开发中,`ItemRenderer`是一种关键组件,用于...其他文件,如`.project`和`.actionScriptProperties`,是开发环境配置文件,对理解`ItemRenderer`本身的作用不大,但它们有助于构建和调试项目。

    Flex内联itemRenderer

    通过研究这些示例,你可以更深入地理解如何根据实际需求设计和实现内联itemRenderer。例如,你可能会看到如何处理鼠标悬停事件、添加点击事件监听器,或者如何在itemRenderer中嵌入自定义组件等。 总之,掌握Flex...

    ActionScript_ItemRenderer

    1. **创建新类**:首先,你需要创建一个新的ActionScript类,继承自MX或Spark的内置ItemRenderer类,例如`mx.controls.listClasses.ListItemRenderer`或`s:IconItemRenderer`。例如,你可以创建名为`MyItemRenderer2...

    DataGrid的itemRenderer and HeaderRenderer

    在Flex和Adobe AIR开发中,`DataGrid`控件是一种常用的数据展示组件,它能够以表格形式展示数据集合。...在实际开发中,要确保对`itemRenderer`和`headerRenderer`的定制既满足业务需求,又保持良好的性能和用户体验。

    Flex ItemRenderer

    1. **创建ItemRenderer**: 你可以通过Flex Builder或IntelliJ IDEA等IDE创建一个新的ActionScript类,继承自`mx.controls.listClasses.ItemRenderer`或`s.components.supportClasses.ListBaseItemRenderer`,然后在...

    flex 4 学习资料

    基于flex4技术从零开发flex博客系统 : 1 开发环境配置与hello world(1) - 豆豆网 flex+blazeDs与Ext+dwr比较_蓝色幻想_百度空间 基于blazeDS的flex4与spring的程序实例步骤 - dreamming_now的专栏 - CSDN博客 在...

Global site tag (gtag.js) - Google Analytics