IconUtility Component for Dynamic Run-Time Icons
I’ve seen a number of emails on the flexcoders mailing list and even a few blog posts that are asking a very specific question: “How do you use run-time loaded images as the icon for buttons, containers, and related components?”. The answer they’ve gotten so far is that you can’t, at least not without creating a lot of custom components. The icon styles built into the Flex framework were only intended for embedded graphics. Although internally they can work with almost any DisplayObject as the icon, the styles and properties themselves are typed as Class. So how can you turn a DisplayObject into a Class?
To be honest, I hit my head against the wall on this one for a handful of evenings. In the end I came up with two workable solutions. Arguably the cleanest way would be to take the run-time loaded graphics, dynamically generate the bytes for a swf which contains that image as a BitmapAsset, and then load the swf to retrieve the generated Class. This would allow you to assign an honest to goodness BitmapAsset Class to the icon property. The problem I had with this method is that it wouldn’t be very easy for developers to use. Even if I created a class to generate the swf from a Loader, there would be some ActionScript involved for the developer to wait for the swf to be loaded and assign the resulting class to the right place. After thinking it through, I decided not to implement this solution. Instead, I found a way to turn the original question on it’s head.
After stepping through the code that handles the icon assignment a few times, I realized the original question, “How can you turn a DisplayObject into a Class?” should really be phrased “How can you reference a Class which displays the right DisplayObject when instantiated?”. This is an easier problem to solve. For my first attempt, I’ve created the IconUtility class. It includes a static method which accepts a url and a component reference, then returns a reference to the IconUtility class itself (which happens to extend BitmapAsset). When the class is instantiated, it will use the information you have passed in to determine which image should be displayed. I’ve decided to release it through my blog for now, since it is still unpolished and a bit of a hack.
<mx:Button id="example" label="Example" icon="{IconUtility.getClass(example, 'http://www.exampledomain.com/image.jpg')}" />
Example: IconAssociations
Download: IconUtility Class (302 kb)
Ben Stucki
BenStucki on Twitter
Ben Stucki on XBox
Subscribe to RSS
mail@benstucki.net
Nice bro, cool answer to a nasty problem. Still I think the proper fix here is having protected properties in the original component so we can access them :). But you Icon util is the shiz!!
Beautiful solution, way to “turn the question on its head” — I like that!
Now to see if it actually does what you say it does!
-Patrick
why not use setStyle(“icon”, iconClass)?
A clever solution. Good job, sir. :)
As one of the more recent to ask this on flexcoders, I really appreciate your sharing this. I already did the AssetsLibrary solution suggested on the list, but I may refactor it to use this instead… it will be a lot more flexible than recompiling the app every time I need a new icon added.
Brilliant and unique solution. Thanks heaps!
I do some modifications at function addedHandler so that the utility can work with Panel and Tab. Share below:
private function addedHandler(event:Event):void {
if(parent) {
if(parent is AccordionHeader) {
var header:AccordionHeader = parent as AccordionHeader;
getData(header.data);
} else if(parent is Tab) {
var tab:Tab = parent as Tab;
if (tab.parent is TabBar)
{
var tabBar:TabBar = tab.parent as TabBar;
if (tabBar.parent is TabNavigator)
{
var tabNav:TabNavigator = tabBar.parent as TabNavigator;
var tabIndex:int = tabBar.getChildIndex(tab);
for (var i:int = 0; i
Great Stuff !
Is there a way to use the Iconutility class for Tree so icon can be downloaded
dynamically from server based on tree node types ?
Thx
Thank you so much for this. I’ve been banging my head against a wall trying to figure this out for several days now. This is exactly what I needed.
[...] short time ago, Ben Stucki created a class to load external images as icons for Flex components. It’s a very clever solution. He uses a Dictionary to associate the image path with the intended [...]
Hi,
thanks a lot for this class !
Now I modified it so it possible to use it to display Tree icons.
I don’t want to paste the whole class again so here are only the relevant lines in IconUtility.as:
…
private function getData(object:Object):void {
var data:Object;
if (object is TreeItemRenderer)
data = dictionary[object.owner];
else
data = dictionary[object];
if(data) {
…
to use it with a Tree:
and the iconFunction should look like this
private function getNodeIcon(item:Object):Class {
var imgUrl:String = “…”;
return IconUtility.getClass(mytree, imgUrl);
}
Hope this helps.
Thanks for this – it works nicely.
I have tweeked it minorly to use it with a Tree:
change:
target:UIComponent
to
target:Object
so that we can specify XML as a target, for use by TreeItemRenderer
(this may have some loading ramifications; I haven’t thoroughly tested…)
Back in the Tree definition, which includes iconFunction=treeIcon attribute:
Tree data node has iconUrl attribute:
my Tree iconFunction:
public function treeIcon(item:XML):Class
return IconUtility.getClass(item, item.@iconUrl, 16, 16);
}
Tyson
[...] Stucki has come up with a cool IconUtility class that lets you overcome this limitation. I just used it in a project and it works great. The [...]
[...] Dynamic Run-Time Icons in Flex (Thanks To: Ben Stucki at Ben Stucki) [...]
[...] adding icon to a Panel title dynamically. When it is embedded, there is no problem. Than I found IconUtility Component for Dynamic Run-Time Icons and hoped everything will be fine in 5 minutes. I just tried [...]
[...] IconUtility Component for Dynamic Run-Time Icons IconUtility Component for Dynamic Run-Time Icons [...]
[...] recently i needed a way to generate small preview-thumbs and put them on flex’ Buttons – as it turned out, it isn’t that easy to use dynamic contet as icons at all. after some while i found a nice way to put dynamically loaded images in icons: ben stucki’s IconUtility. [...]
[...] that is going to be used.
[...] Icons f