Learning iPhone Programming ...

Nice tutorials, stanford course and other resources

2010-12-11T17:20:00.000-08:00

Here is a great resource for tutorials on iPhone development:
http://www.iphonesdkarticles.com/
The tutorials are well written and explained. I had found this website immensely helpful as I started out!

Another great resource for learning is Stanford's course on iPhone programming. Their latest lecture slides / videos available for free on Stanford's iTunes and course websites:
http://itunes.stanford.edu/
http://www.stanford.edu/class/cs193p/cgi-bin/drupal/

Also, I like the following books:
iPhone-Programmers-App-Driven-Approach-Developer
iPhone-SDK-Programming-Advanced-Development

The videos and books are the best resources if you want to learn all the aspects. Tutorials and online help can be used for specific topics. On a side note, I would suggest learning the apps in code rather than interface builder. Interface Builder is great however, it can be very confusing in the beginning as it hides certain information. Code is clear and transparent, so easy to begin with.

"UIImagePickerController does not work"!

2010-09-10T00:31:00.000-07:00

Here is another common mistake that I have seen with UIImagePickerController. Say, I want to display the picked image in the UIImageView (imageView), but it doesn't work. It is a simple issue, can anybody guess what the problem is before you see the answer below?

- (IBAction)takePhoto {

     UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
     imagePicker.sourceType = UIImagePickerControllerSourceTypeCamera;
     [self presentModalViewController:imagePicker animated:YES];
     [imagePicker release];
}

- (IBAction)choosePhoto {

     UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
     //imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
     [self presentModalViewController:imagePicker animated:YES];
     [imagePicker release];
}

- (void)imagePickerController:(UIImagePickerController *)imagePicker didFinishPickingMediaWithInfo:(NSDictionary *)info {

     UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage];
     imageView.image = image;

     [self dismissModalViewControllerAnimated:YES];

ANSWER:

We have not set the delegate! So no call backs being obtained! Just add :

imagePicker.delegate = self;

UIImagePickerController strange behavior

2010-09-10T00:20:00.000-07:00

Here is a piece of UIImagePickerController source code. The source code is really straight forward. Say, we have a ViewController and in the .m file, we declare the following information:LoadCamera is a function that open the initiates the UIImagePickerController and adds it to the delegate's window. What's wrong with the code?


-(IBAction)loadCamera:(UIButton *)sender{
     
     PagingScrollViewAppDelegate *appDelegate = (PagingScrollViewAppDelegate *)[[UIApplication sharedApplication] delegate];

     imagePickerController = [[UIImagePickerController alloc] init];
     imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
     
     imagePickerController.delegate = self;
     
     [appDelegate.window addSubview:imagePickerController.view];
 }

Symptoms:

The strange thing occurs when I select an image inside the UIImagePickerController, instead of calling the

- (void)imagePickerController:(UIImagePickerController *)picker 
          didFinishPickingImage:(UIImage *)image
                      editingInfo:(NSDictionary *)editingInfo

it calls the

- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker

Answer:

Basically, it is due to the fact that we are adding the UIImagePickerController's view as a subview of the main view.

UIImagePickerController should be presented modally. Else, it gives strange behavior!

Hope that helps!




UIViewController *viewController = [[[UIViewController alloc] initWithNibName:nil                                    bundle:nil] autorelease];

self.navController = [[[UINavigationController alloc]           

                           initWithRootViewController:viewController] autorelease ];



[appDelegate.window addSubview: [navController view]];

[navController presentModalViewController:myImagePicker animated: YES];

NSLog tricks: Log only in Debug mode. Add Function name, Line num

2010-09-09T23:50:00.000-07:00

It is a common requirement to log certain statements only in the Debug mode, while needing to avoid them in the release mode. Of course, one option is to have statements like this everywhere:


#ifdef DEBUGGING

NSLog(@"Data: point.x = %f, point.y = %f", point.x, point.y);

#endif

And define DEBUGGING somewhere in the header file. However, this can get very verbose.
A better option is to use Macros. In project_Prefix.pch file, include:


#ifdef DEBUGGING

# define DBLog(fmt,...) NSLog(@"%@",[NSString stringWithFormat:(fmt), ##__VA_ARGS__]);

#else

# define DBLog(...)

#endif

Also, you can include, in "Edit Active Target" -> "Build" -> (Select Debug Config) -> "Other C/C++ Flags", write:

-DDEBUGGING

This automatically defines DEBUGGING flag in Debug mode. Leave it blank for the Release mode.

Now, you can use DBLog instead of NSLog:

DBLog(@"Data: point.x = %f, point.y = %f", point.x, point.y);

This will automatically print statements in the Debug mode, and not print the statements in the Release mode!

(Alternatively, you can have a line in the Prefix.pch file:

#define DEBUGGING

And manually comment it out for Release mode.)

Similarly, if you want you also have function name and line number, there is a nice trick:

#ifdef DEBUGGING#   define DLog(fmt, ...) NSLog((@"Func: %s , Line: %d, " fmt), __PRETTY_FUNCTION__, __LINE__, ##__VA_ARGS__);
#else
#   define DLog(...)
#endif

If you always want to print out regardless of the DEBUGGING SETTING, but with the function name and line number:

#define ALog(fmt, ...) NSLog((@"Func: %s , Line: %d, " fmt), __PRETTY_FUNCTION__, __LINE__, ##__VA_ARGS__);

Hope that helps! Happy iCoding!

First iPhone Application - Tutorial II

2009-12-02T22:21:00.000-08:00

Now, let's extend the previous one so that it responds to a button press!

1. Introduction
2. Add the button to the window
3. Connect button to action method
4. Build And Run
5. Analysis / Big Picture
6. Add Sound to the project

1. Introduction

Last time we had an app which showed an image and a label. It did not respond to any action button. This time, let's add an action button. We will add a button and when it is pressed, the label will show the text, and the app will also make a sound. So:

How to add a button to the interface builder ?
How to connect the clicking of that button to an action ?
How to play sound ?

- Double-click on the MainWindow.xib file. It should pop up the Interface builder as well.

- From the library, drag a "Rectangular Button" (of class UIButton) on to the window. You can play around with the attributes inspector to change its title. I gave the title "Wake him up!". I also erased the title of the other label we had earlier. We will show the text on the label when the button is pressed.

This Button is just a user interface on the screen view. How to connect this to any action? It cannot control any data/action directly. The window cannot respond to the click of that button. That is where we need a Controller, that can knows how to respond to that click of the button. A controller is the connection between the data and the view. Since we are following the Interface Builder, we will create this controller object using that.

- Add a new controller file to the project. From XCode: File -> New File -> Cocoa Touch Class (under iPhone OS) -> Objective-C class (subclass of NSObject). Call it Controller. This will add Controller.h and Controller.m files to the project.

- Drag a "Object" from the library on to the MainWindow.xib. We gotta now connect the controller in the files to the controller in the MainWindow.xib. Click on the Controller object in the Mainwindow and in the Identity Inspector tab change the Class to "Controller".

- In XCode, add an IBOutlet and an IBAction method to the Controller class:

// Controller.h /////////////////////////////////

#import < Foundation/Foundation.h >

#import < UIKit/UIKit.h >

@interface Controller : NSObject {

IBOutlet UILabel *myLabel;

}

-(IBAction) onWakeUpButtonClicked:(id)sender ;

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

@end

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

// Controller.m

#import "Controller.h"

@implementation Controller

@synthesize myLabel;

- (IBAction) onWakeUpButtonClicked :(id)sender {

myLabel.text = [NSString stringWithFormat:@"Dude, Wake up!"];

}

@end

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

- The action method is supposed to happen when the button is pressed. The label should show the text that we want to show when the button is pressed. We have to connect this label and the action method to the ones on the Interface Builder.

- In IB, click on the Controller and in the Inspector, you should see myLabel under the Controller Connections tab. Draw a line from the small circle next to it to the label on the Window.

- In the window, click on the "Wake him Up" UILabel. In the connections, you should see a list of actions. Drag the circle next to "touch up inside" on to the "Controller" in the MainWindow.xib. In the little Menu that pops, choose "onWakeUpButtonClicked". Thus, we have established connections between the IB elements (which the user sees) to the code elements (which run the show behind the doors).

If you click on the Controller in the MainWindow.xib, you should see the onWakeUpButtonClicked method shown connected to the button in Received Actions (if you made the previous connection properly).

You should see that when you press the "Wake Him Up" button, the label shows the text "Dude, Wake up!". We will also add the sound alert now. Before that, let's recap what we did so far in a big picture sense.

Back to Top

5. Analysis:

We had an image and a label on the window. We added a button to trigger some action when pressed.
To be able to respond to the Button click, we had to make a controller object which knows how to respond to the button click. We instantiated the Controller object by dragging the block from library in to the MainWindow.xib. We connected that blob to the one in the code by defining it's "Class" in the Interface Builder (Step 3).
We connected the action method to the button click via interface builder. We also had to make the label a member of the controller object, so that the text on that can be changed in response to the click. We connected the member myLabel of the Controller to one on the window.
IBAction and IBOutlet are keywords that tell the Interface Builder to look for when we are making the connections. That is how when we click on the view, some action onWakeUpButtonClicked is triggered by the code.

If you look at the Controller.m code, you will see that the onWakeUpButtonClicked method does nothing but sets the label's text to what we wanted.

- (IBAction) onWakeUpButtonClicked :(id)sender {
myLabel.text = [NSString stringWithFormat:@"Dude, Wake up!"];
}
Back to Top

6. Adding Sound to the Action Method:

It is very Simple indeed.

- Drag any sound file from the Finder to the "Resources" folder in left menu on XCode. (Mine is called danger.au . I found it somewhere in the Java Applets sound folder). A dialog box pops us asking you to add it to the PhotoFrame target.

- Add AudioToolBox to the Frameworks. Right Click on the FrameWorks folder, Add Existing Frameworks. Choose AudioToolbox. add "#import " in Controller.m

- Modify the onWakeUpButtonClicked method and use the AudioServices toolbox APIs to play the sound.

// Controller.m

// PhotoFrame

// Created by Pannag Sanketi on 12/2/09.

#import "Controller.h"

#import < Audiotoolbox/Audioservices.h >

@implementation Controller

@synthesize myLabel;

- (IBAction) onWakeUpButtonClicked :(id)sender {

// Form a URL to the sound file, which in init using the Path

NSBundle *mainBundle = [NSBundle mainBundle];

NSString *filePath = [mainBundle pathForResource:@"danger" ofType:@"au"];

NSURL *aFileURL = [NSURL fileURLWithPath:filePath isDirectory:NO];

// Create a sound ID,

SystemSoundID myID;

// Register the sound

AudioServicesCreateSystemSoundID((CFURLRef)aFileURL, &myID) ;

// Play the sound!

AudioServicesPlaySystemSound(myID);

// Put the label text to what we want

myLabel.text = [NSString stringWithFormat:@"Dude, Wake up!"];

}

@end

There you go! When you press the "Wake Him Up" button, there is a sound played as well as the label shows the text "Dude, Wake up!".
Back to Top

First iPhone Application - Tutorial

2009-11-28T21:32:00.000-08:00

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

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:

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.

5. Analysis

- 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

Where to start ?!

2009-11-22T20:40:00.000-08:00

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 :-)

necessity meets interest..

2009-11-21T18:38:00.000-08:00

Greetings!

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!