While I know many of iCodeBlog’s readers are veteran developers, this tutorial (and many in this series) are going to be geared towards the more novice developer. This group is often overlooked when it comes to tutorials, and my hope is to help lay a solid foundation for them (in addition to honing the skills of the veteran developers). So, let’s dig in.

Introduction

Generally, when you make a “Hello World” project, the goal is to get the text “Hello World” to display on the screen or the console. On the iPhone/iPad, there are quite a few ways to display text on the screen (labels, text areas, text views, core text, etc…). Today we are just going to focus on drawing the text using a UILabel.

There are two ways to get a UILabel to display on the screen. The first is to use Apple’s Interface Builder tool. Interface Builder is an extremely handy tool for creating iOS interfaces visually. It supports drag and drop and allows you to configure all of the properties of each of the elements. While it is a great tool, I want to show you a bit what’s happening under the hood in code. It is important not to lean on Interface Builder as a crutch when creating interfaces as there are times when you will have to add UI elements manually. That being said, I will have an intro to Interface Builder tutorial up later in this series.

Creating The Project

Before we begin make sure you have read and understand the following tutorial:

Back To Basics – Getting Set Up For iOS Development

This tutorial will ensure that you have the proper environment set up for iOS development.

When you first launch XCode, you are prompted with a screen similar to this one:

To create a new project, simply click on Create a new XCode project. This will bring up a wizard guiding you through the initial project set up.

Built into XCode are several different project templates to be used as a base for the most common projects that you might want to create. Each one comes with some specific “boiler plate” code to quickly get you up and running.

We are going to start by clicking on View-based Application. This will give us enough code to have a simple view on the screen. A UIView is the simplest of display objects. Every other UI element that you draw on the screen will inherit from UIView. In the case of a view-based application, we are given a full screen blank view to start with. We can then add display objects as subviews.

After selecting View-based Application, click next. This screen will show some simple project options such as name, company identifier, and Device family.

Here’s a bit about each:

• Name: This is simply the name of the application. Don’t worry you are not bound to this and you can easily change the display name.
• Company Identifier This is unique id used to identify your application. It will be prepended to your project name to form the unique id that the app store uses. Identifiers are usually of the form com.companyName.projectName.
• Device Family: This will be either iPhone or iPad. You can always upgrade to universal later (tutorial to come).

The Files

Once your project has been created, you will have 6 files of interest (for this tutorial’s sake):

HelloiPhoneAppDelegate.h/m

The app delegate is the point of entry for your application. It’s a singleton class (meaning there is only one), and it is responsible for displaying the main window/view of the application. You generally want to keep this class pretty lean and offload the work somewhere else. It’s often a n00b mistake to want to work on your UI/logic in the app delegate. For this project, we are not going to touch it at all. Just note that it is what’s launching your main view.

MainWindow.xib

Xib files are to be used with Interface Builders. They are basically xml files that Interface Builder uses to represent a user interface. In this case the MainWindow.xib (pronounced nib), is responsible for loading up our Window and Main ViewController (HelloiPhoneViewController). The View Controller could have been loaded programmatically in the App Delegate, however Apple has chosen to load in using a nib in Interface Builder for this template. I’m not going to go into detail about that in this tutorial, but you can see for yourself by opening up MainWindow.xib and look under objects.

HelloiPhoneViewController

iOS development tends to really enforce Model-View-Controller design patterns. This is basically the idea of separating the view code from the model code (using the controller code as the glue). Generally, in iOS when you have a view controller, it has a corresponding nib file(the view) to go along with it. HelloiPhoneViewcontroller.xib is where you would drag and drop UI elements to customize the view using the Interface Builder tool. As I mentioned in the beginning, we are going to ignore this file and add our text manually.

The Code

Well, this has been quite a bit of talk just to get us to the simple code below. Open up the file HelloiPhoneViewController.m and find the method called - (void) viewDidLoad . This method fires automatically when the view is first loaded. Make sure to uncomment it if it’s commented out. Inside of this method, add the following code:

1
2
3
4
5
6
7
8
9
10
11

- (void)viewDidLoad {
    [super viewDidLoad];
 
    CGRect frame = CGRectMake(10, 10, 300, 25);
    UILabel *helloLabel = [[UILabel alloc] initWithFrame:frame];
    helloLabel.text = @"Hello iPhone!";
    helloLabel.textColor = [UIColor blueColor];
    helloLabel.textAlignment = UITextAlignmentCenter;
    [self.view addSubview:helloLabel];
    [helloLabel release];
}

Let’s break down this code:

Line 4: This creates a frame. Think of a frame as a box. The first two parameters are the starting x and y locations of the box, and the second two are the width and height of the box. Every display object you will create has a frame. It tells the device how big and where to draw a view.

Line 5: On this line we create a new label object. The alloc says “give me the memory large enough for a UIlabel” and the init initializes all of the view properties. You will never really see these two methods called apart from each other. We call one of the copy constructors of UILabel called initWithFrame. This allows us to pass in the view’s frame on initialization.

Lines 6-8: In these 3 lines, we configure various properties of a UILabel. The first is the actual text to be displayed, the second is the color of the text, and the third tells the text to center inside of it’s frame. There are quite a few options you can set with regards to any UI element and they can be found in the documentation for that particular object.

Line 9: This is where we actually get the label to display. All views are subviews of some other view (even your main view is a subview of the window). We are basically attaching our label to the main view to be drawn. Without this line, your label would never be seen.

Line 10: I don’t want to go too much into this right now, but The iOS platform (as of iOS versions < 5) doesn’t have garbage collection. What this means is, we need to handle our memory management ourselves. That being said, as a general rule, whenever you do an “alloc init” on an object, you must have a corresponding release call to give that memory back to the system. Otherwise, you have a memory leak. More to come on this.

Running The Application

OK, now that we have the code in place it’s time to run it in the simulator. To do this, select iPhone X.X Simulator in the dropdown at the very top of XCode (currently mine says 4.3). Then click the Run button. Your code will be compiled and the simulator will start. You should now see your _beautiful Interface_.

Well, it’s not much to look at, but try reading the documentation and adding some other interface elements to the view. Or, read the documentation for UILabel and change some of the properties.

If you have any questions or comments, feel free to leave them in the comments section of this post or send them to me on Twitter.

You can download the source code for this tutorial here.

Happy iCoding!

This post is part of an iOS development series called Back To Basics. You can keep up with this series through the table of contents, RSS feed, or Twitter.

Finally, we get to write some real code! In this tutorial, I will show you how to create an interface using Interface Builder and connect it to your code. We will be creating a UITextField, UILabel, and a Button. Now, don’t be intimidated that this tutorial is so long. I have really went into detail explaining everything as I go. You could easily scan over it and get the gist of it. Here’s how the application will work:

1. The user will tap inside a text box which brings up the iPhone’s keyboard
2. The user will type their name using the keyboard
3. The user will press a button
4. The label will update with a greeting containing that user’s name (ex. “Hello Brandon!”)
5. If the user fails to enter in text, the label will say something like “Please Enter Your Name”

Prerequisites: This tutorial assumes that you have completed the following tutorials

• Hello World Tutorial Using UITableView
• Beginner Interface Builder

In this tutorial you will learn:

• Create a new View-Based application
• Create a simple user interface
• Write code to connect to an interface
• Connect the interface to the code
• Update the interface based on user interaction

Like the last tutorial I wrote, we are going to need only one view. So we will just use Apple’s View-Based Application template. So click File -> New Project. Select View-Based Application and name it ViewBased (You can name it whatever you want).

So like last time, Apple has provided us with most of the code needed to get this app up and running. You can click Build and Go to launch the simulator, but all you will see is blankness.

Let’s get started by double clicking on ViewBasedViewController.xib. This is a nib file that opens with Interface Builder. It contains information regarding the layout and controls of our view. Once you do this, Interface Builder should open up.

It will look something like the screenshot below.

A few notes about interface builder…

Library – The right-most window contains all of your controls that you can add to your view. For this tutorial we will be using a TextField, Label, and Button.

The next window to the left of that contains objects that we will connect our interface to. View represents the view of this nib file (basically the interface). File’s Owner is the object that links the interface to the code.

View - This is your user interface for your iPhone application. This window is where you will drop controls from the right-most window.

Attributes – This is where we will set the styling properties of our controls

Add a Text Field

The first thing you want to do is drag a Text Field from the library box on to your view window. You will see some blue lines to guide you. These are in place to help line up controls as well as center them.

Once you have added the Text Field to the View, move it around until it’s in a position that you are happy with. Next, stretch each side of the text box so that it spans accross almost the entire view area. (The blue lines on the right and left will let you know when to stop.)

Now we are going to set some of the attributes of the Text Field. If the Attributes Inspector doesn’t appear, click on the Text Field and then click Tools -> Attributes Inspector.

• In the Placeholder field type in Name. This is the default text that appears in the Text Field before a user types anything.
• For Capitalize select Words – This tells XCode that we want to capitalize each word
• For Return Key – Select Done. This makes the return key on the keyboard say Done rather than return.
• Also, make sure Clear When Edit Begins is checked

Add a Label

Drag a Label from the Library onto your view. Similarly, stretch it the length of your view and place it where you would like. Let’s change the default text of the label. If the Attributes Inspector doesn’t appear, click on the Label and then click Tools -> Attributes Inspector. In the Text field type in “Enter your name above” (or below depending on where you chose to put the label in relation to the Text Field.

Add a Button

Now drag a Button from the library onto your view. Stretch it and position it however you would like. Now we need to add some text to the Button. Click on the button and then click Tools -> Attributes Inspector. In the Title field, type “Display“.

We are now done creating our interface. It should look something like this:

Let’s return to our code… Close Interface Builder and go back to Xcode.

The files that link an interface to some code are called View Controllers. Let’s open up ViewBasedViewController.h. This is the file where we will declare all of our interface variables. Add the following code to you ViewBasedViewController.h.

Interface Builder uses IBOutlets and IBActions to connect to the code. Here is a brief explanation of each line of code.

• IBOutlet UITextField *textName – creates an outlet to connect to the text field we created in interface builder. We use this variable to get information from the text field.
• IBOutlet UILabel *lblHello – An outlet that connects our label on our interface to the code. This variable is used to set the value of the label.

Now that we have declared these variables, we need to make them properties. This allows us to set certain attributes that are associated with the variables. Retain tells the compiler that we will handle the memory management of this object (don’t forget to release it when you are done). Otherwise it will get “cleaned” after being instantiated.

There is one other thing here.

- (IBAction) updateText:(id) sender;

This is the function that will get called when the user presses the button that was created in Interface Builder. We are simply declaring it here in the header file. We will implement this function a little later in the tutorial. Now, we need to connect the interface to the code. Double click on ViewBasedViewController.xib again to open up Interface Builder.

1. Connect the View
   1. Click anywhere on the background of your view (anywhere that is not the Text Field, Label, or Button). Now click Tools -> Connections Inspector. Next to New Referencing Outlet, you will see a circle. Click in that circle and drag the blue line to the File’s Owner object and release it. The word view should pop up. Click on it. You have now connected the view to your proxy object. You should now see:
   2. 
2. Connect the Text Field
   1. Click on the Text Field in your View window to select it. Then click Tools -> Connections Inspector. You will now see a circle next to New Referencing Outlet. Click in that circle and drag it over to the File’s Owner object. A message will pop up with txtName. Click on txtName and the connection is made. You should now see:

   2. 

3. Connect the Label
   1. Click on the Label in your View window to select it. Then click Tools -> Connections Inspector. You will now see a circle next to New Referencing Outlet. Click in that circle and drag it over to the File’s Owner object. A message will pop up with lblHello. Click on lblHello and the connection is made. You should now see:
   2. 
4. Connect the Button
   1. Click on the Button in your View window to select it. Then click Tools -> Connections Inspector. You will now see a circle next to Touch Up Inside. This is the trigger that gets called when a user presses the button. Click in that circle and drag it over to the File’s Owner object. A message will pop up with updateText. Click on updateText and the connection is made. You should now see:
   2. 

Now all of the connections should be set up. Go ahead and close Interface Builder. We are done using it.

Open up the file ViewBasedViewController.m . This is the file where we will implement the updateText function. Add the following code…

This code is pretty straight forward and easy to follow. I will explain it line-by-line:

@synthesize txtName,lblHello;

Most of the time when creating (private) variables, you need to specify what are called “getter” and “setter” methods. Theses functions get the value of a variable and set the value of a variable. What synthesize does is creates these methods for you under the hood. Pretty handy…

Next we will implement our updateText method. I started by creating a temporary string. This is the string that we will insert into the text of the label.

The next line checks to see if the user has entered any text int the Text Field. txtName.text returns an NSString. We are simply calling the length method on a string. If the length is 0, then obviously the user has not entered any text. If this is the case, we set the temporary string to “Please enter your name”: instructing the user to enter in their name.

If the user has entered in some text, a new string is allocated. The initWithFormat method is similar to printf in C. So, I used the string “Hello %@!”. The “%@” in the string means we will be substituting it for a string. To get the value of the Text Field we again use the txtName.text property.

Finally, the value of the Label is set by calling lblHello.text. This calls the text property of label and sets the text to our temporary string variable.

The last line [text release]; releases the temporary text field from memory. This is necessary to write an efficient iPhone application. If you want to know why a lot of iPhone apps crash, it’s because the developers don’t follow through with this step.

That’s it! Click Build and Go. The application should launch in the iPhone Simulator. When you click inside the Text Field it should bring up the iPhone’s keyboard (you can also type with your keyboard). Enter in your name and click “Display”. Here are a few screens of what your app should look like.

User Clicks Display without typing in their name

User types in their name and clicks Display

Well, that concludes this tutorial. I hope that I was able to help you out on your road to iPhone glory. If you get lost at any point you can download the code to this tutorial here ViewBasedSampleCode. As always, if you have any questions or comments, be sure to leave them in the comments section of this page. Happy iCoding!