gskinner.com: gBlog: DisplayObjectWrapper for Flex

Posted on March 14, 2007 by Grant Skinner

One of the challenges in using rich assets like images or Flash symbols in Flex is making them compatible with the Flex layout managers. There are a few ways to do this (some of which will be topics of future posts), but one of the easiest is to wrap the asset in a UIComponent instance that translates between the Flex layout API, and the basic Flash Player transformation API shared by all DisplayObjects.

I built a simple example of such a class, called DisplayObjectWrapper, which you can download and use or extend freely. It does a good job of translating Flex layout into resizes for it’s content, and vice versa. It’s super simple to use via mxml:

// mxml, syntax 1:
<local:DisplayObjectWrapper>
<DisplayObjectToWrap/>
</local:DisplayObjectWrapper>
// mxml, syntax 2:
<local:DisplayObjectWrapper content="com.gskinner.MyClass"/>
// where content is either a qualified class name as a string
// mxml, synax 3:
<local:DisplayObjectWrapper content="{ myInstance }"/>
// content can also be an expression resolving to a class definition or a DisplayObject instance

It’s also simple to use with ActionScript:

// in a script block (ex. in an initialization handler):
var dow:DisplayObjectWrapper = new DisplayObjectWrapper();
dow.content = new Sprite(); // or any DisplayObject instance
myContainer.addChild(dow);

There are a couple of useful properties, like content, which lets you set or access the content (to call methods on a Flash symbol for instance: myDOW.content.stop(); ), and watchSize which lets you specify whether the DOW should keep an eye on your symbol’s size, and trigger layout invalidation when it changes (if it’s animated for instance).

Here’s a (very) simple demo that you can download, which uses an embedded animated Flash symbol to demonstrate watchSize.

You can download the DisplayObjectWrapper class and this demo by clicking here.

Follow @gskinner on Twitter for more news and views on interactive media.

9 Comments

very useful, thanks Grant

Posted by: Stefan Richter on Mar 16, 2007 4:07am URL: http://www.flashcomguru.com

so good,but could u talk about the elements of this?

for example

what's the "mx_internal::_width " ?

why override the "measure()" method ?

Posted by: chenxin on Mar 17, 2007 10:29am

How would this be done fully in ActionScript? Say you want todo this inside a component that has a linked class and your not really using any MXML except for a Canvas.

I can create a Loader and load the class as a ByteArray just fine, but when I try to create a DisplayObjectWrapper and set content to the class var name, nothing displays when it is added to the screen.

Posted by: Jon Valliere on Mar 30, 2007 9:01am

that was helpful :D thanks... hmm... i was wondering though.. how do you add a tooltip to it from as?

Posted by: callie on Oct 23, 2007 4:38am

Grant, you just made my day!

Thanks a lot for this class.

Posted by: Sander on May 9, 2008 7:47am

Hello Grant,

first i need to thank you for your FlashLib and DisplayObjectWrapper classes, which made my flex life happy again. After i recevied animations and other assets from our flash8-designer/animator, i was slighlt depressed. But, luckily FlashLib enabled these aniamtions to work perfectly in Flex framework, all simple as commanad (goto..stop..) work just like snap.

And display objejct wrapper...:-)) really very nice sollution. I just made one slight modification, since width and height setters operate on content, they wouldn't wok from mxml tags directly, so i just added internal private vars for those, same for width/height getters, so that the flex framework reads the dimmensions ok.

What do you think, am i right or did i just misunderstood your approach. Looking forward hearing from you.

With kind regards

Martin Weiser

Posted by: Martin Weiser on Jul 7, 2008 11:48am URL: http://flex.dna01.net/cs3@flex/skinner/

Hi Grant,

I am successfully using your great solution.

But, do you happen to know how to get a non flash object dynamically filled in a Repeat, in mxml?

A very simple example:

Gives the Error:

"Unable to generate initialization code within Repeater, due to id or data binding on a component that is not a visual child."

People working with DataGridColumn also get this Error in some occasions.

With kind regards

Peter

Posted by: Peter on Aug 14, 2008 5:20pm

Sorry, my example didn't seem to work in this example.

You can look it up here:

http://www.kirupa.com/forum/showthread.php?p=2373792#post2373792

Peter

Posted by: Peter on Aug 14, 2008 5:49pm

thank you very very much!

Posted by: danh on Dec 3, 2009 11:44am

DisplayObjectWrapper for Flex

Posted on March 14, 2007 by Grant Skinner

9 Comments

Leave a Reply Cancel reply