Flex List item renderer

Question

I have created an item renderer spark list in flex , but i want to call a function on addition of new row in list and not afterwards. I am getting a data object in rendered list in it i am getting the type of data to be displayed in list ie. either text or image. So on addition of new data in list i want a function to be called up in rendered list that checks the type of data received and then it will either create and add an image element or a text element. So the main problem is how i get a function called on addition of data. I have tried events like datachange and added but they keep on calling the function over and over again when we scroll the list but i want the function to be called once only on addition of data and not after wards. Below is the renderer list code , maybe you will get a better idea of what i am trying to do:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true" dataChange="test_add()">

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function test_add() : void {
                Alert.show("type="+data.msg_type);      
                if(data.msg_type=="text"){
                    //code to create and add new text element to list_row//
                }
                if(data.msg_type=="image"){
                    //code to create and add new image element to list_row//
                }
            }

        ]]>
    </fx:Script>

    <s:Group id="list_row" width="100%" verticalAlign="middle"  verticalCenter="0">

    </s:Group>
</s:ItemRenderer>

Any help will be highly appreciated. Thanks

RIAstar RIAstar · Accepted Answer · 2012-02-05T14:15:40

As far as I can tell from the code you show, the easiest solution to your problem would be to work with two separate ItemRenderers: one that renders text and the other that renders images. You can do this using the SkinnableDataContainer#itemRendererFunction property instead of itemRenderer.

The List with the new property:

<s:List id="myList" dataProvider="{dp}" 
        itemRendererFunction="getItemRenderer" />

The function that returns a factory for the right ItemRenderer.

private function getItemRenderer(item:Object):IFactory {
    if (item.msg_type == "text") 
        return new ClassFactory(MyTextItemRenderer);
    if (item.msg_type == "image") 
        return new ClassFactory(MyImageItemRenderer);
}

In these two different ItemRenderers you can then display your data as you wish.

Edit: why it's OK that the dataChange event fires every time you scroll.

There is in fact nothing wrong with your approach as you describe it, although I would argue that the itemRendererFunction approach allows for better separation of concerns. I could tell you that you can turn the unwanted behavior off, simply by setting the List#useVirtualLayout property to false.

<s:List id="myList" dataProvider="{dp}" 
        itemRenderer="myItemRenderer" useVirtualLayout="false" />

Though this will do what you ask for (i.e. create the ItemRenderers only once), that would not be good advice. There is a good reason this property is set to true by default.

When virtual layout is used, item renderers are created only as they are needed, i.e. when they come into view and need to be displayed to the user. This allows you to load thousands of items without performance loss.

Let's say you load 1000 value objects: that doesn't take up much memory or CPU. But now you want to render them. If you don't use virtual layout an item renderer will be created for all of them up front, which means thousands of graphic elements and thousands of event listeners (how many exactly depends on your setup). Now that is going to hurt performance on a slow computer.

If you do use virtual layout only - say - 10 item renderers will be created at once. If the user scrolls down, the next 10 will be created and the ones that just disappeared from the view are removed and eventually garbage collected. So you see: what you may have perceived as something that was bad for performance at first, is actually a very good thing.

So I would advise you not to do what I just told you. Unless perhaps you would have a situation where you knew there would never be more than a very limited number of items in your List. Then you may consider not using virtual layout.

Flex List item renderer

1 Answers