Drag-and-Resize with Flex
Flex has great support for drag-and-drop functionality. But what happens when you’re not interested in drag-and-drop, but rather drag-and-resize? Take an application like the Restaurant Finder where highlighting a section of a map is key to filtering the displayed data. Rather than dragging a fixed size rectangle around the map, I wondered if it would be possible to let the end user resize the rectangle to get a more refined view of the available restaurants? It turns out that by using a combination of events and by tracking mouse movements it is possible to achieve this functionality.
First and foremost I’d like to thank Todd Rein in the Macromedia Flex Solutions group for sharing with me his example of this functionality. It’s Todd’s algorithm that allows the rectangle to resize inversely across its boundaries.
Interestingly enough, in order to achieve drag-and-resize, we forego the DragManager class altogether. We’ll also forego layout management. We’ll start with a Canvas, and place an HBox on the Canvas to represent the area covered. We follow this up by placing small HBox’s on top of the first HBox to represent the “handles” by which we’ll accomplish the drag-and-resize.
If you’re a Flash developer, you’re likely thinking that we could use MovieClip.startDrag() on the handles. As it turns out this can conflict with the existing drag events deeper in the component UI model. There’s also the potential hurdle in telling the “area rectangle” that it needs to resize, which can meet with scrollbars as clipping occurs. If we’re going to leave MovieClip.startDrag() behind, then how can we monitor the mouse events necessary to perform a resize operation?
I know you shouldn’t answer a question with a question, but have you ever wondered what those UIObject.mouseXYZSomewhere() methods are for? In this case they’ll serve as high-level notification events for our resizing functionality. When a “handle” box gets clicked we’ll track which handle it is and subsequently where the mouse itself moves. We can then calculate the difference and resize and/or position the “area rectangle” appropriately.
I have some other plans for this example, and I hope to post that progress in the near future. Think of some of the applications that use this UI metaphor. Just off the top of my head there’s Dreamweaver, Fireworks, Flex Builder and even Flash itself in the Macromedia product line-up alone. The source code is available for download and the obligatory Captivate demo follows.