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.
very useful, thanks Grant
so good,but could u talk about the elements of this?
for example
what’s the “mx_internal::_width ” ?
why override the “measure()” method ?
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.
that was helpful 😀 thanks… hmm… i was wondering though.. how do you add a tooltip to it from as?
Grant, you just made my day!
Thanks a lot for this class.
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
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
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
thank you very very much!