Interface Builder provides palettes rich with controls and other items—such as push buttons, radio buttons, text labels, graphics, data browsers, and menus—you can add to your application’s interface. Because Interface Builder uses graphical tools, it’s fairly easy to create and lay out items in a window. The tricky part is to associate code with the controls so that when the user manipulates a control, the application responds.
You’ll use Interface Builder in this chapter to:
Take a close look at the objects you can add to an interface using Interface Builder palettes
Check out the tools you can use to align interface objects in a window
Add controls and other objects to the main window of the Moon Travel Planner application
Then, in Chapter 6, you’ll see how to write code that makes the controls spring to life.
To create an interface, you simply select the objects you want in the interface from one of Interface Builder’s palettes, drag them to the appropriate location (a window, a menu, the desktop), and make sure the objects are arranged aesthetically, using Inside Mac OS X: Aqua Human Interface Guidelines as a guide. The guidelines are in Carbon Help (available in the Project Builder Help menu). For static objects, the job of adding them to the interface is done. For dynamic objects, you’ll need to do a few more things.
Static objects include such things as a separator line in a menu, a text label, and a graphic. Dynamic objects include anything that changes, either because of a user’s action or your application’s. Some examples of dynamic objects include a window in which the user can edit text, a button the user can click, and a text field in which your application displays a computational result. Any interface you create will likely be a combination of both types of objects.
When you add a dynamic object to the interface, you’ll need to assign it a control ID or a command signature. You’ll assign these in Interface Builder, then you’ll use these same values in your code to get and set control states, to identify a command issued from a menu, and to display information in a control or a window.
Note
A command signature is a four-character sequence that uniquely identifies a command to the Finder and your application. Signatures for commands defined by Apple (such as redo, undo, copy)
contain all lowercase characters. To avoid any possible conflicts with any Apple commands, you should use at least one uppercase character in the command signatures you define.
A control ID consists of a signature (a four-character sequence) and an ID (a 32-bit integer) that you assign to a control so that you can identify and address the control when your application runs. To avoid confusion with a control ID from another application or plug-in, a control ID should be unique. The best way to assure it is unique is to use the application’s signature as the control ID’s four-character sequence.
An application signature, or creator code, is a unique four-character sequence the Mac OS uses to identify your application. Apple Developer Technical Support maintains a database of creator codes to ensure that there are no duplications. You’ll learn more about creator codes and how to obtain one in Chapter 13.
The operating system uses a data structure called a ControlID to store the signature and ID value assigned to a control. In this chapter, you’ll assign a signature and ID for some of the controls you create in Interface Builder. For the signature, it’s always best to use the application’s creator code (also referred to as the application signature)—one that has been registered with Apple.
(See Chapter 13 for more information on creator codes.) This assures the control ID will not conflict with a control ID for a control in another application.
The creator code for the Moon Travel Planner application—MTPP—is already registered with Apple.
The Carbon Palettes window in Interface Builder provides you with five palettes: Menus, Controls, Enhanced Controls, Data Views, and Windows. You open the Carbon palettes window by choosing Palettes from Interface Builder’s Tools menu. Clicking a button in the window’s toolbar changes from one palette to another.
Note
When you hover the pointer over a button in the toolbar, a label appears.
Let’s go through each of the palettes to see what interface objects are available and what you can do with each object.
Menus present lists of items—commands, attributes, or states—from which the user can choose. Menus are based on the interface principle of see-and-point: people don’t have to remember command names because they can view all the available options at any time.
Interface Builder provides a default menu bar that contains standard menu items that most applications use. We’ll cover these in detail in Chapter 7. The Menus palette provides objects you can use to modify the default menu bar. Figure 5.1 shows the Menus palette.
The Menus palette contains the following items:
The Application, File, Edit, and Window elements are fully loaded menus that you can drop into your application. Note that these menus were added automatically when you created the Moon Travel Planner application.
The Submenu element can be either a top-level menu that you add to your menu bar or a hierarchical menu that you add to another menu. You can use it to create application-specific menus.
The Item element is a single menu item that you can add to any menu.
The blank element is a separator that you can add to any menu.
You can add a contextual menu to your application using the menu object (on the right side). (You’ll read more about contextual menus in Chapter 7.)
Controls are onscreen objects the user can manipulate with the pointer to take an immediate action or to modify settings that effect a future action. Figure 5.2 shows the Controls palette provided by Interface Builder.
The Controls palette contains those items most commonly used in the interface:
Push button. A rounded rectangle with a text label that performs an instantaneous action.
Radio buttons. Used for mutually exclusive, but related, choices.
Pop-up menu. Presents mutually exclusive choices in a dialog or window.
Bevel button. A rectangular button with a beveled edge that displays an icon or picture; it behaves similarly to a push button.
Progress indicator. Informs the user of the status of a lengthy operation.
Scroll bars. Allow users to view areas of a document or window that can’t fit in the window.
Static text field. Used for a dialog or other text the user can’t edit.
Image well. Displays an icon or picture; used as a target into which users can drag an item.
Relevance control. Indicates how closely a search result matches search criteria.
Enhanced controls include controls, indicators, and grouping items that are more specialized than those found in the Controls palette. Some of these must be used together with another type of object. For example, a group box is always used to group two or more interface objects, such as checkboxes. Figure 5.3 shows the Enhanced Controls palette.
Enhanced controls include:
Sliders. Enable users to choose from a continuous range of values.
PICT box. Used as a container for a graphic you want to add to the interface.
Disclosure triangles. Allow the display of information that elaborates on the primary information in a window.
User pane. Lets you group items that appear on a pane in a tabbed dialog or draw a custom object that acts like a control.
Icon controller. Used to create a control that displays the application icon.
Circular progress. Provides feedback to the user for operations that may take a long time.
Time indicator. Used for setting a time (such as for an alarm) or for displaying current time.
Round push buttons. Can be used as an alternative to rectangular push buttons.
Pop-up menu control. Used to open a pop-up menu.
Data Views are interface objects (shown in Figure 5.4) that let you organize information you display to the user in a list or column view.
Interface Builder provides three data views:
Table viewer. A type of data browser used to display multi-columned lists of information. You can set up the browser so the data in the columns are sortable.
Browser. A type of data browser used to display scrolling lists.
Tab control. Provides a way to present information in a multi-pane format by allowing users to switch from one user pane to another. You must use this in conjunction with user panes.
Windows provide a way for users to view and interact with data. Along with menus, they are the basic building blocks for any interface. A window is what you’ll need to hold objects from the Controls, Enhanced Controls, and Data Views palettes. Figure 5.5 shows the Windows palette.
You can select two types of windows from the Windows palette:
Aligning the objects in an interface can be a time-consuming and painstaking process. In Mac OS X, aligning interface objects is complicated by the fact that the objects have shadows, which most user interface metrics don’t take into account. Fortunately, Interface Builder not only has layout tools you can use to make alignment precise and fairly easy, it also has built-in measurement guides that comply with Inside Mac OS X: Aqua Human Interface Guidelines.
You can choose from several options when you align objects. No doubt you’ll take more than one approach. You can:
Drag objects with the pointer
Specify origin points in the Size pane of an Info window
Use the Alignment menu or palette
Use layout rectangles
Follow Aqua-savvy guides
Set up your own guides
You can use the pointer to drag objects into rough alignment. This won’t be good enough for the final interface, but it’s a start. If you know an object must be a certain size, you can open the Size pane in the object’s Info window. Then, you can drag the object until it is placed in the proper coordinates. It’s even faster if you just type the coordinate or size you want directly in the Size pane.
The Alignment submenu and the Alignment palette let you align objects. They each do the same thing, but with one you choose a command, and with the other you use a pop-up menu and click buttons. To align several objects, you select them, then choose an alignment command (such as Make Centered Column). Figure 5.6 shows the Layout menu and the alignment commands from which you can choose. The alignment commands use one of the interface objects you select as a reference and bring the other objects in alignment with the reference.
When you turn on layout rectangles, you’ll see a rectangle around each object. The rectangles take Mac OS X shadows into account. So, as long as you align the rectangles rather than the objects themselves, you’ll end up with a well-alignedinterface. You can activate the rectangles by choosing Show Layout Rectangles from the Layout menu.
Perhaps one of the most useful layout commands is Aqua Guidelines in the Guides submenu, which is on by default. The Aqua Guidelines command turns on Aqua guides—lines that show up as you move interface objects in a window. If you drag an object to one of the guides, the object will be in compliance with the spacing outlined in Inside Mac OS X: Aqua Human Interface Guidelines.
Note
You can press and hold the Command key to temporarily override the Aqua Guidelines setting. If Aqua Guidelines are on, holding the Command key toggles them off. If Aqua Guidelines are off, holding the Command key toggles them on.
There are a number of other assorted layout commands you’ll find useful, including Bring to Front, Send to Back, Same Size, Size to Fit, Transpose, and Group In:
Bring to Front and Send to Back rearrange the order of controls in the interface. For example, if you use a Group Box and a pop-up menu together, you might want to bring the pop-up to the front. Otherwise the Group Box may display a line over the pop-up menu.
Same Size assures two objects have exactly the same dimensions; it is far easier to use than typing sizes, and certainly preferable to “eyeballing.”
Size to Fit is useful when you have an object that has a text label, such as a button. This makes the object large enough to fit the text and assures that the spacing around the text complies with Inside Mac OS X: Aqua Human Interface Guidelines.
Transpose changes rows to columns and columns to rows. You can use this on a radio button group.
Group In lets you put two or more objects in a container. This is handy when you’ve already created a number of objects, then decide you want to put some of them in a container, such as a Group Box.