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.

Dynamically changing the browser title in ActionScript

Many of you have probably set the Application.pageTitle property. But as the documentation says, that property can only be set in MXML. So how do you change it dynamically in ActionScript?

One way that I found is to use the ExternalInterface class and use JavaScript like this:

ExternalInterface.call("eval(window.document.title = 'New Title')");

Obviously you'd want to escape any single quotes in the new title.

One other way I found to do this is using the BrowserManager(if you have it enabled):

var browser:IBrowserManager = BrowserManager.getInstance(); browser.init("", "New Title"); // or this way: browser.setTitle("New Title");

Hope this helps!

Flex application slows down over time

I have been working on a simple Flex application that draws many rectangles in one of five different colors on a Canvas. I created a Sprite object which I used to do the drawing. At first I was drawing each rectangle like this:

var g:Graphics = sprite.graphics; g.beginFill(0xff0000, 1); g.drawRect(0, 0, 20, 20); g.endFill();

But I noticed when I was drawing hundreds of rectangles over time (using a Timer object to paint new rectangles every few hundred milliseconds) this got to be pretty slow.
So my next attempt to improve performance was to cache a BitmapData object for each rectangle (they are all the same size) of a certain color:

// initialize the cache in the constructor var cache:Dictionary = new Dictionary(); // paint each rectangle: var color:uint = 0xff0000; var data:BitmapData = cache[color]; if (data == null) {     data = new BitmapData(20, 20, false, color);     cache[color] = data; } g.beginBitmapFill(data); g.drawRect(0, 0, 20, 20); g.endFill();

This definitely improved the performance a lot, now I can draw hundreds of rectangles, but I still noticed that the rendering would slow down after a few minutes. Thankfully I came across this posting on Nabble: http://www.nabble.com/-INFO--FLEX-Effects-slowing-down-with-time-td20770945.html

Perhaps this is obvious to most people, but I was never calling graphics.clear()! So over time my sprite's graphics object was getting filled with thousands of rectangles to paint. As soon as I added sprite.graphics.clear() to my updateDisplayList() function it worked perfectly.