Developing for iPhone

Open the “HelloiPhone” project we worked on in the previous tutorial.

Today we will start by adding a button to our interface. So click the Resources folder in the project window and double click “HelloiPhoneViewController.xib” to open the Interface Builder. We already have a label set up, so let’s add a button below it. In Interface Builder, select “Round Rect Button” in the Library window and drag it onto your view just below the label we created. Double click on your new button and type in “GO”. Feel free to move or resize the button however you want. You can resize using the blue dots when the button is selected. When you are happy with your button, proceed to the next step.

We have a button now, but it doesn’t do anything yet. Let’s add a slider and then we can add functionality to them later. Drag a “Silder” from the Library window to your view somewhere below the button. Resize it to fill the width of the view. Now drag another “Label” from the Library and place it below the slider. This label will change when the slider is moved with the help of some code. Change the label to say “0.5″. When the slider is to the left, we will set the slider label to 0 and set it to 1 when it is to the right. Since we are initializing the slider in the middle, the label should initially read 0.5. Highlight the new label and set the alignment to the center. This can be done in the Attributes Inspector. Your interface should now look something like this:

Let’s add some functionality to our interface.

Save your interface in Interface Builder by clicking File > Save. Now switch back to XCode and open “HelloiPhoneViewController.h” for editing. It is located in the Classes folder.
By now you should understand how to create a basic Objective-C application. If you don’t please read through the previous tutorials. Edit “HelloiPhoneViewController.h” to look like this:

#import <UIKit/UIKit.h>
 
@interface HelloiPhoneViewController : UIViewController {
 
}
 
-(IBAction) goButton;
 
@end

We have created a new method called goButton. But notice that instead of using “void”, we used “IBAction”. This is simply telling the compiler that we are returning an Interface Builder action. We will run the goButton method whenever the GO button we created is tapped.
Save the file and open “HelloiPhoneViewController.m” to fill out the method we created. You may notice that there is already some methods defined, some of them commented out. Leave them as they are for now, and add the following code for the goButton method:

-(IBAction) goButton {
	UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Button Pressed" 
	message:@"You pressed the GO button!"
	delegate:nil
	cancelButtonTitle:@"OK"
	otherButtonTitles:nil];
	[alert show];
	[alert release];
}

Lets look at what we did here:

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Button Pressed"

In this line we created an object called “alert” from the UIAlertView class. (this is a class that apple have written for us to handle alerts.) We then allocated a space in the memory for it using alloc and then initialized it with the title “Button Pressed”.

message:@"You pressed the GO button!"

This line set the message that we will display to the user in the alert.

delegate:nil
cancelButtonTitle:@"OK"
otherButtonTitles:nil];

We then used cancelButtonTitle to create a button on the alert box and set the button’s text to “OK”. We used a Cancel button because it will simply remove the alert box from the screen when pressed. OtherButtonTitles is set to nil because we dont want any more buttons in the alert box. You don’t have to worry about the delegate setting for now.

[alert show];
[alert release];

Then we ran a method from the UIAlertView class called “show” which shows the alert to the user, then we released the alert object from the memory. Memory management is important. Everything you load into memory should be removed when finished with. The iPhone only has a limited amount of memory available, so you have to use it wisely.
Make sure you understand what we did, and save the file.

Now we have the alert set up, let’s link the GO button to the goButton method so the alert is activated when the button is tapped. Switch back to Interface Builder. Click the GO button in your view window. Now open the Connections Inspector. This can be done by clicking Tools > Connections Inspector. Notice that the Connections Inspector uses the same window as the Attributes Inspector. They can be switched between using the tabs at the top of the window or by using the keyboard shortcuts.

In the Connections Inspector you will notice a list of actions that can be performed on the button. The one we want to use is “Touch Up Inside”. This means when the user’s finger leaves the button. Drag a line from the circle next to “Touch Up Inside” over to the “File’s Owner” icon in the HelloiPhoneViewController.xib window. Release the mouse and a menu should pop up with our goButton method listed. Click it to assign that method to the button’s action. The Connections Inspector should now have the goButton method listed under the “Touch Up Inside” event. Save the interface and switch back to XCode.

Great! Now we have created a button, created a method that will be run when the button is tapped and connected the two together! That wasn’t too hard was it? Now click Build and Run to test it out! Clicking the button will show the alert we created, but moving the slider won’t do much. We will add some functionality to the slider in the next tutorial.

| | | | | |