Making Your Widget Resize Dynamically

UPDATE: Check out A Better Way To Zoom Your Custom Widgets.

If you’ve hand drawn a widget, one of the first problems you’ll run into is handling different resolutions.  It can be a daunting task after producing your first custom visualization, but it’s actually not too bad.  The main thing you’ll want to consider is relative positions to the controls width and height, and be sure to always draw relative to that.  I know that’s vague, but today’s post will talk about catching and handling resizing of the window in just a few simple lines of code.

If you have a main function that builds your control, simply add this to the end of it:

this.addEventListener(ResizeEvent.RESIZE, buildControl)
And so you don’t run into trouble while you’re working, add this to the beginning of your buildControl function to suppress further resize events (such as dragging the window sizer:

this.removeEventListener(ResizeEvent.RESIZE, buildControl);
Now whenever your control size changes by the window being maximized or the window size being changed by dragging, your control can redraw.  Just make sure that your code checks the this.width and this.height in order to do it’s scaling.  Since you’ll now be running your buildControl() function multiple times, you’ll also want to be sure to clear everything at the start:

this.removeAllChildren();
Note that if you were using any XML objects, these would be removed from that command as well.  This is one of the cases where I like to put all of my custom graphics into a Canvas object so that you can reference that single object and remove it from the screen.  When you declare your Canvas, just add a name to it so you can find it later:

var canvas:Canvas = new Canvas();
canvas.name = "MyCanvas";
Then later, if you don’t want to do the removeAllChildren(), you can just remove the Canvas object by doing:

this.removeChild(this.getChildByName("MyCanvas"));