UIButton tutorial - example how to use the Button in XCode for iPhones

First of all you need to create a new project. Let's say View-Based Application and to make everything easier to explain, call it "TutorialProject".

Open the TutorialProjectViewController.xib file. In Interface Builder place View into the new window (Library » Cocoa Touch » Windows, Views & Bars) and place the Button and Label on the view (UIButton, UILabel).

Open the TutorialProjectViewController.h file, the code should look like this:

//
//  TutorialProjectViewController.h
//  TutorialProject
//
//  Created by Ondrej Rafaj on 5.8.09.
//  Copyright Home 2009. All rights reserved.
//

#import 
@interface TutorialProjectViewController : UIViewController {

	// ------ Tutorial code starts here ------
	
	IBOutlet UILabel *label; 
	// dont forget to release the label variable on the end of 
	// TutorialProjectViewController.m in dealloc function
	
	// ------ Tutorial code ends here ------
}

// ------ Tutorial code starts here ------
- (IBAction) pressMyButtonDudeFunction: (id) sender;
// ------ Tutorial code ends here ------


@end

Please place the code (lines 12 - 18 and 21 - 23) into your file. The first piece of code is creating new variable which we will use to control the text in UILabel after pressing the button and second part of the code is the declaration of the function (pressMyButtonDudeFunction) which will be called after pressing your button.

Open the TutorialProjectViewController.m file, the code should look like this:

//
//  TutorialProjectViewController.m
//  TutorialProject
//
//  Created by Ondrej Rafaj on 5.8.09.
//  Copyright Home 2009. All rights reserved.
//

#import "TutorialProjectViewController.h"

@implementation TutorialProjectViewController

// ------ Tutorial code starts here ------
@synthesize label;
// ------ Tutorial code ends here ------

// ------ Tutorial code starts here ------

- (IBAction) pressMyButtonDudeFunction: (id) sender {
	label.text = @"Heeey nice work!!";
}

// ------ Tutorial code ends here ------

/*
// The designated initializer. Override to perform setup that is required before the view is loaded.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
        // Custom initialization
    }
    return self;
}
*/

/*
// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {
}
*/


/*
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
}
*/


/*
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/

- (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;
}

- (void)dealloc {
    
	// ------ Tutorial code starts here ------
	[label release];
	// ------ Tutorial code ends here ------
	
	[super dealloc];
}

@end

In the first part (lines 13 - 15) we are synthesizing the label variable (I am a bit lame and I forgot to synthesize the label variable in the included source code :-), sorry for that). In the second part (lines 17 - 22) we are actually writing some code which is the action after pressing our button. Third (lines 72 - 74) part is releasing the label variable from the memory.

label.text = @"Heeey nice work!!";

this is just setting the text property for label to say "Heeey nice work!!"

Now when we have all the code, we can connect everything with the Interface Builder

Open the TutorialProjectViewController.xib file once again and follow the pictures bellow.

Right-click on the button and you should see menu like the one above. Drag the small circle next to the Touch Up Inside and drop it over the File's Owner icon in the second window.

After releasing the mouse over the File's Owner icon, you should see smaller menu with the name of your new function, in this case pressMyButtonDudeFunction, select it and we are done with the button.

Now we need to connect Label (UILabel) to the variable in your code.

This time right-click on the File's owner icon and you'll see almost the same menu like in the first case when we were connecting the button. Drag the little circle next to the label in Outlets and drop it over your label in the View.

Save everything in the interface builder and go back to the XCode. Hit "Build & Go" button and wait for iPhone simulator to show you how easily you can build an app in iPhone SDK (at least it wasn't Hello World!! :-)))

Please feel free to download the example source code from this tutorial in the right top corner of this page. If this tutorial was at least a little bit useful for you, I'll really appreciate any back-link to this article you can provide me with :)