Random notes on DataGroup and Spark Containers in Flex 4 (Gumbo)

Here are some notes I took while investigating and reading about Spark Containers.

VerticalLayout.variableRowHeight and HorizontalLayout.variableColumnWidth properties are set to true by default. This might affect performance in a bad way, since Flex has to determine the size of each child. Setting theses properties to false in conjunction with rowHeight / columnWidth or a typical element or the dimension of the first element can affect performance in a positive way.

---

Setting the typicalLayoutElement can affect performance in a positive way, since the dimension of this Element is used for all children, so measuring each child is not necessary.

---

SkinnableContainer and SkinnableDataContainer can be used when skinning of a group is desired. The required skin-part is contentGroup.

---

Out of the box, Flex 4 comes with two ItemRenderers:

DefaultItemRenderer that converts its data item to a single String for display in a Spark SimpleTextcontrol and the DefaultComplexItemRenderer that displays a component in a Group container. Each component is wrapped in its own Group container.

---

To create a custom ItemRenderer extend from

spark.components.supportClasses.ItemRenderer

---

Passing data to an ItemRenderer goes via properties of the ItemRenderer:

• labelText String representation of the data-item.
• data The original data
• owner The Host-Component of the ItemRenderer. Can be used to fetch data.

A host-component that implements the IItemRendererOwner interface has methods where data is pushed down to the ItemRenderer

• itemToLabel() converts the data item to a String representation.
• updateRenderer()

One can overwrite these methods to manipulate data and the representation of the data.

---

To determine which ItemRenderer to use either set it on the itemRenderer property of the DataGroup or set the itemRendererFunction property to a function that returns an instance of a ClassFactory with the desired custom ItemRenderer.

---

A DataGroup visualizes a collection of data-items via ItemRenderers. Therefore, to add or remove children in a DataGroup manipulate the data using methods like addItem() and removeItemAt() on the dataProvider.

---

Virtualization can be used to improve performance when working with huge amounts of records. UseVirtualLayout set to true to enable virtualization.

---

When Virtualization is enabled, Flex will recycle ItemRenderes resulting in less overhead. Be sure to reset your ItemRenderes (explicitly setting the state of the components based on the passed data) and checking for null of the data property so that you don’t get an NPE at run time.

---

A typical item can be set on the DataGroup, so that Flex uses this to determine the size of the childs, resulting in better performance.

---

Virtualization cannot be used when using the ItemRendererFunction. Well, the function can be set, but no virtualization will be used.

Update: To be more precise (thanks to Steven Shongrunden@Adobe)

virtualization will be used even when an item renderer function is defined, but in that case item renderer recycling will not happen. Instead renderers will be created and destroyed roughly as they come in and out of view. (Compare this to the non-virtual case where every renderer is instantiated at startup). ItemRenderer recycling can be more performant than creation and destruction (depending on the renderers) so if you want to get the best performance it’s typically better to define an itemRenderer rather than an itemRendererFunction

---

The Viewport on a spark container is set by its width and heigt properties. verticalScrollPosition and horizontalScrollPosition specify the origin of the viewport relative to the containers content. clipAndEnableScrolling is used for clipping and scrolling. For scrolling the container can be surrounded by a scroller component (or you could use a slider and set the verticalScrollPosition and horizontalScrollPositionat runtime).

Follow any responses through RSS 2.0 feed. Leave a response, or trackback from your own site.