Friday, December 12, 2008

Resizable Movable Panel

Following on the examples I found at this blog http://blogs.adobe.com/flexdoc/2007/03/creating_resizable_and_draggab.html

** I've posted an updated version here that has more advanced resize/move support.

I created my own resizable window component which extends TitleWindow. It renders a small resize handle in the bottom right corner of the panel which the user can drag to resize the window. To make the window resizable, set the resizable property to true.

The window can also be dragged by the titlebar to move it (assuming that it is the child of a container that uses an absolute layout). To make the window movable, set the movable property to true. Then you'll see a drag handle in the titlebar.

The example below uses the PopUpManager to show the window as a popup (which lets the user move the panel around the screen). You can view the source from the context menu. This window also listens for Enter and Escape keyboard events which both hide the popup. The window is hardcoded to have a min width and height of 20, and a max width/height of the application's width/height.

8 comments:

Valentijn Langendorff said...

great help! thanx - Valentijn -multimediaal.nl

Anonymous said...

Excellent!

Andrew said...

Worked like a charm.

I tried a few others and this was the cleanest, easiest solution.

yonghan said...

Thanks a lot..

ta said...

Hi Chris,

after reviewing a few existing solutions I adopted your code, made a few changes and improvements here and there. If you want, I can email you my version.

It adds support for maximizing a window and to prevent the user moving it off screen, plus a few other things.

Email me at thomas dot auinger at byteconsult dot de

julio said...

Thanks a lot from Spain :-D

Anonymous said...

You rox dude ! :)

Anonymous said...

Nice technical blog! Keep helping..!