MacDevCenter    
 Published on MacDevCenter (http://www.macdevcenter.com/)
 See this if you're having trouble printing code examples


Modifying Stickies

by Erica Sadun, author of Modding Mac OS X
11/23/2004

One of the great things about Macintosh is that whatever you see, download, or buy isn't necessarily what you have to live with on a day-to-day basis. Since the good old days of ResEdit, ardent Mac enthusiasts have diced, sliced, and julienne-fried their applications to customize their look.

Did a dialog box offend your artistic sensibilities? A few minutes in ResEdit would update that box to a newer, fresher presentation. Not happy with your icons? ResEdit let you edit the bits. With ResEdit, users could move around buttons, change sounds and pictures, edit text, and more.

OS X continues this grand tradition and expands upon it. Not only can Mac enthusiasts modify an application's look, but we can also actually change the way it works. OS X's Interface Builder, part of its Xcode development suite, provides all the tools you need to go beyond. With Interface Builder, you can accomplish the unthinkable. It lets you customize existing applications in ways that ResEdit users never dreamed of. If you think that customizing an application interface involves nothing more than moving a button into a new position or resizing a screen, think again.

In this article, you're about to learn how to update your Stickies application to give it abilities that its authors probably never considered.

Getting Ready to Hack

You're about to perform some weird and wonderful hacks on your Stickies application. Before you get started, there are some preparatory steps you need to do first.

  1. Make sure you've installed the Xcode Tools on your Mac. The easiest way to see if you have the Xcode Tools installed on your Mac is to open a Finder window and click on your primary hard drive's icon in the Sidebar. If you see a folder named Developer, Xcode is installed. If not, you'll need to install the Xcode Tools.

    The Xcode Tools can be found on a separate disc that comes with Mac OS X Panther. You must install the tools to add the developer environments, documentation, applications, and utilities, all of which gets placed in the Developer folder.

    If you can't find the Xcode Tools CD (also called the Developer Tools CD), the tools are freely available from Apple's developer website: http://developer.apple.com/tools/download/. The Xcode Tools download is about 350 MB, so you'll need a fast connection and a little bit of patience to get it all down. Be prepared to spend a little time signing up for a (free) Developer Connection account.

  2. Open a new Finder window and go to the Applications folder (Shift-CMD-A gets you there the fastest), and then select the Stickies application.

  3. Related Reading

    Modding Mac OS X
    Extreme Makeovers for Your Mac
    By Erica Sadun

  4. Create a copy of the Stickies application by choosing File -> Duplicate (CMD-D) from the menubar. This creates an exact duplicate of the Stickies application and saves it as "Stickies copy" in the Applications folder. You'll need this copy to restore Stickies to its original version once you're done with this article.

  5. Drag Stickies into your dock. This will provide quick access to the application as you work through the steps in this article.

  6. In your Finder window, change folders to your home directory (Shift-CMD-H) and then into the Library folder beneath it.

  7. If you've ever used Stickies before, you'll find a StickiesDatabase file in your ~/Library folder. (If you've never used Stickies before, feel free to skip to the next step.) Select StickiesDatabase and choose File -> Duplicate (CMD-D) from the menubar. This duplicates your Stickies database (to the "StickiesDatabase copy" file). This will allow you to return to your current set of Stickies after making any mods to the program while working through this article.

  8. Launch Interface Builder (/Developer/Applications). Part of the Xcode Tools, Interface Builder is used for designing the user interface (windows, dialogs, etc.) for an application.

  9. If needed, read through any release notes and then close the release notes window. (Release notes only appear the first time you launch the Interface Builder, or after you trash Interface Builder's preferences: ~/Library/Preferences/com.apple.InterfaceBuilder.plist.)

  10. Open Interface Builder's preferences window by choosing Interface Builder -> Preferences (CMD-,).

  11. Click on the General tab to select the General Preferences pane. Make sure that the following items have been checked. Some of these choices will not go into effect until you quit and restart Interface Builder, so close the Preferences window (CMD-W), and then quit (CMD-Q) and launch Interface Builder again.


By checking these preferences, you set Interface Builder at its greatest level of user-friendliness.

Note for International Readers

The steps in this article describe how to edit English-language project files for the Stickies application. To make changes for languages other than English, follow these directions:

  1. Copy the StickiesDocument.nib file from the English.lproj folder into your language localization folder, e.g. into Italian.lproj or Spanish.lproj, etc. This will overwrite the copy of StickiesDocument.nib in that folder.

  2. Edit this copy of the StickiesDocument.nib file according the directions in this article.

There are no other steps that need to be taken; however, you may want to translate any English text (e.g. Stampa rather than Print) in your interface. Do not, however, attempt to translate the connections. For example, connect your Stampa button to print:, not to stampa:.

Exploring Stickies

Stickies is quite the cool application. It lets you put notes on your screen and float them over your workspace. You can use Stickies to add reminders about appointments, phone calls, or just to store frequently used text. But if you think that notes are all there is to Stickies, think again. With Stickies, you can use fully formatted rich text and you can store pictures as well as text. In addition, you can:


Stickies allows you to store graphics, colors, and even movies and sound files on free-floating notes.

All these features (and more!) make Stickies a fun and useful program. However, there are some areas in which Stickies clearly falls short. Here are just two, both of which can be addressed by simple end-user edits in Interface Builder.

Exposing Stickies

Although OS X applications look like single files, they are not. There's more to Mac OS X applications than meets the eye. Mac OS X applications aren't files. They are actually folders that contain one or more executables and their supporting resource files. They appear to the end-user as a single file because the Finder treats them as a bundle. Bundles are folders that look like files and whose contents are hidden from the user.

In order to modify the Stickies application, you must start by opening the application bundle and exposing the elements that lie within.

  1. Return to the Finder and open a new Finder window (CMD-N). Go to the Applications folder (Shift-CMD-A), and then select the Stickies application.

  2. Control-click (right-click) on the Stickies application icon to display the Finder's contextual pop-up menu. Choose Show Package Contents. The Finder opens up a new window that contains a single folder, Contents.

  3. To view what's within the Contents folder, press the C key and then select View -> as Columns (CMD-3). Opening the folder exposes the various materials that form the application bundle.

  4. Navigate beneath Contents to Resources -> English.lproj. Here, you'll find the files that make up the Stickies interface, including StickiesDocument.nib, the file that defines the way each Stickies window looks. Each lproj folder refers to a localization, which provides a language-specific version of each program.


Opening up a bundle reveals the various folders and files that contribute to an application.

  1. The nib file extension refers to Interface Builder files. Double-click StickiesDocument.nib to launch Interface Builder and open the file within it.

Meeting Interface Builder

Although Interface Builder may look daunting to new users, it's really very simple. Interface Builder is composed of just a few key components that allow you to layout and customize application interfaces. A little bit of hands-on experience helps these tools to make sense. After opening StickiesDocument.nib in Interface Builder, you'll find the following windows on-screen.


Interface Builder's windows let you change the way Application windows look and behave.

NIB File Window

This window contains all the items in your nib (interface) file, including windows, menus, and other interface objects.

Palette

The palette contains samples of all the interactive elements you can add to windows. These elements, called controls, include buttons, text fields, sliders, and more.

Info

The Info Editor offers context-sensitive options for all the elements found in your nib file.

Window Editor

This window lets you edit the look and layout of your application.

Adding Scrollbars

Making Stickies windows scrollable is very easy to do. In the following steps, you'll see how to convert your windows.

  1. Launch Stickies by double-clicking the Stickies icon in your dock. Stickies actually re-reads the source nib files each time it opens a new window, so you can work on your application "live", checking the changes by opening new windows.

  2. In Stickies, open a new window. Paste more text into the window than you can possibly see at a time. As you'll discover, Stickies does not add a scrollbar to help you navigate through the text.


Stickies does not automatically add scrollbars when a Sticky's text exceeds the size of the note.

  1. Return to Interface Builder. In the window editor, click once on big white area in the middle. Selection handles appear around this area, which is called an NSTextView. Do not move or change this area. Simply select it.


The big white area in the middle of the Stickies window is called a "TextView."

  1. In the Info Editor, if it is not already selected, choose Attributes from the pop-up menu at the top. This palette shows all the editable attributes for the selected TextView.

  2. Locate the checkbox that says Show Scroller and check it. As you do so, the item just beneath it becomes enabled. Check Automatically Hide Scroller as well. This combination of options only shows the scrollbar when there is additional material to scroll to. Otherwise, the scrollbar will not appear.

  3. Choose File -> Save (CMD-S) to save your changes to disk.

  4. Return to the Stickies application.

  5. Create a new window and add the same material you put in the first Sticky note. This time, Stickies adds a scrollbar as needed, allowing you to scroll through the text.


After setting the scrollbar flags, Stickies now adds scrollbars when needed.

Adding a Ruler

Rulers are a standard part of "TextView" objects, that big white area you selected and updated in the previous section of this article. In this section, you'll discover how to talk to the TextView and tell it to show and hide its ruler.

  1. Return to Interface Builder.

  2. Locate the Palette and make sure you're looking at the set of Controls (Cocoa-Controls). If not, click the second button in the toolbar at the top of the window.

  3. On the Palette, locate the disclose button. It is the right-facing triangle on the top line of buttons, just below the toolbar.

  4. Drag a disclose button out from the Palette and onto the Stickies Window Editor. Drop it on the right side of the Stickies Drag Bar.


Drag items from the Palette to add them to a Window Editor.

  1. Select the new button and adjust it as needed, so it appears toward the right side of the drag bar but does not overlap onto the Scroll View. (Do not put it all the way at the end. Leave some room to the right for the built-in Stickies features.)

  2. In the Info Editor, choose Size from the pop-up (CMD-3).

  3. In the Size palette, click the left-most and bottom-most lines to turn them from a straight line into a spring. This tells Interface Builder to keep the new button in the top-right corner and ignore any resizing to the left and bottom.


Adding the springs to the Size palette tells Interface Builder to ignore resizes to the left and below. This fixes the new button to the upper right-hand corner.

  1. Choose File -> Save (CMD-S) to save your changes to disk.

  2. Return to the Stickies application.

  3. Open a new Sticky (CMD-N) and test the new button. As yet, it will not do anything interesting, but each time you click it the arrow will change from pointing right to pointing down and back.


The new disclosure button should toggle between pointing right and pointing down.

  1. Return to Interface Builder.

  2. Press the Control key and hold it. Control-drag from the new disclose button to the large white TextView. A bent line will follow your drag.


Control-drag to make a connection from one Interface item to another. Here, you Control-drag from the disclose button to the TextView.

  1. Finish your drag with the cursor in the middle of the TextView. The Connections palette appears in the Info Editor.

  2. Scroll down to toggleRuler: and double-click it. A dot appears to the left of toggleRuler:, indicating that the connection has been made.


After double-clicking, a dot appears to the left of the name to indicate that a connection has been made. Here, clicking the disclose button sends the toggleRuler: message to the TextView object.

  1. Choose File -> Save (CMD-S) to save your changes to disk.

  2. Return to the Stickies application.

  3. Open a new Sticky (CMD-N) and test the new button. Now, when it is clicked a ruler appears. This ruler allows you to set the spacing, styles, tabs, and more for your Sticky. Click the disclose button again and the ruler disappears. Each click toggles the ruler on and then off and then on again, etc.

Pretty cool, eh?

Time to take it to the next level.

Add a Drawer

Interface Builder makes it easy to add a drawer to nearly any window. Stickies windows are no exception. In the following steps, you'll discover how to add a drawer to your disclose button.

  1. Return to Interface Builder.

  2. Select the disclose button in the Window Editor. Open the Connections palette in the Info Editor (CMD-2) and scroll until you see toggleRuler:.

  3. Click disconnect. The dot next to toggleRuler: disappears. The disclose button is no longer connected to that function.

  4. In the Palettes window, click the fourth button at the top of the toolbar line. This reveals the Cocoa-Windows palette.

  5. Drag the top-right icon, the one of a window with a drawer, onto your nib window.


Add new windows to an application by dragging them from the Windows Palette.

  1. Locate the three new items that appear in your nib window: Parent Window, DrawContent, and NSDrawer.

  2. Select Parent Window and press delete to remove it from your nib window.

  3. Control-drag from the NSDrawer to the Window.


Control-dragging tells Interface Builder to create a new connection from the NSDrawer to the Window.

  1. In the Info Window's Connections palette, double-click parentWindow. A dot appears to the left of parentWindow. Doing this tells Interface Builder that the NSDrawer is the child of the Window and that the Window is the parent of the NSDrawer. This relationship helps Interface Builder know which drawer to show for each window.

  2. In the nib window, double-click DrawContent... to open the DrawContentView editor window.

  3. In the Palette, click the fifth button in the toolbar to open the Cocoa-Containers palette.

  4. Drag a box onto the DrawContentView editor window.


Boxes help organize related controls.

  1. Double-click the word Box and change it to "Stickies Controls." Then resize the box to provide more room to put controls inside. Feel free to make it nice and roomy. If it turns out too large, you can always readjust the size later.

  2. In the palette, click the second button on the toolbar to open the Cocoa-Controls palette.

  3. Drag three buttons and a checkbox into the Stickies Controls box. Edit their names to Check Spelling, Show Guess Panel, Print, and Show Ruler and arrange according to your tastes.


Dragging controls into a box helps arrange those controls with a bit of visual flair.

  1. Control-drag from the (currently unconnected) disclose button in the Window editor to the NSDrawer icon in the nib window.

  2. In the Info Editor's Control palette, double-click toggle:. A dot appears next to the word toggle: when the connection is complete. Now, instead of toggling the ruler, the disclose button will toggle the drawer.

  3. Control-drag from each button and checkbox in the drawer to the TextEdit area in the Window editor. Connect the Show Ruler checkbox to toggleRuler:; connect Check Spelling to checkSpelling:; connect Show Guess Panel to showGuessPanel:; and connect Print to print:.

  4. Choose File -> Save (CMD-S) to save your changes to disk.

  5. Return to the Stickies application.

  6. Open a new Sticky (CMD-N) and test the updated disclose button. When clicked, it now opens the drawer that offers all the functionality you added with the new controls. Give it a try and confirm that everything works as expected.


After modding, Stickies now provides a secret drawer with extra controls.

In Summary

The mods shown in this article offer just a taste of the end-user customization possibilities available with Interface Builder. Hopefully, this brief tour will whet your appetite and encourage you to learn more about this excellent tool.

Restoring Stickies to Itself

To restore your application back to its original state, remove Stickies from your dock and then delete the modified version of your Stickies application in /Applications. Rename "Stickies copy" to "Stickies" and you're set. The copy stored an unmodified version of your application. By renaming it "Stickies," it becomes the standard Stickies application.

If desired, for the pedants among us, launch a terminal shell and change the ownership back to root as follows: sudo chown root:admin Stickies.app.

Erica Sadun has written, co-written, and contributed to almost two dozen books about technology, particularly in the areas of programming, digital video, and digital photography.


Return to MacDevCenter.com.

Copyright © 2009 O'Reilly Media, Inc.