Wednesday, March 17, 2010

Custom Components Live Preview (Design Mode)

If you have created your own component and you drag it onto your Flex app in Design Mode and it appears as a tiny almost invisible square on your screen, then watch the video below to see how you can get it working properly (like the default controls do).

I found this awesome video tutorial on YouTube that explains how you can create what is called a Live Preview of your component so that your custom component actually appears with the right appearance and dimensions.



Be sure to check out the author's blog at blog.flashgen.com.

The end result that I learned from this video is that if you have a Flex Project which contains your custom component, and you try to use it in an MXML file then it won't work properly. If the custom component is in a separate Flex Library Project (or SWC) then it will work properly.

1 comment:

Scott said...

Hi Chris,

I'm using your solution for the resizable title window for Flex 3. It works great. I added one small feature: show a hand cursor when the hovering over the draggable part of the popup. Updated function below:

protected function drawResizeHandle(unscaledWidth:Number, unscaledHeight:Number):void {
if (resizeHandle.parent == null) {
rawChildren.addChild(resizeHandle);
}

var g:Graphics = resizeHandle.graphics;
g.clear();
if ((unscaledWidth >= RESIZE_HANDLE_SIZE) && (unscaledHeight > RESIZE_HANDLE_SIZE)) {
var offset:int = 4;
drawResizeDot(g, unscaledWidth - (offset + 8), unscaledHeight - offset);
drawResizeDot(g, unscaledWidth - (offset + 4), unscaledHeight - offset);
drawResizeDot(g, unscaledWidth - offset, unscaledHeight - offset);
drawResizeDot(g, unscaledWidth - (offset + 4), unscaledHeight - (offset + 4));
drawResizeDot(g, unscaledWidth - offset, unscaledHeight - (offset + 4));
drawResizeDot(g, unscaledWidth - offset, unscaledHeight - (offset + 8));
}
resizeHandle.useHandCursor = true;
resizeHandle.buttonMode = true;
}