Very, Very Simple iPhone App

I got a very simple iPhone application to work, basically a riff of a great blog post- from Cocoa is my Girlfriend, “Cocoa Touch Tutorial iPhone Application“. The application shows an image based on a button click.

1. Create a project in Xcode, “Cocoa Application”. Name it something, like “Example.”

2. Open up the ExampleAppDelegate.m, and after “applicationDidFinishing” block, add:
- (IBAction)click:(id)sender; {

}
2. Open up the Main Window.xib

This launches Interface Builder, or IB.

3. Select Tools/Library, select a button object. Drag it to a blank spot on your window. Give it a name, such as “button” (ooh, inventive!).

blog6

4. Create another button – this one I set to “custom” type (top field of the Button Attributes tab). This will be the placeholder for the new background image.

button 2

5. This is the interesting bit- hold down Control and click on the “button” (the visible one) and drag it to the AppDelegate box icon. You’ll get a pop-up black window asking if you want the action “click.” You do! (This is well described here.)

6. Hold Control and drag from the AppDelegate box to the invisible button. (you may want to select the invisible button first so its handles are visible.)

What was that about? This is instructing the Interface Builder which objects are references for actions, and outlets.

7. Back to XCode. Now, you want to add an image to Xcode. Open up your Apple Finder, find the image, and drag it onto the Resources folder of your XCode project. We’ll refer to the image as: airplane_pie.png. (Note: use PNG files.)

8. In the header file, (ExampleAppDelegate.h), we’re going to setup the variables and interface objects. Add to the “interface” block:
IBOutlet UIButton *button2; IBOutlet UIButton *button; IBOutlet UIImage *image;
After “IBOutlet UIWindow *window”.

9. After setting the window property, add the following:

@property (nonatomic, retain) IBOutlet UIButton *button; @property (nonatomic, retain) IBOutlet UIButton *button2; @property (nonatomic, retain) IBOutlet UIImage *image;

10. OK, we’re done with the header file. Now open the implementation file, “ExampleAppDelegate.m”. Add the following code, after “@synthesize window”:

@synthesize button; @synthesize button2; @synthesize image;

11. At the end, release the objects, so write in the “(void)dealloc {” block,

[button2 release]; [button release]; [image release];

12. Now, for the computing part. We’re going to tell the click method to set a background image when clicked. Add this code inside the click method:

image = [UIImage imageNamed:@"airplane_pie.png"]; [button2 setBackgroundImage:image forState:UIControlStateNormal];

13. Build and run!

blog5

If it doesn’t show up, check out the sample code.

More Reading:

Apple Developer site, Creating an iPhone App
Apple Developer site, “Creating Your First iPhone Application
Apple Developer site, Introduction to Objective-C Language
Thread on: Unable to setimage UIButton from iPhone Dev SDK.com
Best Ways to Show/Hide a View
And of course, no beginning tutorial would be complete without… the Hello World application, via iPhone O/S Apple official site: Hello World.
Best bit of code out there for tutorials, in my opinion, is MoveMe, because it’s got some advanced interaction design methods, and what is probably going on out there in the world moreso than the “hello worlds.”
Kind of funny, Guidance for Cocoa’s Steep Learning Curve

Key Bits Learned
– In a state-like mobile world, you need to really setup and direct the interactions. Getting to know and use Interface Builder in more detail helped- and helped clear up some of my confusion

– You can create interface objects on the fly in XCode (as MoveMe does)

– Setting up a method of working that is complete and explicit before running, testing, building. Setup the header file properties, synchronization, interface, etc. in wholeness before testing. This saved me a lot of worry after I started doing it. I read in one post how having a memory management method setup and using it as you develop is important, and I reinforce that. It’s not just style, it’ll also save you heartache!

Final Code Samples:
ExampleAppDelegate.h
// // ExampleAppDelegate.h // Example // // Created by Anna on 2/19/10. //


#import 
@interface ExampleAppDelegate : NSObject  {

        IBOutlet UIWindow *window;

	IBOutlet UIButton *button;

	IBOutlet UIButton *button2;

	IBOutlet UIImage *image;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UIButton *button;

@property (nonatomic, retain) IBOutlet UIButton *button2;

@property (nonatomic, retain) IBOutlet UIImage *image;
- (IBAction)click:(id)sender;

@end

ExampleAppDelegate.m
// // ExampleAppDelegate.m // Example // // Created by Anna on 2/19/10. //


#import "ExampleAppDelegate.h"
@implementation ExampleAppDelegate
@synthesize window;

@synthesize button;

@synthesize button2;

@synthesize image;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
}
- (IBAction)click:(id)sender;

{

	image = [UIImage imageNamed:@"airplane_pie.png"];

	[button2 setBackgroundImage:image forState:UIControlStateNormal];

}
- (void)dealloc {

	[button2 release];

	[button release];

	[image release];

        [window release];

        [super dealloc];

}

@end