iPhone Development 101

iPhone 101

Code Tips

Resources

Links

Follow

TwitterRSSE-mail

More

Learn iPhone Programming:
Interface Builder: Connecting Objects

This tutorial was written for Xcode 3.2; it's outdated now. For a more up-to-date tutorial, check out Apple's App Development Tutorial to learn how to write iOS apps. There are also lots of other excellent books and online tutorials you can learn from.

If you'd like to find out when the updated version of this class is ready, follow me on twitter:

You can drag UI elements from the Library into your app's windows and views, compile the project, and see the app - but it won't actually do anything until you make connections between the UI and Xcode.

Connections
IBOutlets
(UI objects: buttons,
views, text fields, labels)
IBActions
(call a method)

IBOutlets

Every object you add in Interface Builder - buttons, labels, text fields, etc. - must have an IBOutlet instance variable declared in your Xcode project. "IBOutlet" is added before the instance declaration; it simply indicates that this object will be connected to something in Interface Builder.

Edit FirstAppDelegate.h and add declarations for the UIButton and UILabel you added in Interface Builder:

@interface FirstAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    
    IBOutlet  UIButton  *aButton;
    IBOutlet  UILabel   *helloLabel;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;

@end

Save the file, then switch back to Interface Builder. Control-click on the orange "First App Delegate" icon in the Document window. This brings up the connections window:

You should see your newly defined IBOutlet instances, aButton and helloLabel, in this list. (If not, did you save the .h file?)

IBOutlets are connected from your class object to the UI objects. (In this case your class object is First App Delegate, although normally it will be a view controller class. We'll look at controllers soon.)

Click and hold on on the circle next to each outlet's name (such as aButton), then drag your mouse out to the UI element in the window or view. You can also control-drag from the orange object icon to the UI element.

IBActions

IBActions are methods that are called when some action is taken - for example, when a button is pressed, it should call a method in your code. These methods are declared in your class's @interface (.h) file:

@interface FirstAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    
    IBOutlet  UIButton  *aButton;
    IBOutlet  UILabel   *helloLabel;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;

// add method declarations AFTER the closing } brace but before the @end statement:

- (IBAction)pressButton:(id)sender;

@end

Add the pressButton method to FirstAppDelegate.h.

IBAction connections are made in the opposite direction as IBOutlets: you control-drag from your UI object to the orange class object icon.

Save the .h file, then switch back to Interface Builder. Click on the button in your app window, then control-drag from the button to the orange object representing your class (in this case it's First App Delegate). When you let go of the drag, a small Events window will pop up, showing you the available IBAction methods you can connect to. Chose the pressButton method.

If you control-click on the Hello button in your window, you'll see this summary window with a list of all the touch events that the button responds to:

We've connected one event, Touch Up Inside, to our custom pressButton method. The method is called after the user presses and releases the button. Most other input-type UI elements have a similar list of events.

Delegates and Data Sources

The other type of connection you may need to make is for objects that require a delegate or a data source. Text fields, text views, and table views are objects that require delegates and/or data sources. Since we're not using any of those in this project, you don't have to worry about them right now.

As with IBActions, delegate and data source connections are dragged from the UI object to the orange object icon that represents the delegate/data source.

Additional References


TopHomeContents