How to Make Application Icons Appear During AIR Development

If you’ve started building an AIR application, you probably noticed that your application icons don’t appear when launching your app via ADL (ADL is the AIR Debug Launcher, and is what Flex Builder uses to launch and debug your apps). Platform specific icons are created from the PNG files referenced in your application descriptor file at install time which means they aren’t available during development. It would obviously be too costly to generate those icons every time you wanted to launch or debug your code.

This typically isn’t an issue because you usually don’t need to see your application icons during development. However, there are times when you do. For instance, if your application uses a dynamic dock icon, it’s nice to be able to see the "before" icon before seeing the "after" version. I’ve also found that it’s nice to be able to try an icon out for a while during the development process to see how you like it over time which means it should appear every time you debug or launch your app.

Fortunately, I’ve found an easy way to make this work. Here’s what you do:

  1. Make a copy of your application icon and name it something different. One version should be referenced by your application descriptor file, and the other will be compiled into your application. (You don’t technically have to make a copy of the icon, but when generating a release build of your application, Flex Builder doesn’t copy over embedded resources which means your application icon will be missing. Trust me when I tell you that it’s easier to create a copy and avoid this whole issue.)
  2. Compile the copy of your application icon into your application using code like this: [Embed(source="assets/application.png")] public var appIconClass:Class;
  3. In your application’s initialization code, create a Bitmap instance of your icon like this: var appIcon:Bitmap = new appIconClass();
  4. Set your icon like this: InteractiveIcon(NativeApplication.nativeApplication.icon).bitmaps = [appIcon];

This code is a little oversimplified because it doesn’t take platform differences into account. A more complete implementation might do something like this:

  1. Check to see what kinds of icons the client supports. You can do this with the NativeApplication.supportsDockIcon and NativeApplication.supportsSystemTrayIcon APIs.
  2. Scale the Bitmap to the appropriate dimensions for the platform.
  3. Set the icon(s) using the NativeApplication’s icon property.

Since I usually use the Cairngorm framework, I like to create an UpdateIconsCommand which takes care of creating and setting dynamic icons for me. I also like using the as3notificationlib project to help encapsulate some of the platform differences in setting icons.

For a real world example of setting dynamic icons, see my Exchange calendaring application called Lineup (currently being updated to work with Exchange 2007). It sets icons at runtime and even dynamically generates custom icons, all in a way that works well across platforms.

5 Responses to How to Make Application Icons Appear During AIR Development

  1. Sweet, thanks for the tip!

  2. Paulius Uza says:

    Very useful stuff Christian!You have a typo though: Point 3 should be “… new appIconClass();” not “… new alertIconClass();”.

  3. Thanks, Paulius. Fixed.Can you tell I copied and pasted some code? :)Christian

  4. pasensyoso manigbas says:

    Hi, im new to flex development. How can i add mouse over event to system tray icon? Is there any way to do what i want? Any idea would be greatly appreciated..Thnx

  5. Jemson sentillas says:

    I also want to know how to add mouse over event to system tray icon or extend SystemTrayApp to create custom this possible?