Flex - Create a Dashboard That Allows Drag and Resize
October 21st, 2009
NOTE: I recently discovered that the resize functionality of these widgets is poor on a Mac, so I'm working on an improved code sample. Stay tuned...
Here's the very beginnings of a dashboard application that will allow you to drag widgets around and resize them. This could be the beginning of a great project tutorial. I've already got lots of ideas for adding on to this simple protoype. It could also serve as a good introduction to object oriented programming concepts because the main class in the project serves as a base class for all widgets that are added to teh dashboard. It's basically a Flex container that has a button labled 'M' (for move) and another one labeled 'R' (for resize). So you could extend the WidgetBase class to make your own widgets and they will inherit the move and resize functionality from the base class.
Here's the application mxml file, which serves as the dashboard that contains our widgets:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:dashboard="dashboard.*"
layout="absolute" width="520" height="400"
borderColor="black"
backgroundColor="white"
borderStyle="solid"
borderThickness="1"
creationComplete="init()">
<mx:Script>
<![CDATA[
private function init():void{
var widget1:WidgetBase = new Widget1();
addChild(widget1);
var widget2:WidgetBase = new Widget2();
widget2.x = 400;
addChild(widget2);
}
]]>
</mx:Script>
</mx:Application>
Here's the base class, note that it's in a package named 'dashboard':
package dashboard
{
import flash.events.MouseEvent;
import mx.containers.Canvas;
import mx.controls.LinkButton;
//I tried to make this an mxml component, rather than a class,
//but I got an error.
//here's a link to an explanation...
//http://www.munkiihouse.com/?p=37
public class WidgetBase extends Canvas
{
private var lbMove:LinkButton;
private var lbResize:LinkButton;
public function WidgetBase()
{
super();
//create the control to allow the widget to be moved...
lbMove = new LinkButton();
lbMove.label = "M";
lbMove.setConstraintValue("top",0);
lbMove.setConstraintValue("right",0);
lbMove.addEventListener(MouseEvent.MOUSE_DOWN,startMove);
lbMove.addEventListener(MouseEvent.MOUSE_UP,stopMove);
addChild(lbMove);
//create the control to allow the widget to be resized..
lbResize = new LinkButton();
lbResize.label = "R";
lbResize.setConstraintValue("bottom",0);
lbResize.setConstraintValue("right",0);
lbResize.addEventListener(MouseEvent.MOUSE_DOWN, startResize);
lbResize.addEventListener(MouseEvent.MOUSE_OUT, stopResize);
lbResize.addEventListener(MouseEvent.CLICK, stopResize);
addChild(lbResize);
//
this.addEventListener(MouseEvent.MOUSE_MOVE, checkMovePosition);
}
private function startMove(evt:MouseEvent):void{
//note: startDrag() and stopDrag() are methods of Sprite, //which is a super class of Canvas
this.startDrag();
}
private function stopMove(evt:MouseEvent):void{
this.stopDrag();
}
private function startResize(evt:MouseEvent):void{
lbResize.addEventListener(MouseEvent.MOUSE_MOVE,resize);
}
private function stopResize(evt:MouseEvent):void{
lbResize.removeEventListener(MouseEvent.MOUSE_MOVE,resize);
}
private var prevX:Number = 0;
private var prevY:Number = 0;
private function resize(evt:MouseEvent):void{
if(prevX > 0 && prevY > 0){
this.width += (mouseX - prevX);
this.height += (mouseY - prevY);
}
prevX = mouseX;
prevY = mouseY;
}
private function checkMovePosition(evt:MouseEvent):void{
if(this.x < -10 || this.y < -10){
this.stopDrag();
this.x = 0;
this.y = 0;
}
}
}
}
Here's the first incarnation of a widget:
<?xml version="1.0" encoding="utf-8"?>
<WidgetBase xmlns="dashboard.*" xmlns:mx="http://www.adobe.com/2006/mxml"
width="300" height="300"
backgroundColor="white"
borderStyle="solid"
borderColor="black"
borderThickness="4" >
<mx:Label text="Widget1" />
</WidgetBase>
As I mentioned earlier, I've got lots of ideas for exanding on this prototype, so if you find this sample code useful, check back for updates in the future.
