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="[email protected]" firstName="zhang" lastName="san" phone="123456"/>
			<fx:Object email="[email protected]" 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>

其中还用到了行内渲染器