Flex ObjectHandles is a library that gives your visual components the ability to be moved, sized and also rotated, in this guide, you'll be introduced to it by example explaining the use of ObjectHandles to Handle Images.
Usage
download ObjectHandles library from
here, the swc library needed is found under /deploy directory
to Handle your visual components, you need:
an ObjectHandles instance
The main component, that provides to your Visual components the ability to move and resize , you have to register your Components to this object using
myObjectHandles.registerModel(myModel, myVisualComponent);
a Model
the Model class contains visual component Attributes, and implements required interfaces
package flex.images.client.objecthandles {
import com.roguedevelopment.objecthandles.IMoveable;
import com.roguedevelopment.objecthandles.IResizeable;
public class ImageModel implements IResizeable, IMoveable {
[Bindable] public var x:Number = 10;
[Bindable] public var y:Number = 10;
[Bindable] public var height:Number = 100;
[Bindable] public var width:Number = 100;
[Bindable] public var rotation:Number = 0;
[Bindable] public var isLocked:Boolean = false;
}
}
a Visual Component
the component you want to make it moveable, resizeable, and/or rotatable, it also contains the event listener for handling moves, scaling, and rotations
package flex.images.client.objecthandles {
import mx.controls.Image;
import mx.events.PropertyChangeEvent;
public class ImageShape extends Image {
protected var _imgmodel:ImageModel;
public function ImageShape() {
super();
this.maintainAspectRatio = false;
}
public function set model( model:ImageModel ) : void {
if( _imgmodel ) {
$_imgmodel.removeEventListener(
PropertyChangeEvent.PROPERTY_CHANGE,
onModelChange );
}
_imgmodel = model;
x = model.x;
y = model.y;
width = model.width;
height = model.height;
model.addEventListener(
PropertyChangeEvent.PROPERTY_CHANGE,
onModelChange );
}
protected function onModelChange( event:PropertyChangeEvent):void
{
switch( event.property ) {
case "x": x = event.newValue as Number; break;
case "y": y = event.newValue as Number; break;
case "rotation": rotation = event.newValue as Number; break;
case "width": width = event.newValue as Number; break;
case "height": height = event.newValue as Number; break;
default: return;
}
}
}
}
Example
Example showing the load of a dynamic Image and Handling It
- Insert a canvas in mxml file
<mx:Canvas x="100" y="100" width="400" height="440"
id="objectHandlesContainer" ></mx:Canvas>
- In ActionScript3 page/block, insert the following
[Bindable] protected var flexModel:ImageModel;
[Bindable] protected var imgShape:ImageShape;
private function myFunction():void {
/*can be called as an initializer function
to load image handles at page load or called as an event handler to
dynamicaly handle images*/
flexModel = new ImageModel();
imgShape = new ImageShape();
imgShape.model = flexModel;
objectHandlesContainer.addChild(imgShape);
imgShape.source = PATH_TO_IMAGE;
objectHandles.registerComponent( flexModel, imgShape );
}
