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";
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,onCompleteAddControlBar);
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;
}
}
}
