I’m pretty new to Objective-C, and coming from a purely scripting background (PHP, Javascript, etc.).

I’ve been finding it rather difficult to figure out the relationship between Interface Builder and X-Code.

Previously, I’ve been able to do some more complex functions within X-Code but whenever I hit Interface Builder to sort out my GUI, the code linking the two always trips me up.

Here’s a guide on what I’ve come up with.

Building Your Interface

When you create a new project in X-Code open the Resources folder in the Groups & Files panel.

You should see one or more xib files (this depends entirely on your type of project – Window based applications should have just MainWindow.xib, others will have AppNameViewController.xib and possible some others).
Double click on one of these to launch Interface Builder.

Drag the Rounded Rect Button from the Library and drop it onto the view.

Place a Rounded Rect Button onto the View

I’ve added the title of Button into the screenshot above, but this normally starts with no text at all.
Save this.

Starting the Coding

Open the Header File for your view (.h) and add the below code:

#import ;
@interface UntitledViewController : UIViewController {
IBOutlet UIButton *buttonName;
}
@property (nonatomic, retain) UIButton *buttonName
@end

#import ;

@interface UntitledViewController : UIViewController {

IBOutlet UIButton *buttonName;

}

@property (nonatomic, retain) UIButton *buttonName

@end

Let’s go over this. IBOutlet creates a connection to Interface Builder via an Outlet. In this case the outlet is a UIButton class with the name buttonName.

Outside the interface declaration you can see the @property declaration. This sets up the variable buttonName so it can be used in the code.

Without this, the IBOutlet cannot be accessed.

The next part is to add the below code to the implementation file (.m):

#import "UntitledViewController.h"

@implementation UntitledViewController

@synthesize buttonName;

#import "UntitledViewController.h"

@implementation UntitledViewController

@synthesize buttonName;

The @synthesize declaration mirrors the @property method in the header and is used to allow the variable buttonName to be referenced.

Back to Interface Builder

At the moment we have linked a variable called buttonName to interface builder and X-Code; but it’s just a variable. It’s not referencing a specific object on the Interface Builder view. If you had 100 buttons, how would it know which variable is referring to which instance?

Now we can jump back over to our Interface Builder project. In the Interface Builder project panel (headed by the name of your xib). Ctrl+Click on the File’s Owner. Here you should see your button name that you created with the IBOutlet command.

Right Click on Files Owner

Click the Circle Icon next to buttonName and drag over to your button:

Drag the buttonName over to your Rounded Rect Button

Now Save.

Whenever you reference buttonName in the implementation file X-Code knows you are talking to a specific button and directs you to the button that you’ve chosen.

IBActions

In my Header File, above the property declaration add this code:

-(IBAction)clickButton:(id)sender;

1	-(IBAction)clickButton:(id)sender;

This code creates a function called clickButton with the argument sender of type id. The variable sender is only there to control the action, so if the action is pinned to a button click then something like “UIButton was clicked” is sent. This is just to recognise the type of IBAction.

You have declared a function in the header file, now you must create the function in the implementation file:

-(IBAction)clickButton:(id)sender{
 NSLog(@"Clicked");
}

-(IBAction)clickButton:(id)sender{

NSLog(@"Clicked");

}

All this function will do is trace the word Clicked to the log when clicked. Simple.

Back to Interface Builder

We need to repeat the process we did previously, by control clicking on the File’s Owner, but this time, choose the action clickButton and assign it to the Touch Up Inside method of the Button:

Choose Touch Up Inside as the Sending Action

Save This.

Run the App.

What should happen is that you click the button and the word Clicked appears in the log. Try it!

Comments

comments