Programming Objective-C in XCode – iPhone 2.2.1 Hello World tutorial

Well, here it goes… my first iPhone hello world toturial.

I am a newby to most of this stuff so I might not be able to explain it all with the best way… but I’ll give it a try. You can download the source code as well… see the attachments.

Some info before we begin:
– This tutorial is made on a mac, I don’t know if iPhone apps can be developed on other machines as well… and I don’t really care. a Mac is the sh*t for me.
– I assume that you have XCode 3.1.2 (or later) installed on your machine
– I assume that you have the iPhone 2.2.1 SDK installed on your machine (XCode)

Well, lets start shall we?

First off, lets start will launching XCode and create a new project (File > New Project). Choose under iPhone OS > Application, "Window-Based Application".

Choose Window-Based Application

When you have saved the location of your project, you will see the following view:

The main project view

In this view you will see all the files this projects contains. Among these files you will find a file called "MainWindow.xib". This is the actual GUI the app loads. This file is found under the directory "resources".

We will start with opening the file "MainWindow.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:

The interface builder

I put the windows a bit more next to eachother so show everything. The actual design of your app is the window called "Window". You can see the status bar in here as well.

On the right you can see the "Library", this contains all the stuff you can put into you app… like buttons, UIViews ect.

In this tutorial we are going to add an "UILabel", a button and a background image.ร‚ย  but hold your horses… we are not there yet.

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

Saved place

Now drag your background into the project directly beneath the "HelloWorld" on the top.

Drag into the project

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

First off we need to add an view. The view is (as I understand it) the thingy sending and recieving the action from the code and the GUI. The middle layer if you will. Type in the search field in you library "UIView" and you will the UIView.

The library UIView

Now drag this UIView directly under your "Window" in the "Document Window" (the window containing "File’s Owner", "First Responder" ect.)

The document window

With the UIView added we can add our background image. In the library, search for "UIIMageView" and drag it right beneath the "view" in your document window.

The UIImageView

Now we need to define which image is to be shown in this "UIImageView". To do this, choose the "Attributes inspector" (Tools > Attributes Inspector) or click the Attributes Inspector button in the Inspector view.

In this view you will see the an dropdown menu with "Image" infront of it. Your default.jpg/png should show up here… choose it and you will see that the "Window" changes to your background.

Image is set as background

Now we are readdy for the next step… adding the label and an button.

First up we are going to add the outlets and class actions, which we do in the identity inspector. Start with selecting the "view" in the Document Window.
Now select the "Identity Inspector" from the tools menu or click the Identity Inspector icon.

Here we need to change some things. First off, write in the "Class" dropdown menu the following: "MainView" (without " ofcourse) followed by pressing ENTER. You’ll see that the name of the inspector windows changes from "View Identity" to "Main View Identity".

Now below, under Class Actions press the + button and write "showText" (again, without " ofcourse) as the action. Leave the type as it is (to "id" that is).

Below "Class Actions" you’ll find "Class Outlets". Here we will add something as well. Press the + here as well and add "mainText" as action and change the "id" to "UILabel" (Again, without ").

Now your inspector should look like this:

MainView Identity

Now we can add and drag in the items needed. In the library search for "UIButton" and drag it directly into your "Window" on top of your background we added earlier. Place it just where you want it to be shown.

Add the button

Now double click on your newly added button until you can write text in it. Now write the text you would like to show here… I wrote "Touch me Baby!".

Touch me Baby!

Now lets add the label which should show "Hello world!" when we press the button. In your Library, search for UILabel and drag it into your "Window". Same rules here as for the button, add it where you want to show the text. After you added it you can drag it out to the sides of the Window. Blue lines will guide you to recommend you.

Set the label size

the Label is quite hard to see now, so we want to change the colors of the label and maybe center the text. For that we need to select the label and go to Attributes Inspector (The Attributes Inspector). Here you can choose the default text, set the layout to "center alignment" and change the color to white (or another color if you prefer that).

Changing the label settings

Now we got somewhere, and we are almost done with the Interface Builder. What we have left to do is combine the GUI with the class MainView.

Lets start with the UIButton. In the DocumentWindow, click the "Rounded Rect Button". Now hold down CTRL key and drag it to "Main View". Now an black window will show up with the text "showText". Choose "showText".

showText action

If you choose "Connection Inspector" (tools > Connection Inspector) you will see that the "Touch Up Inside" is bound with "Main View – ShowText".

Connection Inspector

Now lets take care of the label.

In your Document Window, select the "Main View". Now hold down the CTRL key again and drag a line to "Label". A new black box will show up with the text "mainText". Click this and you’re done there.

mainText select

So, now we don’t need to do more changes to the GUI. Now we are going to write the classes. First off, save your changes in the interface builder (File > Save). Now in your Document Window, select "Main View".

Main View selected

With "Main View" selected, go to the File menu and choose "Write class files".

Write class files

A window pops up with the HelloWorld project selected. Make sure the "Create ‘.h’ file" is checked and click save.

Now another window pops upp. In this window you can choose to add the files to the project, click "Don’t add" here, we will add them ourself.

Now we are done with the interface builder. You can now quit the interface builder and return to XCode.

Back in XCode, right click in the folder "Classes", choose "Add > Existsing Files".

Add files

Now select the MainView.m and the MainView.h file, and click Add

Add files

In the next window, leave everything as it is and just click "Add".

Add files - last window

Now the file are added to the project. Now we need to write som code. Click on header file "MainView.h", that is where we start.

A few lines down from the top, you will find the following line:

Change this to:

Because we need to be able to use the property mainText in the .m file, we need to set this property. Add the following right after the }

Now in the MianView.m file you can add the following in the function -(IBAction)ShowText {:

Now we are all done. The GUI is set, the code is implemented… it all should work now.

So now we are going to test our application. In XCode you can either test it in the iPhone Simulator or directly on your device. To test it on your device you need to download and install the certificates which you can only do if you buy an subscription (see http://developer.apple.com/iPhone) for more details.

We are going to test it in the iPhone Simulator. Select the "Simulator 2.2.1 | Debug" in the dropdown menu in the top left corner in XCode and click "Build and Go".

Select device

Now the iPhone simulator starts and you application should launch directly. Press the button and see if the "Hello world!" text is shown in the label. If it is shown, congratulations! You just wrote your first iPhone application.

If you like this tutorial and/or if you managed to write your iPhone app now, please digg it to help others find it as well.

Download my source here:

[attachments docid=227]

Best regards,
Paul Peelen

Posted in Cocoa, Development, iPhone, Mac, Okategoriserade, Stare, XCode Tagged with: , , , ,
14 comments on “Programming Objective-C in XCode – iPhone 2.2.1 Hello World tutorial
  1. Wim Rozendaal says:

    Thanx for the cool tutorial! I am very eager to write an iPhone application but have to learn objective-c first.. So this is a nice first step!

  2. Paul Peelen says:

    Thanks for your input!
    If I may, I can recommend a really good book as well… the ISBN is 978-1-4302-1626-1. The book is called “Beginning iPhone Development – Exploring the iPhone SDK”.
    The book covers a large part of the basic iPhone development from switching between view to using the GPS and accellerators.

    Nice that you like me tutorial. (Bedankt! ๐Ÿ˜‰ )

  3. Steadham says:

    Nice way that you present your ideas. You have a well set out blog and I will check back again. Thank you.

  4. Auxier says:

    Good info, its just what I was searching for.

    Jason

  5. Brent says:

    Paul – just wondering, about 1/3 of the way into the article when you rename to “MainView” before writing class files – what happens if you leave the name its default instead (which is “UIVIew”)?

    I see other people doing this MainView renaming in other tutorials but just don’t understand why the SDK defaults to UIView.

    Thanks,
    Brent

  6. Paul Peelen says:

    This is because the view is called a “UIView” and its standard class is called “UIView”.
    The reason that we rename the class is becuase we want to add functions and properties. The class “MainView” will still be a part of UIView. (see MainView.h interface declreration).

    I hope that answered you question.

    Regards,
    Paul Peelen

  7. Jeremy says:

    Hi Paul

    I followed your tutorial step by step… but for the life of me can’t get to set the type to “UILabel” in the class outlets when creating the mainText. The type is locked and defaults to “id”. I click on it.. try typing.. no difference. As a result… following all the steps… I am not able to compile.

    Any ideas? Very new to this. Expert on Dot Net and SQL… but this thing has me confused.

  8. Paul Peelen says:

    Hi Jeremy,

    You can fixed this two ways.
    1) You need to double click on the “id” to be able to set it to UILabel
    2) When you have your classes compiled to .m and .h files, edit the .h file and change it there to UILabel. Your .h file will look like:

    [...]
    @interface MainView : UIView {
    IBOutlet UILabel *mainText;
    }

    @property (nonatomic, retain) UILabel *mainText;
    [...]

    I hope this helps.

    Regards,
    Paul Peelen

  9. glaz.sasha says:

    The best “HelloWorld” tutorial that I’ve found. Thanks a lot!

  10. Paul Peelen says:

    Thanks ๐Ÿ™‚

  11. derick says:

    Hi Paul

    In the step where you change the class name to MainView I don’t have the Class Actions or Class Outlets part. Where can I add this if it is not displayed in the window like your screenshot.
    I am using Xcode 3.2.3.

    Thanks Derick

  12. jennifer says:

    hi. i was following ur tutorial aswell and it didnt work until i read ur commenct about uilabel instead of “id” in the .h-file. before this it complined about “text” not being a part of “mainText” and that i had to syntesize it. aka, it didnt work at all. but now it does, when i changed the “id” to a “UIlabel ptr” as u said. why didnt it work to start with?

  13. Ann says:

    What a great article! No idea how you managed to write this report..itโ€™d take me days. Well worth it though, Iโ€™d suspect. Have you considered selling advertising space on your website?

Leave a Reply

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

*

 

Categories