Flex4 addElement problem or something wrong with creationComplete event!?

Question

Hi. I am using the new Flex4 Spark stuff but I'm stuck at an awful problem. Let me explain a bit of the situation first. I have a container (mx:Canvas) in which I do addElement() of one type instances (DocumentWindow). The document window class is supposed to be the holder for a view according to the type of the document. The DocumentWindow class extends TitleWindow. I also have a task bar which is a mx:Canvas with buttonBar inside so that the windows should be switchable. So in 2 words I got windows holder and a taskbar. The strange thing comes now: When I put a DocumentWindow with type "doc" (which loads swf made by swftools) the window appears in the windows holder and as task on the taskbar. But if first I open something else - DocumentWindow with type audio or video which causes the DocumentWindow to instantiate different view inside, the window doesn't appear on the screen neither a task button is being shown in the taskBar. I put a trace() on that and it shows that numElements is increasing, the taskBar ButtonBar.dataProvider.length is increased, so the things are there - just that they stay invisible until I open DocumentWindow with type 'doc'?!?!?! I even tried to make DocumentWindow not to load the view inside because I thought that the only difference is the view... but then even the 'doc' typed DocumentWindow didn't show. A clue may be that creationComplete is never called until a 'doc' view is added. Any ideas what might be wrong?

Here is a trace I got from the windows holder (There is numElements from the windows holder Canvas and ButtonBar.dataProvider.length from the taskBar):

1 windows, 1 tasks
    win[0] = (0, 0) - [550, 400], visible=true, alpha=1
1 windows, 1 tasks
    win[0] = (0, 0) - [550, 400], visible=true, alpha=1
1 windows, 1 tasks
    win[0] = (0, 0) - [550, 400], visible=true, alpha=1
1 windows, 1 tasks
    win[0] = (0, 0) - [550, 400], visible=true, alpha=1
1 windows, 1 tasks
    win[0] = (0, 0) - [550, 400], visible=true, alpha=1

PS: I trace()d also the windows holder size - it's ok, it's big enough :))

Here is the main container code:

<s:Group
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:components="some.package.components.*"

    initialize="init()"
    creationComplete="main()">

    <fx:Script>
    <![CDATA[

        public function openDocument(di:DocumentInfo, id:String = null):TaskInfo {
            var w:DocumentWindow = new DocumentWindow();
            var t:TaskInfo = new TaskInfo(di, w, id);
            w.title = di.label;

            var docInfo:DocumentInfo = mServer.getDocumentInfo(di.type, di.label);
            w.init(docInfo, t);

            windows.addWindow(w);
            taskBar.addTask(t);

            return t;
        }

    ]]>
    </fx:Script>



    <mx:HBox id="bottomButtons" horizontalGap="0"
             left="0" bottom="0">
        <mx:Button id="userListButton" click="toggleUserList()"
                   width="40" height="40"/>
        <mx:Canvas id="handButtons"
            horizontalScrollPolicy="off" verticalScrollPolicy="off"
            width="40" height="40">
            <mx:Button id="raiseHandButton" click="toggleRaiseHand()"
                       visible="false" width="40" height="40"/>
            <mx:Button id="sitDownButton" click="doSitDown()"
                       visible="false" width="40" height="40"/>
        </mx:Canvas>
    </mx:HBox>

    <mx:HDividedBox id="vdivider" left="0" top="0" right="0" bottom="40">
        <components:WindowsView id="windows"/>
        <components:RightPanel id="rightPanel"/>
    </mx:HDividedBox>

    <components:TaskBar id="taskBar"
                        left="{bottomButtons.width}" bottom="0" right="0" height="40"/>

</s:Group>

Here is the WindowsView class code:

<?xml version="1.0" encoding="utf-8"?>
<s:Group
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"

        click="showStuff()"
        width="100%" height="100%">

    <fx:Script>
        <![CDATA[
            import some.package.EClassView;

            import mx.events.FlexEvent;

            private function showStuff():void {
                trace(numChildren + ' windows, ' + EClassView.instance.taskBar.taskButtons.dataProvider.length + ' tasks');
                var w:DocumentWindow;
                for(var i:int = 0; i < numElements; ++i) {
                    w = getElementAt(i) as DocumentWindow;
                    if(w == null) continue;
                    trace("\twin[" + i + "] = (" + w.x + ", " + w.y + ") - [" + w.width + ", " + w.height + "], visible=" + w.visible + ", alpha=" + w.alpha);
                }
            }

            public function addWindow(w:DocumentWindow):void {
                w.addEventListener(FlexEvent.CREATION_COMPLETE, onWindowCreation);
                addElement(w);
            }

            private function onWindowCreation(e:FlexEvent):void {
                var w:DocumentWindow = e.currentTarget as DocumentWindow;
                w.removeEventListener(FlexEvent.CREATION_COMPLETE, onWindowCreation);
                w.center();
            }

        ]]>
    </fx:Script>

    <s:Rect width="100%" height="100%">
        <s:fill>
            <s:SolidColor color="0xeeeeee" alpha="1"/>
        </s:fill>
    </s:Rect>

</s:Group>

The TaskBar code:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx"

           initialize="init()"
           creationComplete="main()">

    <fx:Script>
        <![CDATA[
            import some.package.EClassView;
            import some.package.data.TaskInfo;
            import some.package.events.TaskEvent;
            import some.package.skins.GradientButtonSkin;

            import mx.collections.ArrayCollection;
            import mx.core.IVisualElement;
            import mx.core.IVisualElementContainer;
            import mx.events.ItemClickEvent;

            import spark.components.Button;
            import spark.components.DataGroup;
            import spark.components.Group;
            import spark.events.IndexChangeEvent;
            import spark.skins.spark.ButtonBarSkin;

            private var mTasks:ArrayCollection;

            public function get tasks():ArrayCollection {
                return mTasks;
            }

            private function init():void {
                mTasks = new ArrayCollection([]);
            }

            private function main():void {
                taskButtons.dataProvider = mTasks;
            }

            public function addTask(task:TaskInfo):void {
                task.index = mTasks.length;
                mTasks.addItem(task);
                task.win.addEventListener("minimize", onWinMinimize);
                task.win.addEventListener("maximize", onWinMaximize);
                task.win.addEventListener("restore", onWinRestore);
                taskButtons.selectedIndex = task.index;
            }

            public function removeTaskAt(i:int):void {
                var task:TaskInfo = mTasks[i] as TaskInfo;
                var evt:TaskEvent = new TaskEvent(TaskEvent.CLOSING);
                task.dispatchEvent(evt);
                if(evt.stopped) return;

                mTasks.removeItemAt(i) as TaskInfo;

                EClassView.instance.windows.removeElement(task.win);
                task.win.removeEventListener("minimize", onWinMinimize);
                task.win.removeEventListener("maximize", onWinMaximize);
                task.win.removeEventListener("restore", onWinRestore);
                rebuildTaskIndexes();
            }

            public function getTaskById(tid:String):TaskInfo {
                for each(var t:TaskInfo in mTasks) {
                    if(t.id == tid) return t;
                }
                return null;
            }

            public function set volume(v:Number):void {
                for each(var t:TaskInfo in mTasks) {
                    t.win.view.setVolume(v);
                }
            }

            private function rebuildTaskIndexes():void {
                for(var n:int = 0; n < mTasks.length; ++n)
                    (mTasks[n] as TaskInfo).index = n;
            }

            private function onWinMinimize(e:Event):void {
                var win:DocumentWindow = e.currentTarget as DocumentWindow;
                win.visible = false;

                var desktop:IVisualElementContainer = win.parent as IVisualElementContainer;
                var nw:DocumentWindow;
                taskButtons.selectedIndex = mTasks.length - 1;
            }

            private function onWinMaximize(e:Event):void {
                var win:DocumentWindow = e.currentTarget as DocumentWindow;
                win.bring2front();

                win.resizable = win.movable = false;
                win.maximized = true;

                var ws:WindowsView = EClassView.instance.windows;
                win.width = ws.width;
                win.height = ws.height;
            }

            private function onWinRestore(e:Event):void {
                var win:DocumentWindow = e.currentTarget as DocumentWindow;
                win.doRestore();
            }

            private function onTaskChanged(e:MouseEvent):void {
                var newt:TaskInfo = mTasks[taskButtons.selectedIndex] as TaskInfo;
                newt.win.doRestore();
            }

        ]]>
    </fx:Script>

    <s:ButtonBar id="taskButtons" requireSelection="true" styleName="taskbar"
                labelField="title" click="onTaskChanged(event)"
                x="0" width="{width - taskButtons.x}" height="100%"/>

</s:Group>

And actually the creationComplete of the DocumentWindow is never being dispatched! I assume the DocumentView type 'doc' creates some sort of event which is missing in other views... But the views are too complex to be posted here.. it will be a HUGE post :)

Answer 1

Show us some code, preferably a runnable sample. But, it sounds like you're mixing MX / Halo components with Spark components. In Halo components, such as your canvas, you should use addChild, not addElement.