I'm writing this blog post because it was a nightmare for me to find useful information about using of objectHandles 2.0 with Flex 4 SDK. If you decide to use this library in your project and your project is based on Flex 4 SDK, then you should prepare your self for a real battle.

We are currently working on a project for online creation of Photo books, and our "book customizer" is written in Flex 4. I need to tell you that I'm not a flash, flex or AS 3 guru, but with my earlier experience in AS 2 it was not so difficult to start learning AS 3, Flex SDK, AIR etc. So this blog post is for what I've learned these days working on this project.

Let start with building our custom handles. First you need to crate a new HandleFactory. Open a new AS 3 file and place this code inside:

/src/CustomFlex4HandleFactory.as

// ActionScript file

package
{
	import mx.core.IFactory;

	public class CustomFlex4HandleFactory implements IFactory
	{
		public function CustomFlex4HandleFactory()
		{
		}
		
		public function newInstance():*
		{
			return new MyCustomHandlesClass();
		}
	}
}

As you can see this code is only used to create a new instance of of custom handle, so we need to create now a class which will define or custom handle visual style. Create a new file called "MyCustomHandlesClass.as"

/src/MyCustomHandlesClass.as

// ActionScript file

package
{
	import com.roguedevelopment.objecthandles.HandleDescription;
	import com.roguedevelopment.objecthandles.IHandle;
	
	import flash.events.MouseEvent;
	
	import spark.core.SpriteVisualElement;
	
	public class MyCustomHandlesClass extends SpriteVisualElement implements IHandle
	{
		
		private var _descriptor:HandleDescription;		
		private var _targetModel:Object;
		protected var isOver:Boolean = false;
		
		public function get handleDescriptor():HandleDescription
		{
			return _descriptor;
		}
		public function set handleDescriptor(value:HandleDescription):void
		{
			_descriptor = value;
		}
		public function get targetModel():Object
		{
			return _targetModel;
		}
		public function set targetModel(value:Object):void
		{
			_targetModel = value;
		}
		
		public function MyCustomHandlesClass()
		{
			super();
			addEventListener( MouseEvent.ROLL_OUT, onRollOut );
			addEventListener( MouseEvent.ROLL_OVER, onRollOver );
			//redraw();
		}
		
		protected function onRollOut( event : MouseEvent ) : void
		{
			isOver = false;
			redraw();
		}
		protected function onRollOver( event:MouseEvent):void
		{
			isOver = true;
			redraw();
		}
		
		public function redraw() : void
		{
			graphics.clear();
			if( isOver )
			{
				graphics.lineStyle(1,0x3dff40);
				graphics.beginFill(0xc5ffc0	,1);				
			}
			else
			{
				graphics.lineStyle(1,0);
				graphics.beginFill(0xaaaaaa,1);
			}
			
			graphics.drawRect(-5,-5,10,10);
			graphics.endFill();
			
		}
	}
}

Well this is a good start. To create your own style you should edit the redraw() function. What we have done in this example is to replace the default rectangular handle with circle. Now is time to use this code in our project. In your application file place this code:

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:objecthandles="com.roguedevelopment.objecthandles.*"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="300" creationComplete="application1_creationCompleteHandler(event)" viewSourceURL="srcview/index.html">	<fx:Script>		<![CDATA[
			import net.freesource.CustomFlex4HandleFactory;
			import com.roguedevelopment.objecthandles.Flex4ChildManager;
			import com.roguedevelopment.objecthandles.HandleDescription;
			import com.roguedevelopment.objecthandles.HandleRoles;
			import com.roguedevelopment.objecthandles.ObjectHandles;
			
			import mx.events.FlexEvent;
			
			protected var objectHandles:ObjectHandles;
			
			override protected function initializationComplete() : void
			{
				var handles:Array = [];
				
				handles.push( new HandleDescription( HandleRoles.RESIZE_UP + HandleRoles.RESIZE_LEFT, 
					new Point(0,0) ,
					new Point(-16,-16) ) ); 
				
				handles.push( new HandleDescription( HandleRoles.RESIZE_UP + HandleRoles.RESIZE_RIGHT,
					new Point(100,0) ,
					new Point(-16,-16) ) ); 
				
				handles.push( new HandleDescription( HandleRoles.RESIZE_DOWN + HandleRoles.RESIZE_RIGHT,
					new Point(100,100) , 
					new Point(-16,-16) ) ); 
				
				handles.push( new HandleDescription( HandleRoles.RESIZE_DOWN + HandleRoles.RESIZE_LEFT,
					new Point(0,100) ,
					new Point(-16,-16) ) );
				
				objectHandles = new ObjectHandles( mainGroup , 
					null, 
					new CustomFlex4HandleFactory(), 
					new Flex4ChildManager()
				);
								
				objectHandles.registerComponent( img, img );
				
				super.initializationComplete();
				
			}

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				//This line can be removed, is for axample only
				objectHandles.selectionManager.addToSelected(img);
			}

		]]>	</fx:Script>	<s:Group id="mainGroup" width="100%" height="100%">		<s:layout>			<s:BasicLayout />		</s:layout>		<mx:Image id="img" source="@Embed('/assets/images/phone.jpg')" x="50" y="50" />	</s:Group></s:Application>

Demo: objectHandles 2.0 - create custom handles with Adobe Flash Builder 4 (Flex 4)
Download: objectHandlesWithFlex4.zip