Hi everybody! I have a DragPanel, and.... inside I have
1. Vbox
1.1. Hbox
1.1.1 Spacer
1.1.2 Image
1.1.3 Image
1.2. Label
I need to obtain this graphic:
----------
| |
| |
| ºººººº |
|º º|
|º º|
|º º|
| ºººººº |
| |
----------
But I get this:
----------
| |
| |
| |
| |
| |
| |
| ºººººº |
|º º|
|º º|
|º º|
| ºººººº |
| |
| |
| |
| |
| |
----------
HELP ME PLEASE!!!!
This is my code:
<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;
import flash.events.MouseEvent;
import mx.containers.Canvas;
import mx.containers.Panel;
import myComponents.DragPanel;
import mx.controls.Image;
[Embed("images/circulo.png")]
private var imagen1:Class;
[Embed("images/circulo.png")]
private var imagen2:Class;
private var original:BitmapData;
private static const MY_WIDTH:uint = 342;
private static var MY_HEIGHT:uint = 336;
// Define static constant for event type.
public static const RESIZE_CLICK:String = "resizeClick";
private function setResize():void
{
dp1.title = "CanvasDD: " + dp1.width + ", " + dp1.height;
}
// // D&D event handlers. //
// 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
// initiates the d&d operation.
private function myPanelCCHandler(event:Event):void
{
event.currentTarget.myTitleBar.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler);
}
// 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 dragEnter event; enables dropping
private function doDragEnter(event:DragEvent):void
{
DragManager.acceptDragDrop(Canvas(event.target));
}
// Drag initiator event handler for
// the title bar's mouseMove event.
private function tbMouseMoveHandler(event:MouseEvent):void
{
var dragInitiator:Panel=Panel(event.currentTarget.parent);
var ds:DragSource = new DragSource();
ds.addData(event.currentTarget.parent, 'panel');
// 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);
}
// 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.
v1.setChildIndex(Panel(event.dragInitiator), v1.numChildren-1);
}
// // Resizing event handlers. //
// Save panel being resized.
protected var resizingPanel:Panel;
// Global coordinates of lower left corner of panel.
protected var initX:Number;
protected var initY:Number;
// Resize area of panel clicked.
protected function resizeHandler(event:MouseEvent):void
{
resizingPanel = Panel(event.target);
initX = event.localX;
initY = event.localY;
// Place the rubber band over the panel.
rbComp.x = event.target.x;
rbComp.y = event.target.y;
rbComp.height = event.target.height;
rbComp.width = event.target.width;
// Make sure rubber band is on top of all other components.
v1.setChildIndex(rbComp, v1.numChildren-1);
rbComp.visible=true;
// Add event handlers so that the SystemManager handles
// the mouseMove and mouseUp events.
// Set useCapure flag to true to handle these events
// during the capture phase so no other component tries to handle them.
systemManager.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
systemManager.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true);
}
// Resizes the rubber band as the user moves the cursor
// with the mouse key down.
protected function mouseMoveHandler(event:MouseEvent):void
{
event.stopImmediatePropagation();
rbComp.height = rbComp.height + event.stageY - initY;
rbComp.width = rbComp.width + event.stageX - initX;
initX = event.stageX;
initY = event.stageY;
}
// Sizes the panel to the size of the rubber band when the
// user releases the mouse key.
// Also removes the event handlers from the SystemManager.
protected function mouseUpHandler(event:MouseEvent):void
{
event.stopImmediatePropagation();
// Use a minimum panel size of 150 x 50.
if (rbComp.height <= 50)
{
resizingPanel.height = 50;
}
else
{
resizingPanel.height = rbComp.height;
}
if (rbComp.width <= 150)
{
resizingPanel.width = 150;
}
else
{
resizingPanel.width = rbComp.width;
}
// Put the resized panel on top of all other components.
v1.setChildIndex(resizingPanel, v1.numChildren-1);
// Hide the rubber band until next time.
rbComp.x = 0;
rbComp.y = 0;
rbComp.height = 0;
rbComp.width = 0;
rbComp.visible = false;
systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
systemManager.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true );
}
private function handleImageComplete(event: Event): void
{
var bitmap: Bitmap = ((event.target as Image).content as Bitmap);
if (bitmap != null)
{
bitmap.smoothing = true;
}
}
// Creation complete event handler adds the resizing event.
// resizeButtonClicked is a custom event type for this application.
protected function creationCompleteHandler():void
{
addEventListener(RESIZE_CLICK, resizeHandler);
setResize();
}
]]>
</mx:Script>
<!-- The Canvas is the drag target -->
<mx:Canvas id="v1"
width="500" height="500"
borderStyle="solid"
backgroundColor="#DDDDDD"
dragEnter="doDragEnter(event);"
dragDrop="doDragDrop(event);">
<myComp:DragPanel id="dp1" title="Drag Panel 1"
paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
x="19" y="10"
horizontalAlign="center" verticalAlign="middle"
width="30%"
height="100%"
resize="setResize()"
creationComplete="myPanelCCHandler(event);">
<mx:VBox id="vbox" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:HBox id="hbox" width="100%" height="100%" borderStyle="solid" borderColor="0x000000" backgroundColor="green">
<mx:Spacer width="15"/>
<mx:Image id="img"
width="100%" height="100%"
scaleContent="true"
horizontalAlign="center" verticalAlign="middle"
source="{imagen1}"/>
<mx:Image id="select" source="{imagen2}" width="15" height="15" verticalAlign="top" horizontalAlign="right"/>
</mx:HBox>
<mx:Label text="circle"/>
</mx:VBox>
</myComp:DragPanel>
<myComp:RubberBandComp id="rbComp" x="0" y="0" height="0" width="0" visible="false"/>
</mx:Canvas>