You’d think adding a Sprite
to a Flex component would be easy, right?
Sprites extend DisplayObject
, and the addChild() and addChildAt() methods for every Flex component take in an object of type DisplayObject
.
Not quite.
From the Adobe® Flex® 3 Language Reference (emphasis added):
Note: While the child argument to the method is specified as of type DisplayObject, the argument must implement the IUIComponent interface to be added as a child of a container. All Flex components implement this interface.
To add a Sprite to a Flex component, you’d have to extend Sprite
and implement IUIComponent
, which frankly is more effort than its worth.
A far easier solution is to create a custom class that extends UIComponent
and acts as a wrapper for the Sprite.
The constructor for such a class would look something like this:
public function SpriteUIComponent (sprite : Sprite) { super (); explicitHeight = sprite.height; explicitWidth = sprite.width; addChild (sprite); } |
Using this custom class, you would add a Sprite to a Flex component like so:
myContainer.addChild (new SpriteUIComponent (mySprite)); |
Easy.
7 comments
Comments feed for this article
June 24, 2008 at 5:02 am
burnhh
hey there,
an alternative way of adding DisplayObjects to Containers is using the methods rawChildren.addChild and rawChildren.addChildAt although Adobe seems to do it the same way you proposed.
http://www.restlessthinker.com/blog/?p=59
regards,
burn
June 24, 2008 at 7:17 am
Nick Schneble
Nice one!
You can definitely do it either way – I just found it easier to get a DisplayObject inside a UIComponent and then never have to deal with it again! 🙂
October 20, 2008 at 7:00 am
Bookmarks about Sprites
[…] – bookmarked by 4 members originally found by toursexbrazil on 2008-10-04 Adding Sprites to Flex Components https://userflex.wordpress.com/2008/06/12/sprite-uicomponent/ – bookmarked by 5 members originally […]
September 13, 2009 at 6:58 am
Flex and Sprites « Experts-Monologue
[…] full description can be read this informative blogpost Adding Sprites to Flex Components Filed under: Uncategorized Leave a comment Comments (0) Trackbacks (0) ( subscribe to comments […]
July 29, 2011 at 6:38 pm
Garrafa Pet 2 Litros
Nice!
You can also add your DisplayObjects to mxml code:
first create a class that inherit UIComponent and has a property called displayObject
package
{
import flash.display.DisplayObject;
import mx.core.UIComponent;
public class DOComponent extends UIComponent
{
private var _displayObject:DisplayObject;
public function get displayObject():DisplayObject
{
return _displayObject;
}
public function set displayObject(value:DisplayObject):void
{
if (_displayObject == value)
return;
if (_displayObject != null)
removeChild(_displayObject);
_displayObject = value;
updateChild();
}
private function updateChild():void
{
if (_displayObject == null)
return;
explicitHeight = _displayObject.height;
explicitWidth = _displayObject.width;
addChild (_displayObject);
}
public function DOComponent()
{
super();
}
}
}
when the getter is called, the explicitHeight and explicitWidth are updated and the displayObject is added to the UIComponent.
So all you have to do is set the displayObject property properly:
(note that, in flash builder, the xml namespace ‘local’ is added automatically when you tipe ‘<DOComponent' and press Enter on mxml editor, but if you want to do it manually you can add this property to your Application tag: xmlns:local="your.local.package" )
July 29, 2011 at 6:43 pm
Nick Schneble
Nice one!
August 6, 2011 at 2:52 am
lalamax3d
thanks man, you have solved such a huge problem of mine. its almost a year, i wanted to move to flex and this one small concept was biggest hurdle. huge thanks again and all ppl who commented as well for shedding light and touching same topic from other persp aswell.. i found writers approach most suitable for my current needs..