Tutorial: Creating an iOS Application

IBOutlets, IBActions, and a simple single view app

Now that we’ve discussed some of the basic principals of Objective-C and object-oriented programming, it’s time to get to the good stuff: making things that do things!

I’m just going to assume at this point that you are: 1. Using a Mac machine 2. Have Xcode installed and updated and 3. Have a basic understanding of object-oriented programming.

Start by opening up Xcode and creating a Single View Application (highlighted below):

image from “Learn iOS 8 Programming From Scratch”

Name your file however you like; just be sure the language is Objective-C and iPhone is selected under devices. Save.

I suggest taking some time to familiarize your self with Xcode before we move forward. Adjust your workspace, browse through the libraries, and run your app as is to check out the iPhone Simulator. Play for a bit.

Okay, ready? Let’s make an app! We are going to start with the ubiquitous Hello World.

First direct your attention to the project navigator. Your Xcode Single View project will have several goodies packed into it: AppDelegate. h, AppDelegate.m, ViewControlled.h, View Controller.m, main.storyboard and a few other tests, a folder for images and supporting files (which includes you main.m as well).

For now we are not going to worry about the AppDelegate.h and .m files. AppDelegate is a class that is responsible for creating a ViewController object when it notices that your app has launched. We will mostly be dealing with the ViewController and the Main.Storyboard files. ViewController is the class we will use to create views and display those view on the screen. Main.Storyboard is the view that the ViewController class is managing.

Take a look at the Main.Storyboard file. It is exactly what the name implies, a board that will hold a visual representation of the look and flow of your application. These views may contain controls that will allow the user to interact with the application. In our view controller we are going to use a button and a label.

Side note: Before we continue you are going to want to disable side classes — we don’t want to worry about that right now. You can learn how to do this here.

You can drag these objects from the object library (in the bottom right corner) directly onto the storyboard.

You can put them basically anywhere. Double tap/click into the object to change what it says. Let’s change our label to read “Hello World” and our button can say something like “Press Me”.

Now its time to actually make this thing work.

We want to make an application that will change the message of our label once the button is clicked. To do this we need to link a few things. To create the interaction we will use IBActions and IBOutlets

Let’s take a look at ViewController.h. Like other .h files its where we keep the properties and methods associated with our view. First lets declare a property for our label object.

@property (weak, nonatomic) IBOutlet UILabel *greetingLabel;

There are a few things going on here. We discussed properties, weak references and atomicity in the last post so check it out to get more information on those elements. Next we have the keyword IBOutlet. An outlet is a property of an object that references another object. This allows us to connect the label control to the code to make the label accessible within the view controller.Next we are creating a pointer to an object of of data type UILabel called *greetingLabel.

Now for the button. We will connect our button to a code block using an instance method with a return type of IBAction.

- (IBAction)buttonClicked;

IBAction, like IBOutlet, is an element of the Cocoa Touch Framework, the framework that facilitates the interaction between our screen and user. It will be doing most of the heavy lifting in the background of our app. We use IBAction to let our Interface Builder know that we want to interact with something. We want our button to change the value of *greetingLabel when the button is clicked. Our implementation file, ViewController.m looks something like this:

- (IBAction)buttonClicked {
self.greetingLabel.text = “Button Clicked!”;
}

Now we need to make the connection between our code and the objects on our story board.

Go to Main.Storyboard and hold the control key while clicking on the label. We need to update its referencing outlet to match the property we created in our ViewController.h file. Open up the files side by side by clicking on the button in the top right corner of Xcode that looks like a Venn Diagram. Split the screen with you ViewController.h and your Main.Storyboard. Now we just drag and drop. Holding the control key, drag the label to connect it with the property. Repeat for the button, except you’ll want to drag this to the method buttonClicked. You can check that the connection is made by right clicking on the element and looking at its referencing outlet.

Annnnd we’re done! Run your newly made app and admire your craftsmanship. You’re so cool ;)

If we’ve done everything right, when we click the button the label will change from “Hello World” to “Button Clicked!”. If not, reread this article or check out Simon Ng’s guide to iOS, “Learn iOS 8 Programming From Scratch”, a great resource of learning iOS.