Navigation:

Links:

Marc-Hughes.com
AgileAgenda

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. I haven't been able to find anything like that pre-built in flex, so I've started a project to develop one. It behaves as a container object so you can put any other flex component inside it and get the resizeable functionality right away.

Popularity

As of January of 2008 ObjectHandles has been downloaded over 28,000 times! We just started a page on the google wiki to show off projects using ObjectHandles. If you're using it we'd love to put a link up. Visit http://code.google.com/p/flex-object-handles/wiki/ObjectHandlesUsage and post a comment, we'll update the wiki page next time we see it.

Shameless Plug

I use ObjectHandles in a project scheduling application called AgileAgenda, currently in beta you should give it a try.

Features

• 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

Current Progress

The basic functionality all works.

Downloads

Mailing List

We're using Google Groups for discussions, subscribe to it to hear about new releases, etc.

Subscribe to Flex ObjectHandles

Email:

Visit this group

Documentation

ASDocs available

Tutorial

Here's a 14 minute tutorial showing you how to make a simple diagraming application.

Example Usage

First, download the .swc above. Then add it to your FlexBuilder project library path. Then you can use it to your heart's content in your mxml.

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>

Example

			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
			}