Try calling createComponetsFromDescriptor.
The controlbar is managed through trickery. You can't just add it as a child. ________________________________ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of carriefieldsamy Sent: Thursday, May 22, 2008 8:51 AM To: [email protected] Subject: [flexcoders] TittleWindow ControlBar not showing up Hi Everyone, I'm trying to dynamically create dragable TitleWindows with ControlBars and the ControlBars are not showing up. At this point I am adding a label to the control bar. Eventually it will be an image. Thanks in Advance! Here's the code: <?xml version="1.0" encoding="utf-8"?> <core:DashboardModuleBase xmlns:mx="http://www.adobe.com/2006/mxml <http://www.adobe.com/2006/mxml> " xmlns:core="com.arc90.dashboard.view.core.*" xmlns:arcComps="com.arc90.flexlib.controls.*" xmlns:comps="com.arc90.dashboard.view.components.*" layout="absolute" creationComplete="facade.startup(this)"> <mx:Script> <![CDATA[ import mx.controls.Button; import mx.containers.ControlBar; import com.arc90.dashboard.ApplicationFacade; import mx.events.DragEvent; import mx.events.FlexEvent; import mx.core.DragSource; import mx.managers.DragManager; import mx.containers.TitleWindow; import com.arc90.dashboard.view.components.DragWindow; import mx.events.CloseEvent; import mx.collections.ArrayCollection; import mx.containers.HBox; import mx.controls.Label; import mx.controls.TextInput; [Embed(source="/assets/icons/policyicon.png")] [Bindable] private var policyWidgetAddImage:Class; [Embed(source="/assets/icons/reporticon.png")] [Bindable] private var reportWidgetAddImage:Class; [Embed(source="/assets/icons/rssicon.png")] [Bindable] private var rssWidgetAddImage:Class; private var policyWidgetID:int = -1; private var reportWidgetID:int = -1; private var rssWidgetID:int = -1; private var policyWidgetsAC:ArrayCollection = new ArrayCollection(); private var reportWidgetsAC:ArrayCollection = new ArrayCollection(); private var rssWidgetAC:ArrayCollection = new ArrayCollection(); // Function called by the canvas dragEnter event; enables dropping private function doDragEnter(event:DragEvent):void { DragManager.acceptDragDrop(Canvas(event.target)); } // Variables used to hold the mouse pointer's location in the title bar. // Since the mouse pointer can be anywhere in the title bar, you have to // compensate for it when you drop the panel. public var xOff:Number; public var yOff:Number; // Function called by the Canvas dragDrop event; // Sets the panel's position, // "dropping" it in its new location. private function doDragDrop(event:DragEvent):void { // Compensate for the mouse pointer's location in the title bar. var tempX:int = event.currentTarget.mouseX - xOff; event.dragInitiator.x = tempX; var tempY:int = event.currentTarget.mouseY - yOff; event.dragInitiator.y = tempY; // Put the dragged panel on top of all other components. canvas.setChildIndex(TitleWindow(event.dragInitiator), canvas.numChildren-1); } // creates the widgets config view and adds it to the canvas. // this should happen in a widget creator file. private function addWidgetClickHandler(event:MouseEvent):void{ var dw:DragWindow = new DragWindow(); var hbox:HBox = new HBox(); var label:Label = new Label(); var textField:TextInput = new TextInput(); var controlBar:ControlBar = new ControlBar(); var img:Image = new Image(); img.source = rssWidgetAddImage; var lbl:Label = new Label(); lbl.text = "some text in the controlbar"; controlBar.addChild(lbl); dw.setStyle("paddingLeft","10"); dw.setStyle("paddingRight","10"); dw.setStyle("paddingTop","10"); dw.setStyle("paddingBottom","10"); dw.showCloseButton = true; dw.horizontalScrollPolicy = "off"; dw.verticalScrollPolicy = "off"; dw.addEventListener(CloseEvent.CLOSE, removeMe); // widget specific config switch(event.currentTarget.id) { case "imgAddPolicy": dw.title = "Policy Search"; policyWidgetID = policyWidgetID + 1; dw.id = policyWidgetID.toString(); dw.width = 200; dw.height = 90; label.text = "Policy ID:";// dynamic textField.width = 90; // widget specific break; case "imgAddReport": dw.title = "Report Search"; reportWidgetID = reportWidgetID + 1; dw.id = reportWidgetID.toString(); dw.width = 300; dw.height = 90; label.text = "Report URL:";// dynamic textField.width = 150; // widget specific break; case "imgAddRSS": dw.title = "RSS Feed"; rssWidgetID = rssWidgetID + 1; dw.id = rssWidgetID.toString(); dw.width = 300; dw.height = 90; label.text = "RSS Feed URL:";// dynamic textField.width = 150; // widget specific break; } // add children to the hbox hbox.addChild(label); // add label to the hbox hbox.addChild(textField);// add text field to hbox // add children to the component dw.addChild(hbox);// add hbox to display window (titleWindow called dw) //dw.addEventListener(FlexEvent.CREATION_COMPLETE,onCompleteAddControlBa r); controlBar.percentWidth = 100; hbox.addChildAt(controlBar,dw.numChildren+1); dw.createComponentsFromDescriptors(); // dw.percentHeight = 100; // position component var canvasHalfWidth:int = canvas.width/2; var widgetHalfWidth:int = dw.width/2; dw.x = canvasHalfWidth - widgetHalfWidth; canvas.addChild(dw);// add title window to canvas //textField.text = dw.id;// displays id in text box ** take out } private function removeMe(event:CloseEvent):void{ canvas.removeChild(event.currentTarget as DisplayObject); } // Creation complete handler for each panel to add the // mouseMove event handler to the title bar. // Clicking the mouse button, then moving the mouse on the title bar (myTitleBar as exposed through DragWindow) // initiates the d&d operation. private function myPanelCCHandler(event:Event):void { event.currentTarget.myTitleBar.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler); } // Drag initiator event handler for // the title bar's mouseMove event. private function tbMouseMoveHandler(event:MouseEvent):void { var dragInitiator:TitleWindow=TitleWindow(event.currentTarget.parent); var ds:DragSource = new DragSource(); ds.addData(event.currentTarget.parent, 'titleWindow'); // Update the xOff and yOff variables to show the // current mouse location in the Panel. xOff = event.currentTarget.mouseX; yOff = event.currentTarget.mouseY; // Initiate d&d. DragManager.doDrag(dragInitiator, ds, event); } ]]> </mx:Script> <!-- view components here --> <mx:VBox id="dashboardVBox" width="100%" height="100%" > <arcComps:Banner id="myBanner" minHeight="40" message="testing the banner" backgroundColor="#FCA702" width="100%" visible="true" cornerRadius="10"/> <mx:Canvas id="canvas" width="100%" height="100%" dragEnter="doDragEnter(event);" dragDrop="doDragDrop(event);"> </mx:Canvas> <!-- add fisheye component --> <mx:HBox id="widgetBox" visible="true" horizontalGap="20" width="100%" borderColor="#ffcc00" borderStyle="solid" borderThickness="2" backgroundColor="#FFCC00" backgroundAlpha="0.3" paddingBottom="5" paddingTop="10" paddingLeft="5" paddingRight="5"> <mx:Spacer width="100%"/> <mx:Image id="imgAddPolicy" source="{policyWidgetAddImage}" width="64" height="64" click="addWidgetClickHandler(event)"/> <mx:Image id="imgAddReport" source="{reportWidgetAddImage}" width="64" height="64" click="addWidgetClickHandler(event)"/> <mx:Image id="imgAddRSS" source="{rssWidgetAddImage}" click="addWidgetClickHandler(event)"/> <mx:Spacer width="100%"/> </mx:HBox> </mx:VBox> </core:DashboardModuleBase> DragWindow.as package com.arc90.dashboard.view.components { import flash.events.Event; import mx.containers.ControlBar; import mx.containers.TitleWindow; import mx.core.UIComponent; import mx.events.FlexEvent; public class DragWindow extends TitleWindow { // Add the creationCOmplete event handler. public function DragWindow() { super(); isPopUp = true; addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler); } // Expose the title bar property for draggin and dropping. // can refer to myTitleBar outside of this file. [Bindable] public var myTitleBar:UIComponent; private function creationCompleteHandler(event:Event):void { myTitleBar = titleBar; } } }
