Interface Builder Tutorial

M kids 101 here today. This is a little Interface Builder Xcode tutorial. I'm going to be showing you how to do IB Outlets and IB Actions. For those of you, this is for those of you who already know enough Objective C to get around but who do not know how to tie their code in Objective C up with their code in Interface Builder.

So, let's just open Xcode. Okay, so now we go up to File, New Project. Under Mac OSX, click Applications, click Cocoa Application, click Choose, and then I'll call it "Hello."

So this should appear. Just go down to the file, Main Menu. Double click that and it'll open up an Interface Builder. Then I'm going to drag a few controls on. I'm going to drag an NS text field, which is a label, and let's find a nice NS button. I'm looking for one.

Okay, so here's a very nice button. We can just drag this on here and now I'll make this a little smaller. Make this the whole width, put this in the center, whatever. Okay, so here's my interface so far: Hello CCK.

Okay, so now I'll just save this in Interface Builder. I want to click on my Classes folder right here, go under File, New File. Then under Mac OSX, click Cocoa Objective C Class, Next, and then call it "F.M." They should both appear under Classes. Go into f.h and we're now going to edit f.h.

I want to click, um, click inside these two curly braces, this and this, and we type the following code: IB Outlet um, and then whatever type of variable we're importing, NS text field in my case, "main label," what I'm going to call it. Then we put a semicolon at the end, so that's what I'm typing in.

Under there, we are going to type in - (IBAction) click:(id)sender;. So I'll also put this code in the description but not these two lines because you can't put curly braces in the description.

Okay, so there we go. Save that. Now I'll go back into Interface Builder. Now we have to do a few more things to tie those two IB Outlets, or that one IB Outlet and that one IB Action, up with the code.

So we want to go up and we want to filter for "Object." It looks like this, just this square box. Then we can drag it in there into this list of files. Then, um, what we want to do is we want to go into the Attributes Inspector.

So we click on our object, which we dragged in. You go into Tools, Attributes Inspector, and then we go up into this tab that looks like an "i" for Information. Then under Class, we want to set it to "Foo." Just "Foo" Class is f. So let's save up the stuff in Interface Builder.

Okay, so now we want to tie these two things into there. First of all, we had an IB Outlet for NS text field right there called "main label." So we hold Control or we click f. Then we hold Control while holding down the mouse and then drag our mouse up to the label.

Then we let go and we click "main label" because it's an NS text field, and now it is assigned to main label. Now because we have an IB Action, which is "Click," we hold Control, then click "Hello" and drag it over to "Foo," and then let go.

We want to click "Click" right there. So now when they press this, it's going to trigger "Click," and they can set properties of this by editing properties of "main label." So we save up what we've done in Interface Builder, quit Interface Builder forever now.

And now under Classes, f.h is what we edited to put all this stuff in here, all this code that we've already typed. So now we want to go and edit F.M. Now when we're editing F.M, you can just type the following code: - (IBAction) click:(id)sender and then we'll put this code in there too, and then a semicolon.

Then we hit enter, then we press open curly brace. That is Shift + Open Bracket. Then we hit enter, and now we're going to type, um, this is just an example of some Objective C.

mainLabel setStringValue:@“Hi”;.

Then parentheses, um, at sign, quote “Hi,” quote, close parentheses, semicolon. Oh, we need to close bracket, then semi...