Object Handles with Flex 4 - quick start guide

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 );

}