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