Programming Objective-C in XCode 4 – iPhone iOS 4.3 Hello, World! tutorial
Hi,
Somewhat days ago Apple released a new version of XCode, and a lot of stuff is new in this version. Thereby also the layout of the application, interface builder and the way an application can be constructed.
But, for those of you completely new to development for iOS devices (and for those of you new to XCode 4 or for you who just want to shape up a bit? =S), I wrote a Hello World for XCode 4, iOS4.3.
So, lets get started.
What you will learn
In this tutorial you will learn how to create a new iOS application with design layout set for iPhone. The application you are creating will include an label (text) and a button (to change the text of the label). Also the application will have a background color.
You will learn the basics of working with XCode (The very basics) and be able to play around with, what you proudly can call, your first iOS Application.
What I expect you have already done…
The first thing I expect you to have done it to have gotten a mac (or at least a computer running OSX). No, you cannot develop any iOS applications using a windows or linux computer… or at least I haven’t seen anybody do it (and I don’t know why you would try to either).
The second thing I expect you to have done is to either have purchased XCode 4 from the App Store, or have downloaded it from http://developer.apple.com (if you have a developers license!), and installed it on your computer.
When all thats done, we’ll start with our process.
Creating the project
To start with the development, we will need to create a project. Start off with launcing XCode. When loaded, you will see the Welcome screen. (Pic.1). In this view, click “Create a new XCode project”.
Pic.1
On the next page you can choose which template you want to use to start you project with (Pic.2). At this page, choose “View-based Application”, and click next.
Pic.2
The next page will let you define your projects name and the identifier. The identifier is the name of your application. Its the same name used when you register your application at Apples website and release it to the AppStore. You can see it like a backwards domain name. If your domainname of your website is mycompany.com, your identifier would be com.mycompany.APPLICATIONNAME. Because we are creating an test application and note going to release anything we can choose my.company here. The “Product Name” should be “HelloWorld” (Pic.3).
Pic.3
When you have done this, click Next. You will now have to choose where to save your new project (Pic.4). I have saved it on a subdir of my Desktop. It doesn’t really matter where you save it, so place it somewhere you like.
Pic.4
Your project is now created.
Orientation day
The new XCode is very much improved with a lot of new features. Some things have really been made easier. We are not going into any details, just an quick orientation. If anything is weird, either post a comment or search google.
Now that you have created your project, xcode should look like this (Pic.5):
Pic.5
On your far left you see the “Project Navigator”, on the top of the navigator you can quickly access other navigators (E.g. Issue Navigator, Debug Navigator ect). In the middle you find your, ehh… page view? Don’t really know what to call it, but its there all the action happens. In changes depending on what you are doing, but don’t panic… I’ll walk you through it.
At the top left you see something that looks like a play button,… well it is a play button. Pressing it will launch the iOS Simulator and launch your application. The stop button to the right of it will, off course, stop your application.
Starting with the code
Lets starts with some code! Hell yeah! 
I guess that if you are new to objective-c and XCode everything seems difficult and hard… well, it might seem that way but it isn’t. Hell, if I can do it… you can! I started of as an PHP developer and my interests took me iOS development. Anyhow…
Start with selecting “HelloWorldViewController.h” in your “Project Navigator”. Just click it once. Your XCode should now look like this (Pic.6):
Pic.6
Now we are going to write some code. What I’ll do is paste the finished code here first, and then go thrue it..
Make sure you HelloWorldViewController.h file looks like:
//
// HelloWorldViewController.h
// HelloWorld
//
// Created by Paul Peelen on 2011-03-14.
// Copyright 2011 9697271014. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface HelloWorldViewController : UIViewController {
UILabel *textLabel;
}
@property (nonatomic, retain) IBOutlet UILabel *textLabel;
- (IBAction)changeTheTextOfTheLabel;
@end
Now, first off I have added “UILabel *textlabel”. The is the actual text we are going to show and change. The second thing I did was adding an @property with nonatomic and retain set to it. The reason for this is that I let objective-c make the automated getters and settings (with help of the @synthesize which you will notice shortly) and let it retain the object.
Directly after I defined an action to my class, the action “changeTheTextOfTheLabel”, and I guess that you can guess what this action will do Thats right, it will change the text of the label (when the button is pressed).
Now, lets change to the .m file. Click on HelloWorldViewController.m in your Project Navigator.
Here you see that XCode has been so kind and added some stuff for us already. This is quite alright, we will leave it. In face, we will add some more to it.
First of, lets add our @synthesize. Write “@synthesize textLabel;” (without “) just below “@implementation HelloWorldViewController”. Now, below you will find the “dealloc” function. In here, add “[textLabel release];”, (Again, without “).
The dealloc function is used when the current class gets de-allocated for some reason. When that is done we want to free our memory of all the stuff this class contains (which will be lost otherwise anyways).
Now, we need to add our new function. Add the following just below the } of the dealloc function.
- (IBAction)changeTheTextOfTheLabel
{
[textLabel setText:@"Hello, World!"];
}
Now what did we do? Well, we added the functionality of our “changeTheTextOfTheLabel” function. Whenever this function is called, the text of the label will be set to “Hello, World!”.
Your HelloWorldViewController.m should now look like:
//
// HelloWorldViewController.m
// HelloWorld
//
// Created by Paul Peelen on 2011-03-14.
// Copyright 2011 9697271014. All rights reserved.
//
#import "HelloWorldViewController.h"
@implementation HelloWorldViewController
@synthesize textLabel;
- (void)dealloc
{
[textLabel release];
[super dealloc];
}
- (IBAction)changeTheTextOfTheLabel
{
[textLabel setText:@"Hello, World!"];
}
- (void)didReceiveMemoryWarning
{
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}
#pragma mark - View lifecycle
/*
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
[super viewDidLoad];
}
*/
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
@end
Now the code is done, yes already! Keep in mind, this is only a hello world project!
Our design
Now that our code is done, we need to design our app. So left click on “HelloWorldViewController.xib”. This is the actual design file of our hello world project. Your XCode window should now look like this (Pic.7):
Pic.7
All this looks kind of boring, and also a bit confusing… what we want to do is add a button and a label, but how can we do that? Well, the first time I started XCode I got worried as well… what you need to do is add the right menu first. Do this by clicking the right most button of the “view” panel (Pic.8):
Pic.8
Afterwards you will see a list at the bottom in that menu, there you should select the “Show the Objects Library” (Pic.9):
Pic.9
Now, your XCode should look something like:
Pic.10
Yeey… looks more exciting!.
Lets add our label and button. From the Object Library (the menu we just got on the right bottom), find the “Label” (should be at the top!) and drag it into the large grey area in the middle of XCode (your window). Using the small dots on the side of the label you just dragged in you can change the size of the label. When coming closer to the borders of your window, blue lines will appear to guide you placing your label. Drag it to your preferred location. Your window should now look like (Pic.11):
Pic.11
Now find the “Round Rect Button” in the same Object Library. Should be just below the Label. Same here, drag it into your window to the location you like. When you have placed it, click the “Show the Attributes inspector” (top of the right menu, 4th icon) (Pic.12):
Pic.12
Just some rows below, you’ll find “Title”. Click here and write “Press me, Baby!”. When you have done that, left-click your button again and press the following key combination: 
(Command key) + 
(Shift key) + =
When you have done that your view should look something like this:
Pic.13
Now… lets save it. Just press (Command key) + S.
Now we need to bind everything together, so right click on your “File’s Owner”. The File’s Owner is the yellow box between your project navigator and your design window (Pic.14):
Pic.14
On the last row of this cute little box you’ll see “changeTheTextOfTheLabel”. Yep, this is our own function. XCode nicely read it our of our class. Click in the little circle to the right of the “changeTheTextOfTheLabel” and drag it to your button (Pic.15) and release it there. A new little box will pop up, here you should choose “Touch up inside” (Pic.16).
Pic.15
Pic.16
What you have done now is that when a “Touch up inside” action is preformed on the button, the code will call our “changeTheTextOfTheLabel” action.
Now, right click again on your File’s owner. On the second you will find our “textLabel”. Drag the circle on the right of “textLabel” to our label and release there.
Well… now we have told our code that our label should react on “textLabel” actions. Whenever our code tells the object “textLabel” to do something, our label in the design will reflect on that action.
Test drive
We have now build our application, so lets give it a test drive. Press the play button (Pic.17):
Pic.17
XCode will now launch the iOS Simulator with our new app in it. When launced, press your button. Your view should now look like this (Pic.18):
Pic.18
DONE! You have now created your first iOS application using XCode 4.
Did you like the tutorial? Please Flattr me and Facebook like me (top of post), I appriciate it 
Best regards,
Paul Peelen
January 10th, 2012 at 14:11
This is because you are using the new ARC (Automatic Refference Counting). Using ARC it is not needed to allocate and release objects.
So, remove all the release, dealloc and retain reffences and methods and you should be fine.
/P
January 10th, 2012 at 14:16
@DanielW: My guess is that you made a spelling misstake. What you can do is check what the file name is called. The header file (.h which you are reffering to) should be the same as the one between ” and “.
Regarding your code questions: I have tried to make the tutorial as general as possible yet still according to my writing style. Every developer has his/her own style of coding, hence you as well
My apps are written this way… and I have about 13 or so available on the iTunes AppStore.
January 10th, 2012 at 14:17
Yes, you are right. I will write a new one as soon as I get the time… for iOS 5.0.1> and Xcode 4.3+
January 17th, 2012 at 20:24
Really like your layout. Some uselful content too
February 2nd, 2012 at 14:54
thanks a lot……………….
February 6th, 2012 at 15:01
Didn’t quite match what I see in XCode 4.2, but helpful nonetheless.
March 27th, 2012 at 18:49
Thanks for this tutorial. It helped me get up to speed on the latest version of XCode after taking a year off from playing around with Xocde 3
March 30th, 2012 at 20:59
I’m frustrated… I can’t make it work. I’m using Xcode 4.3.2, targeting iOS4.3 and I get this error and the app don’t launch and it compiles OK…
2012-03-30 16:51:24.118 boton simple[377:b903] *** Terminating app due to uncaught exception ‘NSUnknownKeyException’, reason: ‘[ setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key textoLBL.’
*** Call stack at first throw:
(
0 CoreFoundation 0x00fd55a9 __exceptionPreprocess + 185
1 libobjc.A.dylib 0×01129313 objc_exception_throw + 44
2 CoreFoundation 0x00fd54e1 -[NSException raise] + 17
3 Foundation 0×00794677 _NSSetUsingKeyValueSetter + 135
4 Foundation 0x007945e5 -[NSObject(NSKeyValueCoding) setValue:forKey:] + 285
5 UIKit 0x0021030c -[UIRuntimeOutletConnection connect] + 112
6 CoreFoundation 0x00f4b8cf -[NSArray makeObjectsPerformSelector:] + 239
7 UIKit 0x0020ed23 -[UINib instantiateWithOwner:options:] + 1041
8 UIKit 0x00210ab7 -[NSBundle(UINSBundleAdditions) loadNibNamed:owner:options:] + 168
9 UIKit 0x0001617a -[UIApplication _loadMainNibFile] + 172
10 UIKit 0x00016cf4 -[UIApplication _runWithURL:payload:launchOrientation:statusBarStyle:statusBarHidden:] + 291
11 UIKit 0×00021617 -[UIApplication handleEvent:withNewEvent:] + 1533
12 UIKit 0x00019abf -[UIApplication sendEvent:] + 71
13 UIKit 0x0001ef2e _UIApplicationHandleEvent + 7576
14 GraphicsServices 0x00cd6992 PurpleEventCallback + 1550
15 CoreFoundation 0x00fb6944 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE1_PERFORM_FUNCTION__ + 52
16 CoreFoundation 0x00f16cf7 __CFRunLoopDoSource1 + 215
17 CoreFoundation 0x00f13f83 __CFRunLoopRun + 979
18 CoreFoundation 0x00f13840 CFRunLoopRunSpecific + 208
19 CoreFoundation 0x00f13761 CFRunLoopRunInMode + 97
20 UIKit 0x000167d2 -[UIApplication _run] + 623
21 UIKit 0x00022c93 UIApplicationMain + 1160
22 boton simple 0×00002615 main + 181
23 boton simple 0x00001ea5 start + 53
)
terminate called throwing an exception(lldb)
March 30th, 2012 at 21:15
It can mean numerous things when not having the code… but usually the error “this class is not key value coding-compliant for the key …” occurs when your IBOutlet references to something that doesn’t exist. So check you nibs.
Otherwise, send me the code at paul at paul peelen dot com.
April 10th, 2012 at 6:24
Nice concise but informative one, Thank you very much!
April 13th, 2012 at 20:46
Thanks for the tutorial it works fine for iPad with IOS 5.0 just one question, in teh simulator after I press the button and the label change, if I close the application in the simulator and I try to open it again in the icon the app crash, I think is because something of the memory stored. what can be done in this case. I’m just starting in the iPad development and as you I was a PHP developer after I move to oracle and now I want to learn Objective C.
thanks in advance.
April 20th, 2012 at 11:11
Thanks Paul for making this tutorial. The transition to XCode 4.3 is definitely not easy, and for C++ programmer, objective-C remains bloody confusing to me! I wish Apple adopted C++.
April 22nd, 2012 at 11:20
Excellent, Paul! Was easy to follow, even for a newb like me. Had to then read the comments about getting around the ARC business – which got it all working. Thanks again.
April 22nd, 2012 at 13:04
@Armando: There can be many reasons. By default, the simulators app should not crash when returning. What does the log say?
@Pete & @Kev: Thnx! =)
May 4th, 2012 at 13:37
Did the same tute a slightly different way today. Yours was clear and I got it to work ok, no probs.
June 13th, 2012 at 19:59
The spelling is horrendous, I could be barely make out what you’re trying to say in a few points (yes I speak English as a Native, first language speaker). You didn’t explain what nonatomic and retain actually do. Also, where is the code that shows the linking between the buttons and the text. Yes, you make the links with File Owner but where is that shown to the compiler? Can you change that? Compared to regular C and C++ tutorials, this didn’t help me one bit. Its easy to copy and paste code, but to know what each line is doing, and how it fits in into the source and make files means you can go to the next level. Very Disappointed.
June 14th, 2012 at 14:45
Well, I guess there is a little Sheldon in all of us. Apparently you are one of the few having problems with my spelling, too bad. However, if you have so much problems with my spelling, why did you continue reading the article?
In objective-C you do not both use GUI tools and programatically connect GUI components to the code. Either you are using IB to connect you GUI to your code, or you do it all in the code itself. If you are looking for a C or C++ way of doing Objective-C,… I recommend you look into cross-compiling. Otherwise… just suck it up and learn how to do it the right way.
Good luck!
July 2nd, 2012 at 7:01
Many thanks !
July 9th, 2012 at 7:32
Hai, I’m totally new to this Objective – C. As I din’t do any projects in my college. I don’t have a clear picture as how to learn this new lang. Can you suggest some ideas. Thank u in advance.
July 11th, 2012 at 22:18
Quick question(s), why do my iOS templates appear in black and white? and why do i not have the view-based application template? Please help
August 14th, 2012 at 9:17
@Will: I am unsure what you mean.. could you please elaborate?
August 30th, 2012 at 17:59
One Quick Question, at the start when you started coding, your Project Navigator shows files as “helloWoldViewController.h” mine still shows only as “ViewCollector.h” what am I doing wrong?
September 15th, 2012 at 19:04
Hard to say, It might be because XCode has been updated quite a lot since I wrote the tutorial.
October 27th, 2012 at 9:18
Good tutorial. Some missing dots, but I was able to connect them given time. I hope you’ll write more like this.