Jeethu Karthik

Selection Rectangles. Yup! Those things that come when you click and drag your mouse on your desktop. Well how do you implement them in a Flash/Flex environment? Pretty easy…

Click anywhere on the demo and drag to see the selection rectangle. On the top right, the number of items selected is displayed. Like it? Lets look at the code.

FlexSelectionRectangle.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="{init()}"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]" width="800" height="600">

<mx:Style>
.selectionRectangleStyle {
backgroundAlpha: 0.3;
backgroundColor: #067EE3;
borderColor: #FFFFFF;
borderStyle: inset;
borderThickness: 2;
cornerRadius: 0;
}
</mx:Style>

<mx:Script source="script.as"/>

<!-- A bunch of controls to play with -->
<mx:Button label="Button" horizontalCenter="26" verticalCenter="3"/>
<mx:Button label="Button" horizontalCenter="-197" verticalCenter="-193"/>
<mx:CheckBox label="Checkbox" horizontalCenter="166" verticalCenter="-218"/>
<mx:DataGrid horizontalCenter="219" verticalCenter="111">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
<mx:DateChooser horizontalCenter="-284" verticalCenter="6"/>
<mx:RadioButton label="Radio" horizontalCenter="155" verticalCenter="-157"/>
<mx:TextArea horizontalCenter="-39" verticalCenter="-181"/>
<mx:Label text="Click and drag to see a selection rectangle" fontSize="16"

horizontalCenter="3" verticalCenter="-72"/>
<mx:DateField horizontalCenter="-115" verticalCenter="36"/>
<mx:LinkButton label="LinkButton" horizontalCenter="-330" verticalCenter="-133"/>

<!-- To display some output -->
<mx:Label
id="output_txt"
right="10" top="10"
fontSize="14"
color="#00AED3" fontWeight="bold"/>
</mx:Application>

script.as

import mx.containers.Canvas;</span></span>

/* This canvas will act as the selection rectangle. */
private var selectionRectangle:Canvas;

/* A reference rectangle object to size my selection canvas */
private var r:Rectangle;

[Bindable] private var selectedItems:Array = new Array();

private function init():void {
/* Set the event listeners */
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
this.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);

selectionRectangle = new Canvas();
selectionRectangle.setStyle("styleName", "selectionRectangleStyle");

r = new Rectangle(0,0,0,0);
}

private function onMouseDown(e:MouseEvent):void {
/* Instantiate the referece rectangle at the mouse-downed coordinates*/
r = new Rectangle(Number(e.stageX),Number(e.stageY),0,0);

//Apply the x,y,width and height properties to the canvas
selectionRectangle.x = r.x;
selectionRectangle.y = r.y;
selectionRectangle.width = r.width;
selectionRectangle.height = r.height;

//Add to stage
addChild(selectionRectangle);
}

private function onMouseUp(e:MouseEvent):void {
//Get an array of items on stage
var children:Array = this.getChildren();

selectedItems = new Array();

/* Find items that intersect with the selection rectangle */
for(var i:uint = 0; i< children.length; i++) {
if((children[i] as DisplayObject) != selectionRectangle)
if(selectionRectangle.getRect(this).intersects((children[i] as DisplayObject).getRect(this)))
selectedItems.push(children[i]);
}

//Remove the selection rectangle
removeChild(selectionRectangle);

//Show output
output_txt.text = selectedItems.length + " items selected";
}

private function onMouseMove(e:MouseEvent):void {
//Keep resizing the Rectangle object and the canva
r.bottomRight = new Point(e.stageX, e.stageY);

selectionRectangle.x = r.x;
selectionRectangle.y = r.y;
selectionRectangle.width = r.width;
selectionRectangle.height = r.height;
}

Lets start from the beginning. First, i set the event listeners for the MouseDown, MouseUp and MouseMove event. I’m using a Canvas object as the selection rectangle. It can be replaced with any custom component. And finally i have a Rectangle object.

On MouseDown, I instantiate the Rectangle object to the current mouse x and y co-ordinates. Then set the x, y, width and height of the canvas object to that of the rectangle object. Why am i doing this? Well you can try to do this without having a rectangle object. Try setting the Canvas’ properties directly from the MouseEvent.stageX and MouseEvent.localX values. It wont work. Try it out.

On MouseMove, the Rectangle object is resized and the values are reflected on the Canvas object.

On MouseDown, the selectedItems array is populated with all the children which came under the selection. Its done using the intersects() function of the Rectangle class. From here any function that implements some action to be taken on selection, can be called. The code might be kinda rough. I intend to polish it a bit and make it into a reusable component soon.

So there it is. Flex Selection Rectangle!