Resolved: Visual Rendering Defects in Flex Data Controls
Databinding remains a core feature in Flex visual components if we would like to render our data in Grid or List based control. We can even bind our custom components as Item Renderer for the Grid or List for binding dynamic data. The custom component would consist of just dynamic image or text or even a combination of both.
Issue: The main problem we faced on custom component item renderer is the misbehavior of the List and Grid controls. The custom items do not render or refresh upon scrolling of the container. If the application is minimized and maximized, the display object gets out of scope. Sometimes, the width and height of those inner custom components are not properly fit in and overlap with each other especially in case of TileList controls.
Reason: Each and every component in Flex has a property called UID (Unique Identifier) that is used to assign an unique identifier for each instance of the component. The Flex Data Controls identify its child elements based on its UID. For non-custom item renderers, these Data Controls itself assign the UID value so the above-said problem does not happen. But this is not the case with custom component.
Work-Around Provided:
In order to overcome this situation, we need to do the following:
- Implement the interface IUID that belongs to mx.core package in our custom AS3 component that we would like to render inside those data controls.
- Make the renderer class Bindable.
- Just override the set and get methods of the UID property of IUID interface.
Code Snippet:
package com
{
import mx.containers.Canvas;
import mx.core.IUID;
[Bindable]
public class MyItemHolder extends Canvas implements IUID
{
/* uid variable declaration */
private var _uid:String;
/* your other variable declaration goes here */
/* overriding set and get method of IUID interface */
public override function get uid():String
{
return _uid;
}
public override function set uid(value:String):void
{
this._uid=value;
}
/* rest of the functionalities */
}
Contact us for Flex Application Development services
