使用addElement的Flex4不能正確顯示元素

Question

我正在使用新的Flex4 Spark的東西，但我陷入了一個可怕的問題。首先讓我解釋一下情況。我有一個容器mx:Canvas其中我做addElement()一個類型實例DocumentWindow。根據文檔的類型，文檔窗口類應該是視圖的持有者。 DocumentWindow類延伸TitleWindow。我還有一個任務欄，裏面有mx:Canvas和buttonBar，所以窗戶應該是可切換的。所以用兩個字我有窗口持有人和一個任務欄。

現在出現了一個奇怪的現象：當我把DocumentWindow的類型爲「doc」（它載入由swftools創建的swf）時，該窗口出現在窗口保持器中並作爲任務欄上的任務。但是，如果首先打開其他內容 - DocumentWindow，其類型爲音頻或視頻，導致DocumentWindow在內部實例化不同的視圖，則該窗口不會出現在屏幕上，taskBar中也沒有顯示任務按鈕。我在上面放了一個trace()，它表明numElements正在增加，taskBar ButtonBar.dataProvider.length增加了，所以事情就在那裏 - 只是他們保持隱形，直到我打開DocumentWindow類型'doc'？！我甚至試圖讓DocumentWindow不加載視圖裏面，因爲我認爲唯一的區別是視圖...但是，即使是'文檔'鍵入DocumentWindow沒有顯示。一條線索可能是creationComplete在添加'doc'視圖之前永遠不會被調用。任何想法可能是錯誤的？

這裏是一個跟蹤我從窗戶持有人得到（有從窗戶架Canvas和ButtonBar.dataProvider.length從taskBarnumElements）：

 
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：我trace() D還窗戶架大小 - 這是確定，它是足夠大的:)）

這裏是主容器代碼：

<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> 

這裏是WindowsView類代碼：

<?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> 

的TaskBar代碼：

<?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> 

並實際DocumentWindow的creationComplete從不分派！我認爲DocumentView類型的'doc'會創建一些其他視圖中缺少的事件...但是這些視圖太複雜了，無法在此處發佈..這將是一個巨大的帖子:)

Answer 1

向我們展示一些代碼，最好是可運行的樣本。但是，這聽起來像是將MX/Halo組件與Spark組件混合在一起。在Halo組件中，比如你的畫布，你應該使用addChild而不是addElement。