Creating Resizable and Draggable Flex Components

I wanted users of a Flex application to be able to move and resize components at runtime so that the user could lay out the components however they wanted. This application lets the user move, resize, and minimize Panel containers much in the way you can in any windowing environment. While this application uses Panel containers, you could generalize it to for any Flex components.

To use it:

– Click down in the header area of a Panel to drag it around the application. Release the mouse when it is where you want it.

– Click down on the lower-right corner of the Panel to resize it. Release the mouse when it is the size you want. You can not set it to a size smaller than 50 pixes high and 150 pixels wide.

– Click the Minimize/Restore icons to hide/show the body area of the Panel.

The following application shows this functionality:

This application uses three files:

* CanvasDD.mxml – Main app that handles the drag/drop and resizing events. Resizing works for any component that dispatches a ‘resizeButtonClicked’ event; there is nothing in the Panel needed to resize it except the logic to determine when to dispatch the ‘resizeButtonClicked’ event.

* myComponents/DragPanel.as – Custom Panel component that adds the minimize/restore functionality, and dispatches a ‘resizeButtonClicked’ event to the main app to handle resizing.

* myComponents/RubberBandComp.as – Custom UIComponet that draws the rubber band on top of a Panel during resizing.

You can download the source code for these examples.