The leading offset is the distance from the left or top edge of the drawer to the left or top edge of the window. Likewise, the trailing offset is the distance from the right or bottom edge of the drawer to the right or bottom edge of the window. Whether we talk about right and left or top and bottom depends on which edge of the window the drawer slides out from. Note that in this context the top of the window is not where you think it is. Here, the top of the window is not at the top of the title bar, but rather it is at the bottom of the title bar. Have a look at the images below to see how this all fits together.
What the offsets mean for a drawer attached to the left or right of the parent window.
What the offsets mean for a drawer attached to the top or bottom of the parent window.
At any rate, the height of a drawer is calculated from these values. The offset distances are kept constant when resizing the window, which means the height of the drawer is resized with the window.
Drawers allow the user to change the width by dragging their outside border. We can restrict this behavior by setting the minimum and maximum content sizes of the drawer. Note that the size of the NSView we are using as the content view can be adjusted from the Sizes Info panel for that particular view. You should set the frame size to something appropriate to display within the drawer, based on the variables we just discussed. Finally, make sure that the springs and struts are set up for your various controls so they resize and reposition themselves nicely when the user resizes the drawer.
The last thing we have to consider when working with drawers is how to open and close them. If you look at the NSDrawer’s Class Info, you will find that it has three actions: open:, close:, and toggle:. If we send an open message to the drawer it opens (and does nothing if already open). If we send a close message to the drawer it closes (and does nothing if already closed). A toggle message to the drawer will open a closed drawer and close an open drawer.
We can set up a rudimentary interface for opening and closing the drawer by adding a button to the main window wired to the toggle: action method. Do this now with a button titled “Toggle”, and do a test run of your interface. Everything should work as advertised with the drawer.
Now about the other drawer object in the Windows palette, the one with the drawer already attached to the window. This item will add not only a drawer to the nib, but also the parent window and content view, with those two connections already made. So it saves a little work if you know from the outset that your window will have a drawer.
Now let's move onto the second half of our column and learn about animated window resizing.
Implementing this behavior is almost as easy as doing drawers. It just requires a little geometric know-how and a bit of code. We’ll work off of our current drawers project, so we’ll be hanging around in Interface Builder for a while longer.
What we want to do is create two additional NSView instances in the same manner that we did for the drawer’s content view. So, drag two more NSView containers into the nib window. You should probably change the names of your view icons in the nib window to keep everything straight in your head. I suggest naming our two newest additions smallView and largeView for reasons that will become apparent.
Using the Size Info Panel, make one of these views smaller and the other larger. In the small view add a button title “Go Large”, and in the large view add a button to the interface titled “Go Small”. These buttons will invoke action methods that trigger the resizing. Additionally, remove the drawer control button from the main window and input two similar buttons titled “Toggle” in each of the two new views. Make sure you reconnect each of these drawer-control buttons to the drawer’s "toggle: action." Your two views should look similar to the ones shown below.
What our smaller window will look like.
What our larger window will look like.
Now subclass NSObject to create a controller class-—named Controller—-and add three outlets: smallView and largeView for the two views, as well as mainWindow to connect to the main window. Also create two actions, goLarge: and goSmall:. Make the appropriate connections between the buttons and the actions, and create the files to be added to the project for this controller object. Now let's go do some coding.