Bookmark and Share

iPhone SDK Tutorial
Chapter 2. Adding Interactions


In this tutorial, we will add some interactions to the buttons. The final picture for the iPhone simulator is shown below.


iPhone Interaction Added

At the press of each button, it will display corresponding text labels at the bottom of the simulator.

Through this example, we will learn a special instant variable called "outlet" and a special method called "action" method.
We will also have some feel for "Application Delegate" and "ViewController" as well.
And finally, we will have some code writing.


2.1 Creating a Project

Create a View-based iPhone application and save it under the name "iPhone vs Android".


2.2 Adding Actions to Controller

Let's look at the files that Xcode generated for us. Click the Classes folder under Groups & Files.


Controller Files

Remember in our GUI, we need to have a text label to display which button has been pressed and actions by the buttons. So, we will need a pointer to the text and action methods to tell it which text should be displayed on the label.



Let's look at the ViewController.h.

//
//  iPhone_vs_AndroidViewController.h
//  iPhone vs Android

#import <UIKit/UIKit.h>

@interface iPhone_vs_AndroidViewController : UIViewController {
	UILabel *osText;
}

@property (nonatomic, retain) IBOutlet UILabel *osText;
-(IBAction)buttonPressed:(id)sender;
@end

In our case, the instance variable "osText" is an "Outlet" which is a pointer referencing the text label object as you can see it from the ViewController.h. Here, "IBOutlet" is needed to tell Interface Builder that we are going to connect to a nib object. The return type "IBAction" is also required for an action method.

In the action method of the interface:

-(IBAction)buttonPressed:(id)sender;

"sender" is one of the two buttons in our case.

Now, it's time to look at the implementation file: ViewController.m.

//
//  iPhone_vs_AndroidViewController.m
//  iPhone vs Android

#import "iPhone_vs_AndroidViewController.h"

@implementation iPhone_vs_AndroidViewController
@synthesize osText;

-(IBAction)buttonPressed:(id)sender {
	NSString *title = [sender titleForState:UIControlStateNormal];
	NSString *newText = [[NSString alloc] initWithFormat:
						 @"%@ button pressed.",title];
	osText.text = newText;
	[newText release];
}

- (void)didReceiveMemoryWarning {
	// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
	
	// Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
	// Release any retained subviews of the main view.
	// e.g. self.myOutlet = nil;
	self.osText = nil;
}

- (void)dealloc {
    [osText release];
    [super dealloc];
}
@end

The line:

@synthesize osText;
tells the compiler to create the getter and setter methods automatically.
The following 5 lines are to set a proper text of our label at the bottom of iPhone. Also, do not forget the importance of memory management and put following lines of code.

[newText release];
...
self.osText = nil;
...
[osText release];


2.3 Adding Buttons and Label Using Interface Builder

Now it's time to decorate the window with buttons and label.
Double click ViewController.xib in Resources under Groups & Files to open Interface Builder.


Buttons And Label

Place the label toward the bottom of the view, so the label lines up with the left and bottom guidelines and then delete the existing text. After you have placed the label at the bottom of the view, drag two Round Rect Buttons from the library to our view.



2.4 Make Connections

Now we have all the pieces of our interface and make these pieces to work together.

The first step is to make a connection from File's Owner to the label in the View window. Hold down the control key and click the File's Owner icon. Keep the mouse down and drag away from the File Owner's icon toward the View window. A blue guideline should appear. Keep dragging until your cursor is over the label in the View window as in the picture below.


Connecting Outlet

With the cursor over the label, let go of the mouse button, and a small gray menu and select "osText" from the gray menu.


Outlet Selection Menu


2.5 Connections Inspector

Now next thing to do is specifying the actions the buttons trigger. Click the button, and then select "Connections Inspector" under "Tools" menu. Then you will see the connections inspector showing our button's available events.


Connection Inspector 1

Click in "Touch Up Inside" circle and drag away with the mouse button still pressed. Then you will have a gray connection line. Drag this line over to the File's Owner icon. When the little gray menu pops up, select buttonPressed.
Then, you will see the changes in the Connections Inspector as the picture below.


Connection Inspector 2

2.6 Run It

Build and Run.

Then, you will see the picture shown at the start of this Chapter.



(Note) ".nib" is short for "NeXT Interface Builder"