Saturday, November 28, 2009

First iPhone Application - Tutorial

Creating First iPhone Application

Introduction
1. Create a new Project
2. Add an image to the Resources
3. Add an image view and a label
4. Build And Run
5. Analysis
6. Source Code



Introduction

We will build a very simple application using the iPhone SDK. The app will show a label and an image
  • We will further extend it to react to a button press
  • We will see both with and without using the Interface Builder 
    • That will clarify the difference between  allocating a "view" in xcode vs. dragging/ dropping one from Interface Builder
  • Add elements directly to the Main Window versus adding it to another view and adding that view to the Main Window 
What you need:
  • You have to use a Mac to develop iPhone apps. Specifically, you need an Intel Mac – iPhone development isn’t supported on PowerPC Macs. There are hacks to make it work (at time of writing), but if you’re serious about it you should probably just get an Intel Mac. Doesn’t have to be brand new; all new Macs have been Intel-based for years now
  • You’ll need the iPhone SDK, which is free from Apple when you sign up as an 
Back to Top

1. Create a new project

Start XCode. File -> New Project-> Select Application Under iPhone OS. Choose a "Window based application" (In some later post, I will try to clarify the difference between the different kinds of applications)



Name it PhotoFrame. The application will be built for you with some basic files. You should be able to build and run this. It will pop up the iPhone Simulator. The app will show just a blank screen.

Back to Top
2. Add an image to the Resources

In XCode, on the left side menu, there is a folder called "Resources". Under that there is a file called MainWindow.xib. This is the main window that appears on the app. Anything you want to add to the app has to be added to this, either directly, or via adding other views as subviews. In this case, we are going to add an image and a label directly to the window using Interface Builder, which is the GUI integrated with XCode. (Later I will post where you do the same thing in code only, and also adding other views as subviews).  

Double Click on the MainWindow.xib. It will pop open the Interface Builder. 


The above picture shows the various components of the interface builder. The MainWindow.xib, the window, the attributes inspector, and the library.    

First, we need to add an image to your Resources folder. Drag an image from the Finder to the Resources folder. It will ask you to chose the target. Choose the name of you app as shown below:


       
Back to Top

3.Add an image view and a label to the project

In the Window, drag an ImageView from the library. Click on the image on the window, then, in the attributes window, choose from the "Image " drop down menu,  the image that you had put in Resources earlier. Choose "Aspect Fit" in the "Mode" drop down menu.  Then the actual image will be shown on the ImageView. This should look something like this. 

Also add a text label by dragging in on to the window from the library. Change the title to whatever you want. I called it "Dude, Wake Up" :-).

We can add an image view  in the code as well. Since we did it through the interface builder,  we will not need to allocate memory or deallocate memory or anything. Look at the code snippet below.

////////////////////////////////////////////////////////////////////////////////////////////////////////
#import "PhotoFrameAppDelegate.h"
@implementation PhotoFrameAppDelegate
@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {  

    // Override point for customization after application launch
    [window makeKeyAndVisible];
}
- (void)dealloc {
    [window release];
    [super dealloc];
}
@end

////////////////////////////////////////////////////////////////////////////////////////////////////////

When the application launches, applicationDidFinishLaunching function is called. The imageview will automatically be shown on the main window. No need to write any code.

Back to Top
4. Build and Run the app

Just build and run the app. This is how it should look like. It just shows a label and an image. It does not react to any action or anything.
Let me know if you have any questions. Comments on improving the posting are welcome!
Next time, we will add an action button which will play a sound along with showing the label + image when you press a button. We will also do the app using code instead of dragging the views from library on to the window. Let me know if you want a copy of the source code. 

Back to Top

- We just showed an Image and a label to go with it.

- Image View is an UIView that can hold and show an image. The window cannot directly show an image. By dragging the ImageView on to the window, we added the image view as a subview to the main window.

- We could have also added another view to the project, put the image and the label on the view, and then added that view as a subview to the main window. In this application, it is not necessary. In some cases, where you want your view to draw custom things, you will have to do that.

Back to Top

6. Source Code
You can download the source code HERE

Back to Top

7 comments:

  1. interesting blog

    ReplyDelete
  2. You can download the source code at :
    http://vehicle.me.berkeley.edu/~pannag/iPhone/PhotoFrame.zip

    ReplyDelete
  3. Another important factor regarding the popularity of an application is how easily it can be incorporated into the daily life of the iphone user.

    ReplyDelete
  4. iPhone 5 would definitely catch your interest. It's got almost everything you can wish for a mobile phone to have.

    ReplyDelete
  5. This articles it’s very useful for me, and I am completely satisfied with iPhone application-tutorial. All comments and articles are very useful and very good.

    ReplyDelete