Saturday, November 28, 2009

First iPhone Application - Tutorial

Creating First iPhone Application

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


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];


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

Sunday, November 22, 2009

Where to start ?!

So how to go about doing this? Creating your own apps, that is. It can be overwhelming to begin with. So much to learn, and so many different resources. Whether to spend time reading all the documentation, or just jump to all the tutorials and do them one by one? And the verbose Objective-C. It's all confusing.

Having played around with the SDK for the past couple of months, my experience has been that just going through the tutorials will help you make simple apps, however if you want to go farther than that, then you have to spend some time understanding the SDK. Of course, you cannot master the whole material. So the best way is to do the early tutorials to get a feel for what it is like to make an app; then decide what kind of app you would like to make, and then understand those materials in more detail.

So why yet another blog on iPhone programming? One of the things that is still missing from the blogs out there is elaboration on some of the common questions a beginner faces: "what is the difference between these two ways of achieving this result", "why are are there different kinds of templates", so on and so forth. Sometimes, I was left with more questions than answers. I had to dig deeper and get answers to some of those.I would definitely like to elaborate on those issues as I learn more.

So in the next few postings, I will start out with a basic app, and also address some of the basic questions regarding that. We will also understand some of the objective-C programming paradigm.

iCheers :-)

Saturday, November 21, 2009

necessity meets interest..


I just started working at an Eye research institute, where I work on developing computer vision algorithms for cell phone applications. The project is intended to help visually challenged / blind people.

We are targeting the iPhone for our project, which basically brings me to this blog. I am an Apple fan without doubt, and iPhone programming was something I wanted to try since its launch. I am lucky that I am getting to work on something which really excites me as part of my job ... So as I start learning iPhone programming, I thought it would be nice to share my experiences and thoughts. Hope you all find it useful.

Happy iProgramming!