adobe flex spark group graphics disappears on addEventListener

Question

When creating a simple Flex 4.6 App, where the creationComplete-handler looks like this:

protected function creationCompleteHandler(event:FlexEvent):void {
    var groupVisible : Group = new Group();
    groupVisible.graphics.beginFill(0xff0000);
    groupVisible.graphics.drawCircle(100, 100, 50);
    groupVisible.graphics.endFill();
    addElement(groupVisible);

    var groupInvisible : Group = new Group();
    groupInvisible.graphics.beginFill(0x0000ff);
    groupInvisible.graphics.drawCircle(200, 100, 50);
    groupInvisible.graphics.endFill();
    addElement(groupInvisible);
    groupInvisible.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {trace("click");});
}

The first groupVisible.graphics content (red circle at 100,100) is drawn. The second groupInvisible.graphics content (blue circle at 200, 100) is NOT drawn.

It depends definately on that added EventListener.

Any ideas?

Answer 1

If you switch to a SpriteVisualElement instead of a Group, both items are displayed. On the plus side, the mouse click event will actually dispatched from a Sprite/SpriteVisualElement whereas they will not dispatch from a container. Since the Click event bubbles, it can be dispatched from elements inside the group, and listened to on the group level. But, graphics will not dispatch the click event.

Anyway, here is some code:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

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

            import spark.core.SpriteVisualElement;


            protected function onMouseClick(event:MouseEvent):void{
                trace('click');
            }

            override protected function createChildren():void{
                super.createChildren();
                var groupVisible :SpriteVisualElement = new SpriteVisualElement();

//              var groupVisible : Group = new Group();
                groupVisible.graphics.beginFill(0xff0000);
                groupVisible.graphics.drawCircle(100, 100, 50);
                groupVisible.graphics.endFill();
                groupVisible.addEventListener(MouseEvent.CLICK, onMouseClick);
                addElement(groupVisible);

//              var groupInvisible : Group = new Group();
                var groupInvisible : SpriteVisualElement = new SpriteVisualElement();
                groupInvisible.graphics.beginFill(0x0000ff);
                groupInvisible.graphics.drawCircle(200, 100, 50);
                groupInvisible.graphics.endFill();
//              groupInvisible.addEventListener(MouseEvent.CLICK, onMouseClick);
                groupInvisible.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {trace("click");});
                addElement(groupInvisible);

            }

        ]]>
    </fx:Script>

</s:WindowedApplication>