When you create an application it comes with a default application icon provided by Cocoa that appears in the Dock when your application is loaded.  To give your application it’s own sense of self you will want to change this icon by providing one of your own.

In this series of articles we will be playing around with the Application Icon and some of the functionality that is available through Cocoa for adding badges and getting the users attention when something happens in the application.

What we will learn:

  • Creating and adding an icon to your application.
  • Adding a badge to the icon in the Dock – Feb 03
  • Manipulating the Application Badge
  • Getting the users attention: Informational and Critical
  • Adding a context menu to the Application Icon in the Dock

Creating the Application Icon

First an icon will need to be created for the application if you do not have one already.  This can be pretty much any graphics format because we will be converting them into an .icns file that the Mac OS X uses.

Go ahead and fire up your favorite graphics package, create the graphical icon for your application and come back.  If you already have one then you are ahead of the game.

For those that do not have one and just want to follow along, I have provided a link to the PhotoShop .psd file used in the artible CocoMono.psd.

Icon Composer

The Icon Composer is a free utility delivered with Apple’s developer tools.  It is a simple application with one purpose which is to convert your graphics files to Apple’s icon format.  You can not edit the graphics within this application so all the heavy lifting of editing and getting it perfect is done externally.

You can find the Icon Composer by navigating with Finder to /Developer/Applications/Utilities/Icon Composer.app.  Double click the application to open it.

figure 1.1

Figure 1-1  Showing Apple’s Icon Composer screen.

As you can see there are 5 different sizes of icons you can use.  Add your images to each size box labeled.  You can do this by selecting your image file and drag-dropping it onto each size box that you plan on using.  Icon Composer automatically converts your image into the correct format and size for you.

  • Another plus is that it handles .PSD files from PhotoShop as well.  If you have a .psd file dragging and dropping that file works the same as any other graphics file.

Here is the result of my attempt.  Please excuse the artwork as am what you would call “graphically challenged”.

figure 1.2

Figure 1-2.  Showing the Icon Composer window with cocoa-mono graphics.

Now all that is left is to save that file out to a location of your choosing.  The shortcut Cmd+S will save the file or from the menu File > Save.  Remember the location because we will be using the resulting .icns file in our project.

Adding the Icon to a MonoMac project

Create a new MonoMac application (or use an existing one if you have one) so we can add the Icon file to our project.  If you are just starting out you can see how to create a new project by reading the article Chapter 2 of the Exploring Cocoa with MonoMac and C#.

Once you have your project loaded you will need to add the file.  You can do this by dragging the .icns file you just created onto your project.  This will present you with a screen asking how you would like to add the file.

figure 1.3

Figure 1-3.  Showing the action screen of the drop of the .icns file to your project.

Choose the option Copy and you will see that the file is added to your project.  This can also be done by right clicking the project file, selecting Add > Add Files from the popup context menu which presents a file browser for you to navigate to the file.

To make sure that the file is available to your application you will need to tell MonoDevelop that is should be included in the build of your application.  This is done by right clicking on the .icns file just added, selecting Build Action > Content from the popup context menu presented.

figure 1.4figure 1.5

Figure 1-4. Showing the context popup Build Action options for the new .icns file

Info.plist and the plist Editor

Now that we have the icon available to the application during run time we now need to tell the application to use that file.  Locate the file Info.plist within your application and double click it.

figure 1.6

Figure 1-6. Showing the application’s Info.plist file within a project

Double clicking the Info.plist opens the plist editor (Figure 1-7).  The Info.plist is added by default to all projects created by MonoDevelop using the create new MonoMac project template. It provides information about your application to the operating system, one of which is the name of the application’s icon file which we will need to add.

figure 1.7

Figure 1-7.  Showing Info.plist of the sample application DockAppIcon

At the top of the plist editor you will find a tool bar with two items.  What we are looking for is the Add Child tool item.  Click it to add a new item.  This will present a selection asking you what type of item to add (Figure 1-8).  The item type we are looking for is ‘Icon File’, locate that and select it (Figure 1-9).  For the Value enter the name of the .icns file that was added (Figure 1-10) and press Enter to commit your changes.

figure 1.8

Figure 1-8.  Showing the new item selection after Add Item tool item is clicked.

figure 1.9

Figure 1-9.  After icon file item is selected.

Screen shot 2011-02-01 at 10.50.08 AM

Figure 1-10.  Showing the value being edited with the name of the sample application .icns file.

Make sure you save the changes, you can use the short cut Cmd+S.  That should be it to get your application icon included in the Dock.  Now all that is left is to build and run your program to see if all is working.

Summary

You should now have your new Application Icon showing in the Mac’s Dock for your application.

In this article we have learned how to replace the default application icon provided by Cocoa with one of our own graphics that better represents the application.

We can now move on to some of more interesting things we can do with your dock icon once you have it added.  In the next few articles dealing with the Application Icon we will be manipulating the DockTile to do some interesting tricks, one of which is including badges to display on the icon like the Mail.app.  This article mentions a sample, DockAppIcon, that we will introduce in the next article when we start talking about the code.