A very common UI element found in many applications are those little square handles around an on-screen object that allow you to move & resize it. To do this you can use the great ObjectHandles library.

ObjectHandles (http://osflash.org/projects/objecthandles) is a library to allow a user to move and resize UI elements in a Flex based application.
It provides drag handles around controls that users can manipulate with their mouse. Any Flex component can be placed within an ObjectHandles container to quickly allow you to add functionality.

It behaves as a container object where you can put any other flex components and use its resizeable functionalities.

Features of the ObjectHandles library:

* Move & Resize Functionality for any flex component
* Ability to limit movement and/or resizing in both vertical and horizontal directions
* Ability to limit movement and/or resizing along an anchor
* Simple 1-file (.swc) install
* Mouse cursors change when over different handles
* Graphical handle support
* Aspect ratio support
* Initial rotatation support has been added

ObjectHandles is a very cool library for your project when you want to implement moving & resizing any kind of flex object.

Example usage:

In the example below you'll see two buttons in a vbox that can be moved together. This is the mxml to achieve that:

<oh:ObjectHandles x="10" y="158" width="107" height="108"
minHeight="30" minWidth="30">
<mx:VBox borderStyle="none" top="0" left="0" right="0" bottom="0">
<mx:Button width="100%" height="50%" />
<mx:Button width="100%" height="50%" />
</mx:VBox>
</oh:ObjectHandles>

Or if you want an Actionscript example:

Here's an example to dynamically load an image into an ObjectHandle and allow resize movements:

protected function init() : void
{
var oh:ObjectHandles = new ObjectHandles();
oh.height = 50;
oh.width = 50;

var image:Image = new Image();
image.source = "snowflake.png";
image.percentHeight = 100;
image.percentWidth = 100;
image.maintainAspectRatio = false;

oh.addChild(image);
oh.allowRotate = false;

genericExamples.addChild(oh); // replace genericExamples with a canvas in your application
}

Improving the experience of the ObjectHandles library

When you drag or resize an object from right to left or from up to down everything works great.

But if you to resize the object back (from right to left) you'll see that the inside object will cause a strange flickering.

To prevent this we can use the "Flex Move Effect" and "Flex Resize Effect" instide of change programmaticaly width and height and x and y.

How it actually works:

Inside the ObjectHandles.as Actionscript 3 class, you can find the protected function onMouseMove(event:MouseEvent) : void.
This is the function that moves and resizes UI elements in a Flex based application. Find the following line inside the ObjectHandles.as:

if( wasMoved || wasResized )
{
applyConstraints(desiredPos,desiredSize);
x = desiredPos.x;
y = desiredPos.y
width = desiredSize.x;
height = desiredSize.y;
}

The applyConstraints() method simply applies restrictions to your objects like xAnchor, minium size, etc. The other four lines simply set the x,y coordinates and the width and height properties of the Flex object.

Now let's change this four lines to prevent the strange flicker bug that affects the object :

if( wasMoved || wasResized )
{
applyConstraints(desiredPos,desiredSize);

if(moveEffect.isPlaying){
moveEffect.end();
}
moveEffect = new Move();
moveEffect.target = this;
moveEffect.duration = 1;
moveEffect.xTo = desiredPos.x;
moveEffect.yTo = desiredPos.y;
moveEffect.play();

if(resizeEffect.isPlaying){
resizeEffect.end();
}
resizeEffect = new Resize();
resizeEffect.target = this;
resizeEffect.duration = 1;
resizeEffect.heightTo = desiredSize.y;
resizeEffect.widthTo = desiredSize.x;
resizeEffect.play();
}

It replaces the brutal property changing of the widget with a smoothness move and resize effect provided by Flex.

In the next post we will see how to create a snap to grid and a snap to line effect.

Conclusion and references:

ObjectHandles google code home
Class Move
Class Resize