Monday, May 9, 2011

Making your first iPhone app

Making your first iPhone app is about getting familiar with the tools and the SDK.

So let us start off, first of all open up XCode and click on new project in the file menu. In the iPhone tab you will be presented with a lot of types of projects, select window based application, click next, name the project myFirstApp.

Now you will have your working environment, i.e Xcode set up with some files with code in it.

iOS development is based on the Model-View-Controller approach, and it involves extensive use of viewControllers. View controllers are classes which draw view on the device's screen. The class is called UIViewController and most of the times this class will be subclassed to implement your own code. We will also have to do the same. To do this click on new file in the file menu and select the UIViewController subclass, name it FirstViewController and check the options for adding a .h file and a .xib file.

Now to add the view controller add the following code to myFirstAppDelegate.h.

First of all we have to include FirstViewController.h in the appDelegate. You do this by adding the following line on the top of the file

#import "FirstViewController.h"


Now we declare the view controller object in the app delegate. To do this we add the following line inside the @interface brackets


FirstViewController *viewController;


And then after the bracket close we add one more line


@property (nonatomic, retain) FirstViewController *viewController;


Now we move on to the myFirstAppDelegate.m inside the applicationDidFinishLaunching method. 

Now that you have the basic structure of you app ready, it is time to put in some code. The basic ways of interaction of your user with your apps will be through buttons and labels, let us do that. To do that we will use interface builder, a visual tool to design the interface of your app. The xib file that got added to your project when you created the new view controller subclass is an interface builder file. Double click this file to open up this file in interface builder.

Let us first add a button to the app. To do that search for 'UIButton' in the library window and drag it to your view. Resize and name it as you want. Similarly we add a label by searching for 'UILabel' in the library window and add it to your view.

Go back to XCode to FirstViewController.h, inside the @interface add declarations for the label. To do this add the following lines

UILabel *firstLabel;


Outside the brackets add the following lines


@property (nonatomic,retain) IBOutlet UILabel *firstLabel;


What the four lines above do it that they tell the app that we have one label. The IBOutlet keyword in the last line is for interface builder to know that there is one label we have declared in our code.


What we plan to do is to display the number of times the button is pressed on the label. So as an when the button is pressed the count on the label will get incremented by one. To do this we have to call a method whenever the button is pressed and in that method increment the count on the label.


Let us name this method buttonPressed, to tell the app to call the method whenever the button is pressed we need to connect the method and the button through interface builder, but for that we will have to add one line of code in the .h file below the @property line.


-(IBAction)buttonPressed;


This will tell interface builder that this method has been declared in code. Save everything and jump over to interface builder and right click on files owner, you should see the firstLabel you declared, drag the small circle besides the firstLabel to the label in your window/view. This now connects the variable firstLabel to the actual label in the view. Do the same thing for the method buttonPressed, drag its circle to the button and you should see a list of actions, select the touch up inside action.

With this all your connections are established and the only thing left to do is write the code for incrementing the count. Go to the FirstViewController.m file and add the following line

@synthesise firstLabel;


This line is to synthesise the property we had added in the FirstViewController.h file. Don't worry you don't have to care too much about this right now.


As you would expect when the app first starts the count should be zero. To do this find the viewDidLoad method in FirstViewController.m and uncomment it. Add the following lines


firstLabel.text = [NSString stringWithFormat:@"%d",0];


 Now to implement the method buttonPressed. 


-(IBAction)buttonPressed
{
      NSInteger num = [firstLabel.text intValue];
      num++;
      firstLabel.text = [NSString stringWithString:@"%d",num];
}


Save everything and build the project. If everything goes well you will have your app running!

In an extension to this tutorial we will add code to the existing app that will save state, i.e the count so that when you open the app again after closing the count gets retrieved.




No comments: