Resizable Flex Components

By
Rob
Published: May 4, 2009Posted in: Adobe FlexTags:

I had someone ask me about resizable components in Flex. Unfortunately, flex doesn’t have this natively. Most of the examples I’ve seen are wrappers to achieve this. Here’s an example I put together using OjectHandles from Rogue Development and code from this thread. Double clicking the text box focus on and off isn’t ideal but it’s a start: 

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
      xmlns:oh = "com.roguedevelopment.objecthandles.*"
      >
 
      <mx:Script>
            <![CDATA[
 
                  import com.roguedevelopment.objecthandles.*;
 
                  public var defaultCursors:ObjectHandlesMouseCursors2 = new ObjectHandlesMouseCursors2;
                  private function toggleEditDrag():void {
                if(ObjectHandlesInstance.allowHMove == true) {
                        // Turn on text editing.
                        ObjectHandlesInstance.allowHMove = false;
                        ObjectHandlesInstance.allowVMove = false;
                        ObjectHandlesInstance.mouseChildren = true;
                        trace(ObjectHandlesInstance.mouseCursors);
                        ObjectHandlesInstance.mouseCursors = null; 
                        SomeTextArea.setFocus();
                }
                else {
                        // Turn on drag/resize.
                        ObjectHandlesInstance.allowHMove = true;
                        ObjectHandlesInstance.allowVMove = true;
                        ObjectHandlesInstance.mouseChildren = false; 
                        ObjectHandlesInstance.mouseCursors = defaultCursors; 
                        ObjectHandlesInstance.setFocus();
                }
        }
 
            ]]>
      </mx:Script>
 
 
      <oh:ObjectHandles id="ObjectHandlesInstance" x="257" y="335" width="107" height="108" minHeight="30" minWidth="30" doubleClick="toggleEditDrag();" doubleClickEnabled="true"    >
      <mx:TextArea width="100%" height="100%" id="SomeTextArea" />
      </oh:ObjectHandles>
 
 
</mx:Application>

The actual OjbectHandles class source is pretty lengthy. If you don’t have the time to sift through it to customize it, you may go with Doug McCune’s example seen here (source provided). Doug also references “underriding” native framework classes like the UIComponent class to enable the resize functionality in all components. I’ve got mixed feelings about this one. It’s a clever, it’s quick, it gets you out of a jam sometimes but it’s prone to regression errors and harder to maintain, in my experience, in a team environment. Porting code from AS 2.0 to 3.0 was a big enough stink and this technique has a hint of the same odor. I hate rewriting code so that’s why I’m a little gun shy on this one.