Or better yet, use FlexMDI :)
--- In [email protected], "Alex Harui" <[EMAIL PROTECTED]> wrote: > > 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; > } > > } > } >
