Flex:使用项目渲染器

Posted 2021-02-26

There are 3 different ways to use Item Renderers.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="500">
	<!--
	A. Custom Item Renderers
		1. Item Renderers are components that are used to customize cells in any of the list-based controls
			a. It can be a column in a data-grid or a row in a list
			b. Whenever you've seen a list of items, each element in the list has been generated by some class used as an item renderer
		2. In the <mx:List> example below, each item in the list is generated by an item renderer, this is done by default
			a. The <mx:List> uses the ListItemRenderer Class
			b. The ListItemRenderer looks into the dataProvider for the Label Text and uses that to create a TextField to display
			c. We can customize our own ItemRenderers so that we don't have to only use the TextField class to display data
		3. 3 Different ways to implement ItemRenderers
			a. Drop-in item renderers
				i.  Uses an existing Flex Component
				ii. They are defined using the obj.itemRenderer of the <mx:List> class
			b. Inline item renderers
				i.  Use your own Custom Component.  
				ii. They are written inline and found in the same <mx:List> class instance
			c. Component item renderers
				i.  They're defined similar to Drop-in renderers (obj.itemRenderer)
				ii. Defined outside of the template, just like usual components
	B. The obj.data Property
		1. obj.data property IS NOT defined in UIComponent
		2. Instead you have to implement the IDataRenderer interface
			i.  This will implement the obj.data property in your component
			ii. And then you'll be able to use that component as an item renderer
			iii. In these examples, <mx:List> and <mx:Hbox> already use IDataRenderer by default
	-->
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
 
			[Bindable]
			private var listAC:ArrayCollection = new ArrayCollection([
				{ label:'Photoshop', os:'Windows', data: 1 },
				{ label:'Flash CS4', os:'Macintosh', data: 2 },
				{ label:'Flex', os:'Ubuntu', data: 3 },
			]);						
		]]>
	</mx:Script>
 
	<!-- Drop-in item renderer -->
	<mx:List dataProvider="{listAC}" x="10" y="10" />	
	<mx:List dataProvider="{listAC}" x="110" y="10" itemRenderer="mx.controls.Label" />
 
	<!-- Inline item renderer -->
	<mx:List dataProvider="{listAC}" x="210" y="10">
		<mx:itemRenderer>
			<mx:Component>
				<mx:Label text="{data.label}" />
			</mx:Component>
		</mx:itemRenderer>
	</mx:List>
 
	<mx:List dataProvider="{listAC}" x="310" y="10">
		<mx:itemRenderer>
			<mx:Component>
				<mx:HBox>
					<mx:Label text="{data.os}" />
					<mx:Label text="{data.label}" />
				</mx:HBox>
			</mx:Component>
		</mx:itemRenderer>
	</mx:List>
 
	<!-- Component item renderer -->
	<mx:List dataProvider="{listAC}" x="510" y="10" itemRenderer="com.theflexshow.CustomRenderer" />
</mx:Application>