Saturday, December 11, 2010

Nice tutorials, stanford course and other resources

Here is a great resource for tutorials on iPhone development:
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:

Also, I like the following books:

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.

Friday, September 10, 2010

"UIImagePickerController does not work"!

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

We have not set the delegate! So no call backs being obtained! Just add : 
 imagePicker.delegate = self;

UIImagePickerController strange behavior

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

Thursday, September 9, 2010

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

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:

NSLog(@"Data: point.x = %f, point.y = %f", point.x, point.y);
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: 

# define DBLog(fmt,...) NSLog(@"%@",[NSString stringWithFormat:(fmt), ##__VA_ARGS__]);
# define DBLog(...)
Also, you can include, in "Edit Active Target" -> "Build" -> (Select Debug Config) -> "Other C/C++ Flags", write:


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__);
#   define DLog(...)

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!

Wednesday, December 2, 2009

First iPhone Application - Tutorial II

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 ?
Back to Top

2. Add the button to the window

- 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.

Back to Top

3. How to connect it to action?

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;


//  Controller.m

#import "Controller.h"

@implementation Controller

@synthesize myLabel;

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


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

Back to Top

4. Build and Run..

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 . 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.
//  Copyright 2009 __MyCompanyName__. All rights reserved.

#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!

// Put the label text to what we want
    myLabel.text = [NSString stringWithFormat:@"Dude, Wake up!"];

Back to Top

7. Build and Run... with the sound!

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

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