Programming Objective-C in XCode – iPhone iOS 4 Hello, World! tutorial

Hi,

Some people have been asking me for a new Hello World tutorial since my last one got a bit outdated. So, now I finally got some time over and thought to write you one.
Well, lets dive in into it directly.

Xcode 4?

If you are looking for an XCode 4 tutorial, please have a look here: http://paulpeelen.com/2011/03/17/xcode-4-ios-4-3-hello-world/

Requirements

Well, besides a intel mac you will need to download and install XCode on your mac. I expect this to be done.
This tutorial covers a basic hello world with a button, a background and a label to show some text. It does not cover how to get it to your device, it just lets you run it in the simulator. Maybe later I will be able to write a description on how to publish your application to your device.

If you do not have XCode installed please download it at http://developer.apple.com/ios

The tutorial

Lets start, shall we? Lets start off with launching XCode. When XCode is launched, you will see a welcome screen.
In this welcome screen, choose “Create a new Xcode project” (Pic 1). In the next page, choose in the “iOS > Application” menu “View-based Application” (Pic 2).

Pic 1

(Pic 1) Open Xcode

Pic 2

(Pic 2) View-based Application

Now, in the next view call your application “HelloWorldIOS4” and press save (Pic 3). Xcode will now create a iOS View-based Application for you. When you have done this, you will see the project view (Pic 4).

Pic 3

(Pic 3) Save project

Pic 4

(Pic 4) Project view

In this view you will see all the files this projects contains. Among these files you will find a file called “HelloWorldIOS4ViewController.xib”. This is the actual GUI the app loads when it starts. This file is found under the directory “Resources”.

We will start with opening the file “HelloWorldIOS4ViewController.xib” thus launching the “Interface Builder”. The Interface Builder is an application made for designing your application.
When the IB (Interface Builder) is launched it will look like this:

Pic 5

(Pic 5) Launching IB

Here you have 4 windows. To the right you have your library containing all kind of objects you can pull in into your view. To the left you have your view, this is the view that is loaded by you “MainWindow.xib” view. At the bottom left you have your document window, this windows shows you the contents of the view, the owner of the view and any delegate classes you might have. The middle view (In this case “Attributes”) shows you information about a certain object chosen in your document view. It also lets you set certain information, but we will come to that later.

Now, we are going to change this view and add a background, label and button. Lets start off with the background. But before we can add this into the IB we need to download one and add it to our project.

First off we are going to import the background into the project which we can add later to the GUI. I downloaded this background from www.iPhone-wallpapers.org :
http://www.iphone-wallpapers.org/stripes_i73.html

Download any wallpaper with the size 320×480 pixels. Save it in the root directory of your project. When saved, rename you background to “default”. Now drag your background into the project directly beneath the “Resources” Directory.

A window will popup and asking you to define some stuff… ignore it and just click “Add”.

So, lets go back to the IB and add our background.

To make this a bit easier… I filmed it, Mov 1.

Now, before we go back to IB to add the background… lets write some code.

Coding

Open the file called “HelloWorldIOS4ViewController.h” which you find under the group “Classes” to the left.

In here you will have to add the following right beneath “@interface HelloWorldIOS4ViewController : UIViewController {”

Now right beneath the }, add the following:

What you did is you added a label and button and told that those are IBOutlets (Interface Builder outlets). Also you added the IBAction “buttonPressed” which we are going to call when the user presses the button.

Now switch to “HelloWorldIOS4ViewController.m” and add the following right beneath “@implementation HelloWorldIOS4ViewController”:

What we did here is let Xcode create getters and setters for us using @synthesize, which we need to do because we added properties for them in the header file. We also implemented the functionality of the “buttonPressed” class. What we did there was we told our label to set its text to “Hello, World!” when the action is activated.

GUI design

Now I think it is time to add some GUI to the project. Lets finally add the background we downloaded. In case you closed IB, open the file “HelloWorldIOS4ViewController.xib” once again. This file is located underneath the group “Resources”.

With IB opened, make sure your view is open. In the Document view double click on “view”. The iphone-like window with the gray background.
Lets start off with adding our background.

What you do is you select “Image View” (Pic 6) in the library (remember, the one to the right in Pic 5?) Now drag it from the library onto your view. When entering the view it should automaticly resize to the size of the view. Position it and drop it.

Pic 6

(Pic 6) Adding Image View

Now with your image view selected, select the attributes pane (⌘+1, or Tools > Inspector). You are now in the inspector view (Pic 7). Here you can define which image should be shown. At the “image” dropdown-menu, choose “Default.jpg”. You will now see that the background of your view changed.

Pic 7

(Pic 7) Adding Default.jpg

Great, now lets do the same thing for a button and for a label. In your Library find a “Label” and drag it into your view. Position it and then drag a “Round Rect Button”. Position your button and double click it. You can now add some text to the button.

Using the inspector you can set colors and text types for both the label and the button. I changed the color of my label to white so you can see it better.
Now what we need to do is link the button and the label to the appropriate code assignments. Lets do that now.

Open your document window (⌘+0, or Window > Document). Now right click on “File’s owner”. Now you will see a little black window popping up (Pic 8) with some stuff in it. Don’t worry, you don’t need to know everything there… but I think you might recognize “myLabel” and “myButton”. Thats right, those we created in the code.

Pic 8

(Pic 8) The black popup window

Now to the right you see small circles. Click on the one for “myButton” and with your mouse button pressed down, drag it to your button. You will see a highlighting around your button. Now drop the blue line there and you see that the circle now is filled and a reference is made (Pic 9). Do the same thing for your “myLabel” (Pic 10).

Pic 9

(Pic 9) Assign button

Pic 10

(Pic 10) Assign label

Now your document window should look like Pic 11:

Pic 11

(Pic 11) Document window

Yeey, we are almost there. Now we only need to assign what happens when the button is pressed. To do this, right click on your button (either in your view or in the document window). Now a black window with other stuff pops up. Do the same thing here, drag from “Touch up inside” to your document window’s “File’s owner” (Pic 12). A black box at “File’s owner” will popup with the text “buttonPressed:”. Select that one.

What you just did is you put the “Touch up inside” action of your buttons to the action you created in your code.

Now you should be done. Save your IB file and close the Interface Builder. Now return to Xcode and press the button “Build and Go” (⌘+y). When your hello world application launches in your iPhone Simulator press the button and see that the label changes text.

You can download my project here if you experienced any problem. Otherwise, drop me a comment and I’ll help you out.

BUT… don’t forget to DIGG this post. Thanks!

HelloWorldIOS4

Posted in Apple, Development, OSX, XCode Tagged with: , , , , , , , ,
53 comments on “Programming Objective-C in XCode – iPhone iOS 4 Hello, World! tutorial
  1. amir,who said the 2 later message says:

    hi paul.
    I expected you to answer me!
    Please Guide me and say something about my questions! Please.

  2. Paul Peelen says:

    @Amir Sorry mate, I must have missed it. Well, I can’t really help you with PC related solutions since I have a mac. BUT I have heard about something called “Mono touch”, you should google for that.

    If you do want to run XCode (which I recommend) you need at least OSX. You could try hackingtosh, but there as well, I have no experience with that. As you described, xCode is 4.3gb.

    If you want to learn more about iOS development you could have a look at Stanfords University podcasts. They are really good.

    To answer your sales question:
    You can only sell apps on the iTunes App Store having a development contract with Apple ($99 /year I believe). Otherwise you could try to sell using Cydia or similar, but I have no experience with that.
    If you build good apps, the $99 is only a question on how fast you can get 99 sales. With a good app you get that in less than a week.

    Good luck!
    Cheers,
    Paul

  3. Ali Alshouse says:

    great site!! You should start many more. I love all the info provided. I will stay tuned.

Leave a Reply

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

*

 

Categories