flex4 学习笔记-flex项目渲染器

Flex试用Label控件作为默认的项目渲染器.这个默认渲染的作用只是渲染提供给它的文本,当指定一个项目渲染器的时候,

就会用自定义渲染器覆盖默认的渲染器.

具体过程如下

• Flex为集合中的每个对象创建一个渲染器实例
• 创建每个渲染器时,会出发creationComplete事件
• creationComplete的监听器函数检查下一个对象,确定是否已经为该对象创建了一个渲染器.如果还没有,就会创建一个新的渲染器,冰将其data属性设为数据对象自身,这样就可以在需要时提取被调用的任何必要的值.

  但是有一个地方需要注意

  处于性能方面考虑,Flex会重用已有的行--如果需要显示1000个对象,那么它不会同时生成1000行;相反,它会生成与在当前屏幕上显示所需的行数相同的行,如果行数为1,这就意味着没绘制一行的时候.可能会存在一些时间上的延迟,因为下一行数据并不是在滚动事件发生前加载的

  
  

  为了避免这个问题,需要按照下列步骤进行操作

  • 继续试用creationComplete事件初始化项目渲染器,例如,ArrayCollection可能尚未被填充.或者,也可以重写data设置器
  • 试用dataChange事件检查是否需要加载后面一些行和前面一些行
  • 重写UIComponent类的以下方法:invalidateDisplay,updateDisplayList.invalidateProperties,updateProperties和updateDisplayList.一定要在其中每个方法中调用super,并添加创建后面一些行和前面一些行的逻辑,以便用户滚动鼠标时能够显示它们,但是将这些行各自的visbile属性设为false
  
  
  下面是改进后的项目渲染器
  
  
  
  
  
  

  <?xml version="1.0" encoding="utf-8"?>
  <mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
  		 xmlns:s="library://ns.adobe.com/flex/spark" 
  		 xmlns:mx="library://ns.adobe.com/flex/mx"
  		 width="100%"
  		 creationComplete="initDisplay()"
  		 dataChange="checkEmail()"
  		 >
  	<fx:Script>
  		<![CDATA[
  			import flash.net.navigateToURL;
  			
  			import mx.events.FlexEvent;
  			
  			private function initDisplay():void
  			{
  				//emailButton.visible = false;
  			}
  			
  			private function checkEmail():void
  			{
  				if(data.email.length>0)
  					emailButton.visible = true;
  				else
  					emailButton.visible = false;
  			}
  			
  			private function sendMail():void
  			{
  				var u:URLRequest = new URLRequest("mailto:" + data.email);
  				navigateToURL(u, "_self");
  			}
  			
  		]]>
  	</fx:Script>
  	<fx:Declarations>
  		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
  	</fx:Declarations>
  	<s:Button id="emailButton" visible="false" label="Send Email" click="sendMail()"
  </mx:HBox>
  

  
  下面是使用代码
  
  

  <?xml version="1.0" encoding="utf-8"?>
  <!-- 多列标签函数 -->
  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  			   xmlns:s="library://ns.adobe.com/flex/spark"
  			   xmlns:mx="library://ns.adobe.com/flex/mx">
  	<s:layout>
  		<s:VerticalLayout paddingLeft="20" paddingTop="20"/>
  	</s:layout>
  	<fx:Declarations>
  		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
  		<s:ArrayCollection id="myAC">
  			<fx:Object email="hello@qq.com" firstName="zhang" lastName="san" phone="123456"/>
  			<fx:Object email="hello@qq.com" firstName="li" lastName="si" phone="654321"/>
  		</s:ArrayCollection>
  	</fx:Declarations>
  	
  	<mx:DataGrid id="dg" width="500" height="100" dataProvider="{myAC}">
  		<mx:columns>
  			<mx:DataGridColumn headerText="Name">
  				<mx:itemRenderer>
  					<fx:Component>
  						<mx:Text text="{data.firstName} {data.lastName}"/>
  					</fx:Component>
  				</mx:itemRenderer>
  			</mx:DataGridColumn>
  			<mx:DataGridColumn headerText="Email" itemRenderer="CH10.myRenderer"/>
  		</mx:columns>
  	</mx:DataGrid>
  </s:Application>

  
  其中还用到了行内渲染器