Cocoa Dev Central

// Introduction

You've undoubtedly come in contact with drawers during your daily use of Mac OS X. Many popular applications such as OmniWeb and most notably Apple's Mail make use of them for displaying bookmarks, mailboxes, and other things. Usually things that aren't directly required for the operation of the application are placed in these so-called "drawers." This is a great idea in terms of user interface design - the less clutter, the easier it is for users to get accustomed to your application. In any case, you'll probably be glad to hear that adding a drawer to your window doesn't require any code at all! All of it can be done quite easily within Interface Builder.

Figure 1: A drawer attached to a window.

// Preparations

Create a new "Cocoa Application" project by firing up Project Builder. (If you don't know how to make a new project, you'll probably want to read up on some of the basics in our Bare Basics section.) Once you're finished with that, open the "MainMenu.nib" interface file. You'll see a "Window" object in the instances tab - remove it (simply select it and hit the backspace key). We're ready to roll!

// The Interface

The Interface Builder palette (usually located in the top-right corner of the screen) comes with a handy drawer window object right out of the box. This will automagically create a window, an NSDrawer instance and the required drawer view. Click on the window button in the palette toolbar. You should see a small thumbnail of a window with a drawer at the top-right of the palette. Drag that into your MainMenu.nib window and you should be all set.

Figure 2: Interface Builder Palette

Edit the attributes of the "Parent Window" instance and check the "Visible at launch time" option. This will automatically open the window when our application is launched. When you've done that, double-click the Parent Window icon to edit its interface. Add a button and name it "Toggle drawer", which will do just what it says. Connect it to the NSDrawer instance and select the toggle: method.

Figure 3: Adding the toggle button.

Now we want to edit the actual drawer content view. Double-click the "DrawContentView" and add a couple of buttons and other controls of your choice. You don't need to connect them to any actions for our testing purposes, but feel free to do so if you'd like. (In that case, depending on what you want to do, you might need to create an app delegate.) When you're done, save the changes we made and switch to Project Builder. Compile & run the app. If everything went well, you should now be able to open and close your drawer.

// Conclusion

Sit back, relax and have a can of coke. There are quite a few cool things you can do with drawers, so enjoy yourself! If you have any comments or questions, feel free to contact me.