Home / iPad

Using Interface Builder

Interface Builder is a great tool for graphically laying out your user interface. You can use it to design your app's user interface and then save what you've done as a resource file, which is then loaded into your app at runtime. This resource file is then used to automatically create the single window, as well as all your views and controls, and some of your app's other objects - view controllers, for example.

If you don't want to use Interface Builder, you can also create your objects programmatically - creating views and view controllers and even things like buttons and labels using your very own application code. Often Interface Builder makes things easier, but sometimes just coding it is the best way. Here's how Interface Builder works:

  1. In your Project window's Groups & Files list, select the Resources group.
    The Detail view shows the files in the Resources group.
  2. Double-click the DeepThoughtsViewController.xib file in the Detail view.
    Note that DeepThoughtsViewController.h is still in the Editor window; that's okay because you're set to open its associated DeepThoughtsViewController.xib file in Interface Builder, not in the Editor window. That's because double-clicking always opens a file in a new window - this time, the Interface Builder window.
    What you see after double-clicking are the windows as they were the last time you left them (for this project). If this is the first time you've opened Interface Builder.

Interface Builder supports two file types: an older format that uses the extension .nib and a newer format that utilizes the extension .xib. The iPad project templates all use .xib files. Although the file extension is .xib, everyone still calls them nib files. The term nib and the corresponding file extension .xib are acronyms for NeXT Interface Builder. The Interface Builder application was originally developed at NeXT Computer, whose OPENSTEP operating system was used as the basis for creating Mac OS X.

The window labeled DeepThoughtsViewController.xib is the nib's main window. It acts as a table of contents for the nib file. With the exception of the first two icons (File's Owner and First Responder), every icon in this window (in this case, there's only one, View, but you'll find more as you get into nib files) represents a single instance of an Objective-C class that will be created automatically for you when this nib file is loaded.

Interface Builder doesn't generate any code that you have to modify or even look at. Instead, it creates the ingredients for "instant" Objective-C objects that the nib loading code combines and turns into real objects at runtime.

If you were to take a closer look at the three objects in the DeepThoughtsViewController.xib file window - and if you had a pal who knew the iPad backwards and forwards - you'd find out the following about each object:

  • The File's Owner proxy object: This is the controller object that's responsible for the contents of the nib file. In this case, the File's Owner object is actually the DeepThoughtsViewController that was created by Xcode. The File's Owner object is not created from the nib file. It's created in one of two ways: either from another (previous) nib file or by a programmer who codes it manually.
  • First Responder proxy object: This object is the first entry in an app's dynamically constructed responder chain and is the object with which the user is currently interacting. If, for example, the user taps a text field to enter some data, the First Responder would then become the Text Field object.
    Although you might use the First Responder mechanism quite a bit in your apps, there's actually nothing you have to do to manage it. It's automatically set and maintained by the UIKit framework.
  • View object: The View icon represents an instance of the UIView class of objects. A UIView class of object is an area (in this case, the view) that a user can see and interact with.

If you close the View window and then double-click the View icon in the DeepThoughtsViewController.xib window, this View window opens again.

Not surprisingly (because you haven't added any data or unique code to your app yet), the View window shows the same view - a white screen with the black status bar and battery icon - as the Simulator shows when it runs your bare-bones template-based app. This window is your canvas for creating your user interface: It's where you drag user-interface elements such as buttons and text fields.

These buttons, text fields, and other objects come from the Library window. If the Library window isn't open, select Tools → Library to open it. The Library window contains all the stock Cocoa Touch objects that Interface Builder supports. (Cocoa Touch is an application programming interface for building apps to run on the iPad, iPhone, or iPod touch.) Dragging an item from the Library to the View window adds an object of that type to the View.

If you happen to close the Library window, whether by accident or by design, you can get it to reappear by choosing Tools → Library.

The Inspector window is also open - four icons across the top from left to right correspond to the Attributes, Connections, Size, and Identity Inspectors, respectively, in the Tools menu.

[Previous] [Contents]