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

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

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

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

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

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

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:

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.

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:

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

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

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

Pic.9

Now, your XCode should look something like:

Pic.10

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

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

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 icon (Command key) + Shift icon (Shift key) + =
When you have done that your view should look something like this:

Pic.13

Pic.13

Now… lets save it. Just press Command key icon (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

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

Pic.16

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

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

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

Flattr this

Best regards,

Paul Peelen

Posted in Apple, Development, Objective-c, Okategoriserade, OSX, XCode Tagged with: , , , , , , , , , , ,
177 comments on “Programming Objective-C in XCode 4 – iPhone iOS 4.3 Hello, World! tutorial
  1. Paul Peelen says:

    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

  2. Paul Peelen says:

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

  3. Paul Peelen says:

    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+

  4. Antonia Seegers says:

    Really like your layout. Some uselful content too ;)

  5. sangram says:

    thanks a lot……………….

  6. Dan says:

    Didn’t quite match what I see in XCode 4.2, but helpful nonetheless.

  7. Billy Kimble says:

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

  8. ramdak says:

    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)

  9. Paul Peelen says:

    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.

  10. Salinda says:

    Nice concise but informative one, Thank you very much!

  11. Armando says:

    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.

  12. Pete says:

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

  13. Kev says:

    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.

  14. Paul Peelen says:

    @Armando: There can be many reasons. By default, the simulators app should not crash when returning. What does the log say?

    @Pete & @Kev: Thnx! =)

  15. @wlonline says:

    Did the same tute a slightly different way today. Yours was clear and I got it to work ok, no probs.

  16. Danny says:

    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.

  17. Paul Peelen says:

    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!

  18. Totara says:

    Many thanks !

  19. Cathi says:

    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.

  20. will says:

    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

  21. Paul Peelen says:

    @Will: I am unsure what you mean.. could you please elaborate?

  22. GouthamP says:

    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?

  23. Paul Peelen says:

    Hard to say, It might be because XCode has been updated quite a lot since I wrote the tutorial.

  24. Dan says:

    Good tutorial. Some missing dots, but I was able to connect them given time. I hope you’ll write more like this.

  25. Hitesh Kumar Singh says:

    hi, very nice and simple tutorial… keep posting article like this… it’s been just 2 days to my iphone development career and i was able to build my first app with the help of your article. many many thanks :)

  26. Parks Daniel says:

    Well-written article you shared here. Information which you wrote in this post, its very easy to understand and helpful. Share another informative post like this. Thank you.

  27. chameleon says:

    Thank You
    Nice Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

 

Categories