iOS Development Tutorial Series: Hello World

By
On February 22, 2011

Although it seems very Cliché, our first iPhone app will be a Hello World program. Mostly everyone starts out programming with a Hello World exercise, so let’s not stray from the group since it seems they are doing well…

As we go through this series I will explain concepts like Objective-C (the programming language iOS apps are written in), iPhone development, and programming in general…

Lets get started!

1. Open Xcode and click “Create a new Xcode Project”
2. Select “View-Based Application” and click choose…

3.Give your app the name “HelloWorld”

When the application project opens you will be presented with a view similar to this…

If you click on the files from the classes folder you will be able to see the code in the right window. As you can see Apple gives you some pre-written code that is commented out. On that note, I’ll explain to you what a comment is… A comment is text that will not be executed by the compiler (Xcode). A comment that is just one line will with start with a “//” and a comment that is more than one line long is started with a “/*” and ended with a “*/”… Comments come in very useful when developing programs. You can use comments to document code for later viewing or to document code for other developers.

Before we start writing our first app I need introduce and explain a few concepts, OOP (Object Oriented Programming), MVC (Modal View Controller), and “.h” and “.m” files. Let me take a shot at explaining OOP to you… The Object in Object Oriented Programming is basically two files of code (.h and .m) that work together so that a developer can call that code in their own programs. This provides a massive framework for developers so that they don’t have to start completely from scratch. If you are having troubles understanding the object oriented programming concept you can ask me questions by emailing me at [email protected].

Now lets start with the “.h” and “.m” files. Open up the “HelloWorldViewController.h” file by single clicking on the file. As you can see, the code is displayed in the window to the right. A “.h” (header) file is a basically a blue print to an object and a “.m” (implementation file) is where all the code is implemented and executed from. If you don’t understand this concept yet, that’s ok, we will come back to it…

MVC (Model View Controller) is something that is used when developing apps for iOS and Mac OS X. It is something that splits up the code and the actual interface that the user sees. Model, is the users data and the data you display to the user, View is what the user interfaces with and a controller is your code that manages the link between the view and the model. This concept may seem edgy now, but it will grow on you very quickly and makes the life of a programmer much easier and organized.

Lets get coding!

In the header file, “HelloWorldViewController.h”, we are going to declare an IBOutlet. An IBOutlet is what connects your code to a visual object, such as a label or a button.

3. Between the curly braces type “IBOutlet UILabel *label;” and outside the curly braces type “-(IBAction)button;”

An IBAction is a method (block of code) that can be called. An IBAction is recognized by the view and allows you to connect that specific method (block of code) to a UI item, such as a button so that the button will execute that block of code.

That’s all we need to do in the header file… Now lets start designing the interface.

4. Open the folder named “Resources” and double click the file named “HelloWorldViewController.xib”

This will bring up a window similar to this:

This is the program you use to design your user interface. On the left you are given a list of objects that you can use in your user interface, to the right of that you are given the window where you put the objects to design the interface, the next window isn’t important right now, and the next window is called the inspector and is the window where you can change all the attributes of nearly everything in your UI.

Lets start designing!

5. From the left window, drag a label onto your view.


6. Now that you have your label on your view, resize the label using the blue lines as a guide.


7. Now center the text in the label using the button in the inspector window:

8. Clear the text from the label using the textfield in the inspector window named “Text”

 


9. Now lets put a button on our view and give it a name using the same methods that we just used to put a label on our view.

We are done designing the view, but the code we are about to write has no idea when to be called. We must add a link between the code and the UI element.

10. Select “Files Owner” from the main view and then click the connections tab on the Inspector window.

On the Inspector window, you can see the IBOutlet and IBAction you defined earlier.

11. Click on the plus button next to the label definition and drag it onto the label on the view.

12. Now drag the plus button next to the “button” definition on to the button in the view. A window will popup asking you when you want to perform this action… You can perform the action when the user touches the button and then lets up, touches the button, double taps the button, and a whole bunch of other things. We are going to use “Touch up Inside”, so select it.

13. Click File>Save or Command+S on your keyboard.

We now have our interface designed and our outlet and action linked up to our view. We can now start writing code.

14. Go the the “HelloWorldViewController.m” file (implementation file), this is where all the work gets done and is the place you write your code.

We are going to need to implement the IBAction we define earlier in our header file and give it some code.

15. Under the “@Implementation” line type:

-(IBAction)button {

}

This is called a method, and it is what’s called when the user presses the button (because we linked this IBAction to the button in interface builder).

This method is kinda boring, don’t you think? It doesn’t do anything…. Lets give it some life!

16. In the new method, type:

“label.text = @”Hello World!”;”

This line of code is assigning the text “Hello World!” to the label that we attached to our IBOutlet definition.

We are done!

17. Click File>Save or Command+S on your keyboard so that you don’t lose your progress.

18. Now you can click Build and Run at the top of the window to run your application in the simulator.

If you followed the instructions correctly you application should build and start up in the simulator with no errors or warnings.

You should see something like this:

If your app didn’t start up correctly or gave you errors, feel free to ask any question so that the community or I can help you.

We have learned a lot in this tutorial, hopefully I have explained everything well enough for you to understand…

Some key items you need to understand before moving on to the next tutorial are, the concepts of MVC and OOP. If you felt I didn’t explain these concepts very well you can leave a comment below or email me if you are needing help understanding them.

That’s it for this tutorial! You’ve now created your first iOS app, that wasn’t so bad, was it?

Keep an eye for the next tutorial!