Servin Mobile Software


iPhone™ Programming: Buttons (UIButton) and Interface Builder


Norman McEntire

Version 1.3 Aug 22. Thank you Matthew.

Version 1.2 January 27

Copyright © 2009 Servin Corporation. http://servin.com


About iPhone Buttons

First, a special thanks to Dennis V. for suggesting this topic.

Second, here are screen shots of the final demo app:

Third, in this tutorial, you'll learn how to do the following:


iPhone Software Skills You Will Learn


Prerequisites


Startup Xcode

If Xcode is not already running, start it up:

  1. On the Mac Desktop, double-click on the Finder icon (the icon with the face on it).
  2. On the left-side of the Finder window, click on Macintosh HD.
  3. On the right-side of the Finder window, click on the Developer folder.
  4. Click on the Applications folder.
  5. Double-click on the Xcode icon.

At this point, you should see the Xcode menu at the top of your desktop.


Create New Xcode Project

With Xcode running, create a new Xcode project:

  1. File > New Project
  2. On the left-side of the New Project window, select Application under iPhone OS.
  3. On the right-side of the New Project window, select Window-Based Application.
  4. Click on the Choose button.
  5. Enter ThreeButtons for the project name.
  6. Click on Save button.

At this point, you should see Xcode open a new window that shows a number of files.


Build Default App

Go ahead and build the default application:

  1. Press the Build and Go button.
  2. After a brief moment, you should see the code running in the iPhone Simulator.
  3. Observe that the background color of the default window is white.
  4. In the iPhone Simulator, press the Home button to stop the application.

Add Three UIButton Objects

In this exercise, you will add code to represent three buttons (UIButtons) that you will later place onto the view.

  1. In Xcode, in the Groups & Files window on the left, click on the Classes folder to view a list of source files.
  2. Click on the file named ThreeButtonsAppDelegate.h; this make the contents of the file appear in the Xcode editor window.
  3. Enhance the file so that it matches the code changes made during the following steps.
  4. First add three member variables named redButton, greenButton, and blueButton, one for each of the buttons we will use. Each is of type UIButton *, pronounced as a "UIButton pointer". That is, each of these variables will point to a separate instance of a UIButton object.
  5. #import <UIKit/UIKit.h>
    
    @interface ThreeButtonsAppDelegate : NSObject  {
    	UIWindow *window;
    
    	UIButton *redButton;
    	UIButton *greenButton;
    	UIButton *blueButton;
    
    }
    
  6. Next, use the @property keyword to tell the Objective-C 2.0 compiler that these variables will be accessed as properties. Without this keyword, the variables can still be accessed, but by using the Objective-C messaging syntax instead of the property syntax.
    }
    @property (nonatomic, retain) IBOutlet UIWindow *window;
    
    @property (nonatomic, retain) IBOutlet UIButton *redButton;
    @property (nonatomic, retain) IBOutlet UIButton *greenButton;
    @property (nonatomic, retain) IBOutlet UIButton *blueButton;
    
    - (IBAction)doRedButton;
    - (IBAction)doGreenButton;
    - (IBAction)doBlueButton;
    
    @end
    
  7. The IBOutlet keyword is used to notify Interface Builder that these three values will connect to actual UIButtons that are laid out with Interface Builder. You will do that in a later exercise in this tutorial.
  8. The IBAction keyword is used to notify Interface Builder that these methods will be called by controls laid out by Interface Builder. For example, when the "red" button is pressed, it will call the doRedButton function.
  9. An important point: The connecting of the UIOutlet variables and the UIAction methods will be accomplished using Interface Builder.
  10. In Xcode select ThreeButtonsAppDelegate.m.
  11. Edit the code so that it matches the following:
    #import "ThreeButtonsAppDelegate.h"
    
    @implementation ThreeButtonsAppDelegate
    
    @synthesize window;
    
    @synthesize redButton, greenButton, blueButton;
    
    - (IBAction) doRedButton {
    	window.backgroundColor = [UIColor redColor];
    }
    
    - (IBAction) doGreenButton {
    	window.backgroundColor = [UIColor greenColor];
    }
    
    - (IBAction) doBlueButton {
    	window.backgroundColor = [UIColor blueColor];
    }
    
    ...
    
  12. The @synthesize keyword tells the compiler to generate getter/setter functions for the named variables. For example, the compiler generates a "redColor" as the getter function, and a "setRedColor" as the setter function. The result is you can write code such as obj.redColor.
  13. The IBAction methods set the background color of the window to the selected color. You could do anything in these functions; for example, play a different sound, or display a different image.
  14. Select Build > Build in the Xcode menu.
  15. Your code should build without errors. You can run the code if you would like, but you will not yet see any visual changes; for that you'll need to use Interface Builder.

As a review, in this exercise you added the code to handle three buttons.


Use Interface Builder to Add Buttons

In this exercise, you will use Interface Builder to add three buttons to the view.

  1. In Xcode, in the Groups & Files window on the left, click on the Resources folder to view a list of source files.
  2. Double-click on the file named MainWindow.xib.
  3. You will see Interface Builder start up, display one or more files.
  4. Use the Interface Builder menu to select Tools > Library, and you should see the Library window.
  5. Near the top of the Library window, expand the choices to match this:
    - Library
      - Cocoa Touch Plugin
        - Controllers
        - Data Views
        - Inputs & Values
        - Windows, Views, & Bars
    
    Show screen shot.
  6. Click on Inputs & Values.
  7. Drag the "Round Rect Button" from the Library window to the white Window.
  8. Repeat by dragging two other "Round Rect Buttons" from the Library window to the gray View window.
  9. Select Tools > Attributes Inspector. Show screen shot.
  10. Click on each of the three buttons in turn, setting the Title attribute for each button as follows:
    Push for Red Background
    Push for Green Background
    Push for Blue Background
    
    Show screen shot.
  11. In the window named MainWindow.xib, click on "Three Buttons App Delegate" to select. Show screen shot.
  12. Press and hold the Control Key, then position your mouse on "Three Buttons App Delegate", and click. You should see a pop up men that list these items:
    - Outlets
      - blueButton
      - greenButton
      - redButton
    - Received Actions
      - doBlueButton
      - doGreenButton
      - doRedButton
    
    Show screen shot.
  13. Now, this next step is tricky until you've done it a few times. Under each Outlet in the window from the previous step, click-and-drag your mouse from the "o" associated with each outlet, to the desired button on the Window. For example, click-and-drag from blueButton Outlet, to the button on the Window that says "Push for Blue Background".
  14. Repeat the click-and-drag for all three of the outlets: blueButton, greenButton, redButton.
  15. Repeat the same drag-and-click, but this time from the "Received Actions" to each of the desired buttons. For example, click-and-drag on the doBlueButton "o", and drag it to the button that you press for Blue, and then select "Touch Up Inside".
  16. NOTE! I realize the previous several steps are confusing! The big picture is that you "click-and-drag" to connect IBOutlets and IBActions between Interface Builder and your Xcode.
  17. Select File > Save in Interface Builder.
  18. Press Command-Tab to return to Xcode.
  19. Select Build > Build in the Xcode menu.
  20. Your code should build without errors and start running. When you press each button, you should see the background color change.
  21. Press Home to exit your application.

As a review, in this exercise you used Interface Builder to drag/drop controls onto a Window. You also used Interface Builder to connect the IBOutlets and IBActions with your Xcode.


Skills Review


How To Contact Author

Feel free to contact the author for any of the following:


Updated 2009 Aug 22
Content viewable on all web browsers, including smart mobile phone devices.
Copyright © 1995-2009 Servin Corporation. All rights reserved.