4 Display Children Using Data Items
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (8.09 MB, 764 trang )
The data items in the dataProvider of the DataGroup are positioned horizontally from
left to right and rendered using the supplied itemRenderer. The value of the
itemRenderer property, a qualified class name, is used internally by the DataGroup container to create a new instance of the specified class for each data item in the collection.
If the class is an IDataRenderer implementation, the data property of the implementation is updated with the item within the collection at the time of instantiation.
The DefaultComplexItemRenderer class can also be used to easily render IVisualEle
ment data within a DataGroup container:
Lorem ipsum dolor sit amet consectetur adipisicing elit.
When the itemRenderer property is set to the DefaultComplexItemRenderer class, the
DataGroup internally determines each data item to be an IVisualElement implementation
and renders the items directly on the display.
Unlike from a Group container, child elements cannot be accessed directly from a Data
Group container. Although the child elements of both a Group and a DataGroup are
IVisualElement implementations, the Group class exposes a content API through its
implementation of the IVisualElementContainer interface that enables you to dynamically add, remove, and set the indexes of elements directly in the container. The display
list of a DataGroup can be altered using the IList instance set as the dataProvider property value for the container. Because the dataProvider property supports binding, the
collection can be affected directly at runtime to update the display of visual elements
dynamically.
As item renderers are added to and removed from the display list of a DataGroup
container, RendererExistenceEvent objects are dispatched. The properties of a
RendererExistenceEvent instance correspond to the item renderer instance, the data
36 | Chapter 2: Containers
www.it-ebooks.info
supplied to the item renderer, and the elemental index within the display list at which
it resides.
The following example demonstrates how to dynamically change the display list of a
DataGroup container and listen for the addition and removal of item renderer instances:
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
import spark.events.RendererExistenceEvent;
import mx.collections.ArrayCollection;
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 );
}
}
]]>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
2.4 Display Children Using Data Items | 37
www.it-ebooks.info
rendererAdd="itemAdded(event);"
rendererRemove="itemRemoved(event);"
itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">
2.5 Use a Custom Item Renderer in a DataGroup
Problem
You want to use a custom item renderer to render data items visually within a DataGroup.
Solution
Create a custom component that implements the IVisualElement and IDataRenderer
interfaces and supply the class as the itemRenderer property value for a DataGroup
container.
Discussion
The DataGroup container handles making visual representations of data items. In order
to properly render visual elements in the display list of a DataGroup and for its layout
delegate to handle the size and position of those children, item renderers need to implement at least two interfaces: IVisualElement and IDataRenderer. The layout delegate
of a container attributes the visual elements as IVisualElement implementations. The
implementation type is also attributed when dispatching RendererExistenceEvents.
Implementing the IDataRenderer interface for a custom item renderer exposes the
data property, which is used internally by the DataGroup to supply data items to the
renderer.
38 | Chapter 2: Containers
www.it-ebooks.info
Along with the convenient DefaultItemRenderer and DefaultComplexItemRenderer
classes provided in the Flex 4 SDK, Adobe provides a convenience base class for item
renderers to be used with DataGroup containers. The item renderer base class—aptly
named ItemRenderer—is an extension of spark.components.DataRenderer, which is a
Group container that exposes a data property, fulfilling the contract of an item renderer
being an implementation of IVisualElement and IDataRenderer. In addition, spark.com
ponents.supportClasses.ItemRenderer also provides extra support for styling, states,
and event handling and is a good jumping-off point for creating a custom item renderer.
The following custom item renderer is an extension of ItemRenderer and displays the
firstName and lastName property values of the supplied data item:
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="24">
Because ItemRenderer is an extension of Group, visual elements can be declared directly
on the display for visual representation. In this example, two s:Label components are
laid out horizontally and placed above a background s:Rect graphic element that
updates its color property based on state. When creating a custom item renderer by
extending the ItemRenderer class, remember that the item renderer manages its current
state internally. You can override the getCurrentRendererState() method to specify
how the current state is determined, but in general the extending class will need to at
least declare a normal state.
2.5 Use a Custom Item Renderer in a DataGroup | 39
www.it-ebooks.info
