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?

i forgot to say that any other added element (like a Label) is rendered though in groupInvisible. — Markus Rossler, Jun 13 '12 at 15:47
That's extremely odd and perhaps a bug. Nevertheless the whole point of the Group class is not to hold any graphics and be a lightweight layout container. This code definitely goes against the grain of that idea. Why don't you just use [Ellipse](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/primitives/Ellipse.html) to draw your graphics? — RIAstar, Jun 13 '12 at 15:54
Have you considered creating the children in createChildren() instead of a creationComplete handler? I definitely recommend reading up on the Flex Component Lifecycle. That said, neither of your groups are sized (AKA Width and Height are not set); could the blue circle be drawn offscreen? Also, what is the parent container of the two groups? What is the layout? — JeffryHouser, Jun 13 '12 at 16:01
@RIAstar That's because i have hundreds of rectangles in my layout and performance is the reason to do it by hand. i found out, it is much more performant to draw it manually via graphics than use that fat Ellipse (Rect) thing. — Markus Rossler, Jun 13 '12 at 16:10
@www.Flextras.com Thank you for that hint with the FCL, but most classes aren't MXML classes, so i simply use the constructor, which works well. It's a special Application with a lot of visible details (about hundreds of rectangles and >100 Labels). I actually use Flex only for the not-so-performance-relevant parts. Group is afaik a compromise for use many Labels and a lot of graphics - to use in a flex component. If you have any other suggestions, i would appreciate any hint. — Markus Rossler, Jun 13 '12 at 16:18

score 3 · Accepted Answer · answered Jun 13 '12 at 16:11

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>

Good answer. I was just about to submit a similar one. Just thought I'd mention that this "problem" happens by design. When the `Group` has mouse listeners, it adds a "background" to the Group so that mouse events can be registered on "transparent" areas of the conatiner. That is covering up or erasing what you are drawing. — Sunil D., Jun 13 '12 at 16:15
@SunilD. What you say makes sense, but I run the code originally provided (using groups) the click event is not dispatched. So, there is something going on I don't understand. — JeffryHouser, Jun 13 '12 at 16:37
Thank you again for your answer! One last question regarding that: I need to use spark.Label for smooth font rendering (textfield renders different and much more bad). Many components are used with dozens of instances but are very simple (e.g. one Label + 2 different colored rectangles). Should i extend Group and add all graphics via an extra SpriteVisualElement? — Markus Rossler, Jun 13 '12 at 16:41
@MarkusRossler Have you tried using [UITextField](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UITextField.html). That should also be more lightweight than Label. — RIAstar, Jun 13 '12 at 16:49
@RIAstar thank you. yes i know, but it renders on small sizes not that nice, especially with embedded fonts. — Markus Rossler, Jun 13 '12 at 17:01
@MarkusRossler There are probably dozens of ways to accomplish this. But, extending Group to add labels and a specific sprites for drawing seems reasonable. — JeffryHouser, Jun 13 '12 at 17:40

adobe flex spark group graphics disappears on addEventListener

1 Answers1