Flex: Listening for CollectionEvent in custom component

Question

(EDIT: I've edited my question to make it simpler, sorry if some answers are out of context)

I have prepared a reduced test case for my question:

I'm trying to create a custom component which is being fed with XML data coming from the server. My problem is that the CollectionEvent listener doesn't get fired and thus labels not updated -

Games.mxml (my custom component with listener):

<mx:Script>
    <![CDATA[
        import mx.events.*;

        private var _xlist:XMLList;

        [Bindable]
        public function get xlist():XMLList {
            return _xlist;
        }

        public function set xlist(x:XMLList):void {
            _xlist = x;
            trace("set(" + x +")");
            list.dataProvider = x;
            list.dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE, xlistChanged);                
        }

        private function gameLabel(item:Object):String {
            return "game: " + item.@label;
        }

        private function xlistChanged(event:CollectionEvent):void {
            trace("xlistChanged(" + event +")");
            all.text = "All games: " + _xlist.game.length();
            full.text = "Full games: " + _xlist.game.(user.length() == 3).length();
            vacant.text = "Vacant games: " + _xlist.game.(user.length() < 3).length();
        }
    ]]>
</mx:Script>

<mx:Label id="all" text="All games"/>
<mx:Label id="full" text="Full games"/>
<mx:Label id="vacant" text="Vacant games"/>

<mx:List id="list" labelFunction="gameLabel"/>

MyTest.mxml (click the buttons to change XML):

        private function changeXML1():void {
            games = <games>
                        <game label="1">
                            <user/>
                            <user/>
                            <user/>
                        </game>
                        <game label="2">
                            <user/>
                            <user/>
                        </game>
                        <game label="3">
                            <user/>
                            <user/>
                            <user/>
                        </game>
                    </games>;                   
        }

        private function changeXML2():void {
            games = <games>
                        <game label="A">
                            <user/>
                            <user/>
                            <user/>
                        </game>
                        <game label="B">
                            <user/>
                            <user/>
                        </game>
                        <game label="C">
                        </game>
                    </games>;                   
        }
    ]]>
</mx:Script>

<mx:XML id="games">
    <games>
        <game label="X">
            <user/>
            <user/>
        </game>
        <game label="Y">
            <user/>
            <user/>
        </game>
    </games>
</mx:XML>

<mx:Button label="Change XML 1" click="changeXML1()"/>
<mx:Button label="Change XML 2" click="changeXML2()"/>
<my:Games xlist="{games.game}"/>

Please advise me what is wrong.

Regards, Alex

UPDATE: edited Games.mxml as suggested by clownbaby - still not working (xlistChanged is never invoked):

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
         xmlns:my="*" creationComplete="onCreationComplete(event)">

    <mx:Script>
        <![CDATA[
            import mx.events.*;

            private var _xlist:XMLList;

            [Bindable]
            public function get xlist():XMLList {
                return _xlist;
            }

            public function set xlist(x:XMLList):void {
                _xlist = x;
                list.dataProvider = x;
                trace("\n set: " + x);
            }

            private function gameLabel(item:Object):String {
                return "game: " + item.@label;
            }

            private function onCreationComplete(event:FlexEvent):void {
                list.dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE, xlistChanged);
            }

            private function xlistChanged(event:CollectionEvent):void {
                all.text = "All games: " + xlist.length();
                full.text = "Full games: " + xlist.(user.length() == 3).length();
                vacant.text = "Vacant games: " + xlist.(user.length() < 3).length();
            }
        ]]>
    </mx:Script>

    <mx:Label id="all" text="All games"/>
    <mx:Label id="full" text="Full games"/>
    <mx:Label id="vacant" text="Vacant games"/>

    <mx:List id="list" labelFunction="gameLabel"/>

</mx:VBox>

Answer 1

Two things:

1) The reason your event is not firing is because you are adding the listener after you set _xlist.

2) You should not be adding an event listener within your setter anyways. You should add it on the initialize or creationComplete events of your VBox component.

EDIT

Alright, after looking at your code again I can see the problem... so just a few more things.

3) Why are you naming a method init, when it gets called on creationComplete? You should get into the habit of naming methods appropriately. For example, the method that gets called on creationComplete should be named: onCreationComplete, or handleCreationComplete That way, you will know what your code is doing 6 months down the road.

4) This is your main problem: You are using the getters / setters in appropriately. If you have a setter, you should also implement a getter (unless you have a write-only field). More importantly, you should use the getter to access your data. In your xListChanged method you are not using the setter you have defined, thus nothing is getting told the _xlist actually changed. As such, you should change your code to:

private var _xlist:XMLListCollection;

[Bindable]
public function get xlist():XMLListCollection { return this._xlist; }
public function set xlist(value:XMLListCollection):void
{
    this._xlist = value;
}

Whenever you want to access _xlist, use the GETTER. For example, change the dataProvider of your List component to be {xlist}. And the xListChanged method should be using the getter: xlist instead of directly accessing the member _xlist.

Answer 2

Why don't you just do this:

public function set xlist(x:XMLList):void {

   _xlist = new XMLListCollection(x);
   _all.label = 'All (' + _xlist.length + ')';

   var full:XMLList = _xlist.source.game.(user.length() == 3);
   _full.label = 'Full (' + full.length() + ')';

   var free:XMLList = _xlist.source.game.(user.length() < 3);
   _free.label = 'Free (' + free.length() + ')';

}

You don't need a listener if the only way to set the local _xlist variable is by setting the xlist property.