Getting Started with IOS – Binding User Interface and Controller

June 18th, 2011  | Tags: , , , , ,

If you want to build Iphone,IPad or IPod touch applications, this can be a start pointing for you.
I’m gonna write a series of posts about IOS as long as I am studying this platform. For a complete material, take a look at the apple’s developer area.
In this first post, I’m gonna show you how to get started with IOS, such as: showing the pre-requirements, downloading the tools and finally a simple example binding the User Interface (UI) and the controller (Object-c classes).

Pre Requirement

First of all, if you wanna build applications using IOS, you MUST have a MAC computer.
For coding and designing, we’re gonna use the following tools: Xcode for coding and Interface Builder for designing. Basically you can choices either Xcode 3.2.6 for free or Xcode 4.0 Free for Mac Developer or purchase it from AppStore. In both, one single download will get Xcode and Interface Builder (Xcode 4 brings Interface Builder integrated within Xcode). In this topic, I’m gonna use version 3.2.6.
Real Iphone, Ipad or IPod touch is not required, because Xcode has an emulator inside it. Furthermore, if you want to deploy your application on a real device, you must become a Mac Developer, otherwise you will test your application only on the emulator.

Concepts

IOS uses object-c as programming language. It is an OO language, but its structure looks weird for whom comes from another OO language such Java. Also, Object-C has some features similar to C and C++, such as: pointer, memory management and so on.
By default, IOS uses the Cocoa Touch Framework. It’s obvious that all my posts are gonna talk just about this framework.
IOS programming is based on MVC pattern (model – view – controller). If you have no idea what it is, please, google it.

Creating a new project

Click on Xcode icon to launch Xcode. Yo’re gonna see a splash screen like below:

Choose the “Create a new Xcode Project”. On the next screen, choose “View Based Application” and click on Choose button. For this example, I have chosen the name “Class1″ as project name.
After these steps, the Xcode will be opened and some default files created. Image below show up the Xcode interface and the project files.

For this post, we’re gonna work on in the following files: Class1ViewController.h, Class1ViewController.m and Class1ViewController.xib. Class1 is the name of my project, because of this Xcode has created the classes using this Class1* nomenclature.

Editing the interface and implementations

When you start a new application, you can start by different parts of the software. Someone prefer starting by the model, other by designing and so on. Usually I like starting by model, but for this example I’ll start by designing the UI. Thus, the first task to do is to create the objects within the Controller that will represent the UI widgets.
Our first application is gonna be really simple. There will be one TextField where the user can put his name, a button to submit an action and a label that will print the name of the user. So, let’s get started it.

Open up the Class1ViewController.h file. It is the interface file. Write the following lines of code.

#import 
 
@interface Class1ViewController : UIViewController {
	IBOutlet UITextField *fieldName;
	IBOutlet UILabel *displayName;
}
-(IBAction) submitPressed;
@end

Different from other languages, such as Java, the interface is the unique local where you can define your instance variables (inside the { }). Everything out from { } are method signature. We’re gonna talk about interface, classes, methods and attribute in another post.
In the code above, the important is to see that we have two instance variables that represent a TextField and Label from User Interface. Furthermore, there is a method called submitPressed. Note: both attributes uses pointer as well as all objects in Object-C must use too.
What about IBOutlet and IBAction? Both are empty object that Interface Build can recognize them. Without this objects, would be impossible to binding the UI widget with our controller.

Building Interface

Before implement the controller (we just coded the controller’s interface), let’s draw our interface using Interface Builder. To do that, double click on Class1Controller.xib file. Interface Builder will be launched.

As you can see, some windows are opened. The Library window contains the UI widgets. The View window is the place where you are gonna draw the interface. Class1ViewController.xib window is where the bind occurs, as well as the View Attributes window is where you can change the UI widget behavior.
Let’s create a screen using only the UITextField, UILabel and UIButton. Look at the image below:

As I said, really simple.

Binding the UI widgets and the Controller’s object

This section is the main goal of the post. If you are familiar with Android, you’re gonna see that IOS is simpler than Android for binding.
First, on Class1ViewController.xib window, click and hold the “File’s Owner” icon, hold Control button and go to the UITextField widget. A blue arrow will appear. When you release the mouse and control button, a pop-up will appear with the available options for binding. Choose the attribute “fieldName”.
Repeat the process for the UILabel “Your name is” and binding it to the attribute “displayName”.

We do not have a attribute for the Submit button, however we have a method signature. Thus, we binding a button with its action, in this case, a method.
Simply repeat the process, however clicking first in the button Submit and then go to the File’s owner.

After that, the binding between the UI and the Controller is done.

Implementing the Controller

Now it is time to implement our controller. Open up the Class1ViewController.h file and implement the method “submitPressed” like code below:

#import "Class1ViewController.h"
 
@implementation Class1ViewController
-(IBAction) submitPressed
{
	//Get the text from UIText
	NSString *yourName = [fieldName text];
	//Prepare a static phrase
	NSString *staticPhrase = @"Your name is: ";
	//Put the staticPrase + yourName in the UILabel content
	[displayName setText:[staticPhrase stringByAppendingString:yourName]];
}
@end

It is not the goal of this topic explain how object-c works, however let’s take a look at the code above.
First, only the method implementation is inside the class. As I said earlier, the attributes/instance variables stay in the interface.
NSString is the String type used in the Cocoa Touch Framework. Also, as I said, all objects use pointer.
The messages are send out through brackets ([ ]) in a object. It looks weird, but I promise, you will get used to it.
Finally, the NSString API has a lot of useful methods. Different from other languages that uses the plus sign to concatenate two strings, NSString has a method called “stringByAppendingString”. If you want to create real applications for IPhone, Ipad or Ipod touch, you MUST take a deep look at the NSString API.

Running the application

Make sure you’re using the proper emulator. For this example, we’re using IPhone. Look at the right up corner of XCode.

After that, click on “Build and Run” button and the emulator will launch. It looks a Iphone device with its features. Now, you can test your first application.

Conclusion

The major goal of this topic is to present you how to get started in IOS development. After read this topic, you will be able to create a new IPhone,Ipad,Ipod Touch application, create a simple UI and binding the widgets to the controller.
In the next post, I’ll talk more about object-c, such as: interface, class, method, attributes, messages and so on.

If you have any question, fell free to leave your comment below. I hope this topic be useful for anyone.

  1. Roberto
    October 27th, 2011 at 22:00
    #1

    Great post!

TOP