IconUtility Component for Dynamic Run-Time Icons

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)

[url]http://blog.benstucki.net/?p=42[/url]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值