• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 7. Changing Interface Elements > Adding a Custom Drawer

7.8. Adding a Custom Drawer

In these steps, you will add a new type of window component, a drawer, to your Terminal window. You'll see how to connect the drawer to your existing window and update your buttons to control the drawer.

  1. In Interface Builder, select the Palette window and click on the window icon to open the Windows palette.

  2. Drag a new window/drawer combination from the palette onto the NIB window, as shown in Figure 7-27. When dropped, three new instances appear in the window: a Parent Window, an NSDrawer, and a DrawContent view. The DrawContentView design window should automatically open.

    Figure 7-27. Dragging a new window with a drawer into your nib project.

  3. Close the DrawContentView design window.

  4. In the NIB window, select the new Parent Window and delete it by choosing Edit → Cut (-X) or Edit → Delete (press Delete). This leaves the new NSDrawer and Draw ContentView instances.

  5. Select the NSDrawer instance.

  6. In the Info window, open the Connections pane (-2). After deleting the Parent Window, the NSDrawer should have just one connection: the contentView connected to the NSView. The other two outlets (delegate and parentWindow) should be unconnected.

  7. Depress and hold the Control key. With the Control key pressed, drag your cursor from the NSDrawer to the Term window instance, as shown in Figure 7-28. When a square appears around Term, release the mouse and then release the Control key to make the connection.

    Figure 7-28. Connecting the new drawer to the Term window.

  8. In the Info window's connection pane, doubleclick parentWindow. A dot appears to the left of parentWindow and NSWindow (Terminal) appears to the right. Making this connection reassociates the drawer, making it part of the Terminal window.

  9. In the NIB window, double-click the Term window instance. The Terminal design window opens.

  10. In the Terminal design window, locate the new button that you created in the "Adding a New Button" section earlier in this chapter. Select that button.

  11. In the Info window, open the Attributes pane (-1).

  12. Use the Type pop-up to change the button type to Disclosure. The button changes shape, becoming a small black triangle that points to the right; this is known as a disclosure triangle.

  13. Select the newly triangular button and open the Connections pane (-2). The button remains connected to clearScrollback: in the Target/Action section, as set earlier.

  14. In the Info window's Connection pane, click on the Disconnect button.

  15. Depress and hold the Control key. Drag from the disclosure triangular button in the design window to the NSDrawer instance in the NIB window.

  16. In the Info window's Connection pane, doubleclick toggle:. A small gray dot appears to the left of toggle:, as shown in Figure 7-29. Now, when a user clicks the disclosure triangle, the toggle message is sent to open or close the drawer.

    Figure 7-29. Setting the toggle behavior for the disclosure button.

  17. Select the NSDrawer instance in the NIB window.

  18. In the Info window, open the Attributes pane (-1). Use the pop-up to set the preferred edge to Bottom.

  19. Open the Help pane (-6). Enter "Show/Hide Drawer" into the Tool Tip field and press Return.

  20. Choose File → Save (-S) to update the changes to the Term.nib file.

  21. Return to the Terminal application. Open a new Terminal window and test to make sure that the disclosure button works as designed. Figure 7-30 shows the Terminal window with its new drawer exposed.

    Figure 7-30. A Terminal window with its drawer exposed.

    The side on which the drawer appears depends on its position in your window. When possible, the preferred edge you set in the Attributes pane will be used.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint