Hello World iPhone App Recap

Updated Oct 3 2013: This tutorial is compatible with XCode 5 AND XCode 4!

We’re taking a practical approach to learning iOS programming. This means lots of hands on work and practice!
In order to benefit the most from these lessons, you should open XCode and try to follow along.

This is part 5 of the lesson plan. Click here for the entire Learning Plan.

In the practice #1, we created a basic Hello World application by adding a UILabel through Interface Builder.

In this recap, we’re going to review some of the concepts we learned in the previous tutorial and take a look at how it pertains to this demo.

We’re also going to see how the ViewController object keeps track of and manages the view. We’re also going to introduce a different way of adding UI Elements to the view aside from using Interface Builder.

Hello World App Flow

We learned that the app starts through the AppDelegate.

Hello World App Flow

Keeping Track of Objects

In the previous tutorial we talked about how objects that are created reside in memory.

Well Main.storyboard file is a special XML file that is interpreted by XCode and then view objects are created from it using what you’ve specified through Interface Builder. These view objects also resides in memory.

Since the ViewController class manages the view, it must have some way of referencing the view when it needs to do something with it, right?

Yes! The ViewController object has a view property that “references” the view object. In other words, the ViewController object’s view property points to the location of the view object in memory. So when the ViewController object needs to do something with the view object, it can follow the view property and find where the view is in memory.

Adding More UIElements to Your View

Now that you know we can access the view from within the ViewController object through its view property, let’s try adding another UILabel to the view but this time, let’s do it through code!

Click on the implementation file for ViewController (that’s the ViewController.m file if you can remember!).

You’ll see a lot of code in the editor area. I want you to look for a section called “viewDidLoad” that looks like this:

This is called a method! The code in between the curly braces “{}” will be executed when the view has been loaded. (Note: above the term ‘nib’ is the old name for what is now ‘xib’).

Since this code will be executed after the view is loaded, it would be the perfect place for us to try to add more UIElements to the view. If we try to do this before the view has loaded, nothing would happen or it would crash in the worst case.

Now in this method, I want you to type in the following:

I’ll explain how we created a label object later in the tutorial but now, I want you to notice line 13.
Notice that we’re accessing the view property of “self”. Self is a special keyword that refers to this object. In this case, self would refer to the ViewController instance. So to sum it up, self.view is accessing the view property of this ViewController object.

Then we’re calling a method named “addSubview” in the view. Much how we’re writing code in the “viewDidLoad” method of the ViewController class, the view class also has a method named “addSubview” that will execute some code when we call it. The “addSubview” method has code that will take a UIElement you pass it and it will add it to the view.

We’re passing in the UILabel element that we created in the lines above and passing it into the “addSubview” method of the view so it can add it to the view.

Now click on the Run button to launch your app in the iPhone simulator.
You should see something like this!

Hello World App - Adding another uilabel

Creating Objects

In this tutorial, we’ve seen two places already where we’re creating objects from classes.

First, we saw the AppDelegate create a new instance of the ViewController class.
Secondly, we created a new UILabel object earlier in this article to add to the view.

Let’s take a look at how to create new instances of classes! (remember, these instances of classes are otherwise known as objects)

Here’s the code to create a new instance of a class:

The “alloc” keyword above is allocating space in memory for this object and the “init” keyword is calling the “init” method of the newly created object. Usually there’s code in the init method to initialize the object (do any setup to prepare the object for use).

When we created a new UILabel earlier in this tutorial, we wrote:

The “initWithFrame” method is another initialization method but this one takes in some coordinates to tell it where to place the label on the screen. It’s just saying “Hey, initialize this particular UILabel object with a frame with these coordinates!”. The first two numbers are the x-coordinate and y-coordinates and the last two numbers are the width and height.

Recap of the Recap

Let’s do a recap!

We explored how the app flows from one end to the other in our Hello World demo.

We introduced to the concept of Properties and how one object keeps track of another using properties.

We learned how to programmatically create and add additional UIElements to the ViewController’s view.

We learned how we can create instances of classes called objects.

Click here to go to the next lesson now!

Frequently Asked Questions

If you have a question related to this tutorial or need me to clarify something, please ask in the comments below and I’ll update this FAQ section for everyone’s benefit.