Flex 4 Itemrenderer for List

Question

I just started working with Flex. I know it's pathetic but it's a long story. Now, the problem I am facing is that I have a list component which has a dataprovider on it. What I would like to do is when an item on the list is clicked I would like to have a check sign right next to the label.

Below is the component:

<s:List id="tabList" width="100%"
                        borderVisible="false" click="tabList_clickHandler(event)"
                        selectedIndex="{this.hostComponent.selectedIndex}"
                        itemRenderer="MultiTabListRenderer" />

Below is the Itemrenderer code:

protected function AddCheck_clickHandler(event:MouseEvent):void {
        // TODO Auto-generated method stub
        var checkLabel:Label;
        checkLabel = new Label();
        checkLabel.text = "checkMark";

        var e: ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
        e.item = data;
        e.index = itemIndex;
        dispatchEvent(e);
        this.checkRectGroup.addElementAt(checkLabel, e.index);
    }

<s:Label id="customMultitabList" text="{data.label}"
             left="10" right="0" top="6" bottom="6" click="AddCheck_clickHandler(event)"/>

My code inside the function is wrong which is mainly due to the fact that I do not understand each and everything in flex. I am not in a mood to learn the language in detail because it's not a long term work for me. Also, in the renderer file when I use s:List instead of s:label I do not see the labels anymore. Of course I replace the attribute text with dataprovider={data.selectedItem}.

Answer 1

One way to approach this is to add a field to the objects in your dataProvider that tracks whether or not the item has been selected.

Then, in your item renderer, you inspect this field and decide whether or not to display the checkmark. Here's a working example app and renderer:

Application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"
               creationComplete="application1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.CollectionEvent;
            import mx.events.CollectionEventKind;
            import mx.events.FlexEvent;
            import mx.events.PropertyChangeEvent;
            import mx.events.PropertyChangeEventKind;

            private var collection:ArrayCollection;

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                collection = new ArrayCollection([
                    { label: 1, selected: false },
                    { label: 2, selected: false },
                    { label: 3, selected: false }]);

                listbert.dataProvider=collection;
            }

            protected function listbert_clickHandler(event:MouseEvent):void
            {
                var index:int = listbert.selectedIndex;
                var item:Object = listbert.selectedItem;
                item.selected = !item.selected;
                // Create these events because the items in the ArrayCollection
                // are generic objects. It shouldn't be necessary if items in
                // your collection are a Class that extends EventDispatcher
                // see ArrayList::startTrackUpdates()
                var e:PropertyChangeEvent = new PropertyChangeEvent(
                    PropertyChangeEvent.PROPERTY_CHANGE, false,false,
                    PropertyChangeEventKind.UPDATE, 'selected', !item.selected,
                    item.selected, item);

                collection.dispatchEvent(new CollectionEvent(
                    CollectionEvent.COLLECTION_CHANGE, false,false,
                    CollectionEventKind.UPDATE, index, index, [e]));
            }

        ]]>
    </fx:Script>

        <s:List id="listbert" click="listbert_clickHandler(event)" itemRenderer="TestRenderer"/>
</s:Application>

Item Renderer:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" >
    <fx:Script>
        <![CDATA[

            override public function set data(value:Object):void
            {
                super.data = value;
                labelDisplay.text = value.label;
                if (value.selected)
                    checkMarkLabel.text = "✓";
                else
                    checkMarkLabel.text = "";
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <s:Label id="labelDisplay" />
    <s:Label id="checkMarkLabel" />
</s:ItemRenderer>