Source lists have become a standard user interface element at this point in the Mac environment. Apple’s Mail, iCal, iTunes, and iPhoto use them, along with many third-party applications including Delicious Monster’s Delicious Library and Panic’s Coda. They’re easily created using an NSTableView or NSOutlineView and changing the selectionHighlightStyle (highlight in Interface Builder) to “Source List”, and soon I’ll post my own version to help anyone along.
However, badges are just as prevalent in current Cocoa applications. They are the small numbers on the right side of source lists, letting you know how many unread emails or new podcasts you have. Yet, I’ve only found one tutorial for how to create them. While it’s an excellent overview, it’s written in Java, so it doesn’t directly port to Objective-C. Fortunately, it’s not difficult, and I’m including the source code from BDBadgeCell.m below for anyone to use (MIT license). I used NSBezierPath to create the oval and a bit of string drawing code to produce the element. Check out the screenshots below.
I included a screenshot of Apple’s Mail badges for reference; the font is slightly different, and I’d appreciate any pointers to get the look exactly right. On the left is Apple’s Mail badges, and on the right is my BDBadge badges. The two applications are in focus in the top row and out of focus in the bottom row.
Add the following code to your cell subclass. (I subclassed NSBrowserCell.)