2.4使用数据项显示子元素(display children using data items)

Problem

利用项呈现器，把 数组元素所在容器显示出来。

Solution

利用DataGroup容器，设置dataProvider为IList接口的实现类，设置itemRendered为IDataRender实现类。

Discussion

DataGroup布局容器利用项呈现器呈现作为数据项的可视元素。不像Group容器，直接在MXML或者内容API

方法来处理可视元素，IList的实现（比如：mx.collections.ArrayCollection 或者mx.collections.XMLListCollection）

提供给DataGroup容器，项呈现器处理集合中各个数据项的可视化表现。在Flex4SDK含有两个比较方便的项

呈现类，可以用于简单的呈现数据。spark.skins.DefaultItemRenderer以文本形式呈现数据。然而spark.skins.DefaultComplexItemRenderer

可以呈现例如Spark和MX 集合等实现IvisualElement接口的数据项。

在下面的例子中，一个文本数据的数组被提供给DataGroup并利用DefaultItemRenderer：

	<fx:Declarations>
		<fx:String id="txt">
			loar gwe gwe gwegsdvgweg cb wdew ewewb cw 
		</fx:String>
	</fx:Declarations>
	<s:DataGroup itemRenderer="spark.skins.spark.DefaultItemRenderer">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:dataProvider>
			<s:ArrayCollection>
				<s:ArrayCollection source="{txt.split(' ')}"/>
			</s:ArrayCollection>
		</s:dataProvider>
	</s:DataGroup>

在DataGroup的dataProvider中的数据项从左到右水平排列。itemRenderer属性的值，一个限定的类名，被DataGroup容器用来

为集合中的每个数据项创建限定类的实例。如果类是IDataRenderer的实现，实现类的data属性，在集合初始化时，与集合中项一起更新。

DefaultComplexItemRenderer类可以用来呈现IVisualElement数据在DataGroup容器中：

	<s:DataGroup itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:dataProvider>
			<s:ArrayCollection>
				<s:Label text="using defaultcomplexItemrender"/>
				<s:Button label="button 1"/>
				<s:DropDownList dataProvider="{new ArrayCollection(txt.split(' '))}" />
				<s:CheckBox selected="true"/>
				<s:Button label="button 2" />
			</s:ArrayCollection>
		</s:dataProvider>
	</s:DataGroup>

当itemRenderer属性设置为DefaultComplexItemRenderer类，DataGroup内在决定每个数据项为IVisualElement实现

，直接在display上呈现数据项。

不像Group容器，子元素不能从DataGroup容器直接被访问。尽管子元素Group和DataGroup是IVisualElement的实现，Group

类暴露内容API通过实现IVisualElementContainer接口，来使你可以动态增加，删除，直接在容器里设置元素的索引。DataGroup的显示

列表可以通过将ILIst实例设置为dataProvider属性值来解决。因为dataProvider属性支持绑定，集合可以在运行时通过更新可视元素列表来

动态变化。

当项呈现器添加或移除从DataGroup容器的显示列表中，RendererExistenceEvent事件派发。

RendererExistenceEven实例的属性与项呈现器，提供给项项呈现器数据，显示列表中数据元素所在的索引。
下面的例子演示如何动态改变DataGroup容器的显示列表，监听项呈现实例的添加和移除。

<fx:Declarations>
		<fx:String id="txt">
			loar gwe gwe gwegsdvgweg cb wdew ewewb cw 
		</fx:String>
		<s:ArrayCollection id="collection">
			<s:Label text="using DefaultComplexItemRenderer" />
			<s:Button label="button 1"/>
			<s:DropDownList dataProvider="{new ArrayCollection(txt.split(''))}"/>
			<s:CheckBox selected="true"/>
			<s:Button label="button 2"/>
		</s:ArrayCollection>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import spark.events.RendererExistenceEvent;
			
			private function itemAdded(evt:RendererExistenceEvent):void {
				trace("Item added: "+evt.index +" : "+evt.data+
				" : "+evt.renderer);
			}
			
			private function itemRemoved(evt:RendererExistenceEvent):void {
				trace("Item removed: "+evt.index +" : "+evt.data+
					" : "+evt.renderer);
			}
			
			private function addItem():void {
				if(collection.length > 0) {
					myContent.dataProvider.addItem(collection.removeItemAt(0));
				}
			}
			
			private function removeItem():void {
				if(myContent.dataProvider.length >0) {
					var item:Object = myContent.dataProvider.removeItemAt(
						myContent.dataProvider.length-1);
					collection.addItem(item);
				}
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:DataGroup id="myContent"
				 rendererAdd="itemAdded(event);"
				 rendererRemove="itemRemoved(event);"
				 itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		<s:dataProvider>
			<s:ArrayCollection/>
		</s:dataProvider>
	</s:DataGroup>
	<s:Button label="add" click="addItem();"/>
	<s:Button label="remove" click="removeItem();"/>

本人翻译水平有限，不足之处，请多多指正，希望自己坚持到底，每次都有点进步。 

Aprial First in 2014