5 Use a Custom Item Renderer in a DataGroup
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 )
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
In this example, the background color is updated in response to the current state using
dot notation for color property values inline. The CustomItemRenderer created in the
previous example is applied to a DataGroup using the itemRenderer property to present
visual representations of data from an IList collection:
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:f4cb="com.oreilly.f4cb.*">
private var authors:XML =
]]>
itemRenderer="com.oreilly.f4cb.CustomItemRenderer">
As the collection of XML data is iterated through, a new instance of CustomItem
Renderer is created and its data property is attributed to the current data item in the
iteration.
If a namespace is declared for the package where a custom item renderer resides, the
itemRenderer property of the DataGroup container can also be set using MXML markup,
as in the following example:
40 | Chapter 2: Containers
www.it-ebooks.info
2.6 Use Multiple Item Renderers in a DataGroup
Problem
You want to use more than one type of item renderer for a collection of data items in
a DataGroup container.
Solution
Use the itemRendererFunction property to specify a callback method that will return
an item renderer based on the data item.
Discussion
When working with a collection of data items in a DataGroup container, the itemRen
derer and itemRendererFunction properties are used to specify the visual representation
of elements. Using the itemRenderer property, instances of a single item renderer class
are created and optionally recycled when rendering data elements. Assigning a factory
method to the itemRendererFunction property of the DataGroup affords more control
over the type of item renderer used for a data element.
The return type of the method specified for the itemRendererFunction property is
IFactory. As item renderers are created for data elements internally within the Data
Group, item renderers are instantiated using the newInstance() method of the IFac
tory implementation that is returned. The following is an example of a method attributed as an itemRendererFunction for a DataGroup container:
private function getItemRenderer( item:Object ):IFactory
{
var clazz:Class;
switch( item.type )
{
2.6 Use Multiple Item Renderers in a DataGroup | 41
www.it-ebooks.info
case "normal":
clazz = NormalRenderer;
break;
case "special":
clazz = SpecialRenderer;
break;
}
}
return new ClassFactory( clazz );
Depending on the type of data element provided to the itemRendererFunction, a specific
item renderer is returned. Any method specified as an itemRendererFunction must adhere to the method signature shown in this example. The single argument, of type
Object, is the current data element within the collection being iterated through and is
attributed as the dataProvider property of the DataGroup. The return type, as mentioned
previously, is of type IFactory. The ClassFactory class is an implementation of
IFactory, and class declarations are passed to its constructor and used to instantiate
new instances of the class when the newInstance() method is invoked.
The following example demonstrates setting a method delegate for the itemRenderer
Function property of a DataGroup container:
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
import com.oreilly.f4cb.DogItemRenderer;
import com.oreilly.f4cb.CatItemRenderer;
import spark.skins.spark.DefaultItemRenderer;
private function getItemRenderer( item:Object ):IFactory
{
var clazz:Class;
switch( item.type )
{
case "dog":
clazz = DogItemRenderer;
break;
case "cat":
clazz = CatItemRenderer;
break;
42 | Chapter 2: Containers
www.it-ebooks.info
