This tutorial is an extension of [Tutorial] Getting to know Xcode/Interface Buider: PARTS I & II: UITabBar projects (http://www.ipodtouchfans.com/forums/showthread.php?t=137183). To get the most out of this tutorial, please either follow the linked tutorial, or download the sample project from the first post of the linked tutorial.



So, we have this beautiful tabbed project, built up in Interface Builder, and all is looking pretty good. But now, you want to do something with it. So let's add a button and a label to our project. We'll start by opening up Xcode and opening our FirstViewController.h. We will be adding a few variables here. A UIButton object, a UILabel object, and an integer called 'count.' Once those are added, we'll set the two objects as properties of our FirstViewController. Make sure to preface the objects with IBOutlets, else Interface Builder will ignore the objects. Properties allow other objects to refer to the variables directly by referring to them within the object that contains them. Specifically, anObject.property. And finally, let's create a method for what to do when our button is pressed. When completed, your finished FirstViewController.h file should look like this:
http://www.ipodtouchfans.com/forums/imgcache/23707.png



Since we've created the properties within the interface file, we will need to synthesize them within our implementation file. Open up FirstViewController.m and add an "@synthesize" after the "@implementation" and before the "@end." On the same line as synthesize, list your property variables by name, separated by commas.
http://www.ipodtouchfans.com/forums/imgcache/23708.png



Now, scroll down to the view controller's init method and uncomment it out. Add a line setting 'count' to 0. Now, scroll down and add the method you prototyped in your interface file to this file. Within this method, increment count.** and set the text of out label to a string that reflects the variable count.
http://www.ipodtouchfans.com/forums/imgcache/23709.png
http://www.ipodtouchfans.com/forums/imgcache/23710.png



Now save, we are done with code once more!





** Incrementing and and decrementing is quicker than adding 1 to your variable. Get in the habit of using variable++ and count-- over count += 1 and count -=1. And yes, there is a difference between ++count and count++

Now that we have completed out code, let's reopen our FirstView xib. Double click on the view.
http://www.ipodtouchfans.com/forums/imgcache/23711.png



Well, that's no good. We want to be adding things to them, but we also want to know how the view will look with a tab bar and a status bar, so we place things accurately. To simulate the appearance of these items, tab on the view to expose its attributes in the Inspector and select "Gray Status Bar" and "Tab Bar" from within the simulated metrics section.
http://www.ipodtouchfans.com/forums/imgcache/23712.png



Much better. Now, go ahead and drag a UILabel out of the Library Window directly onto our view. Make it look about like how it appears in the following screenshot. Also, set the justification to centered. Next, drag a UIButton onto your view from the Library Window. Set it up approximately how you see in the following screenshot and set the text to "Press Me."
http://www.ipodtouchfans.com/forums/imgcache/23713.png
http://www.ipodtouchfans.com/forums/imgcache/23714.png



Excellent, but so far nothing you see will do anything. Let's fix that and tell the nib that the label and button you just placed are the same as the ones you just defined in the FirstViewController.h. In the main FirstView xib window, click on File's Owner and on its attributes in the Inspector window. You will now see that the IBOutlets and IBAction you created appear in the list now. Excellent! Drag the circle next to each object in the Inspector to the object you want to assign it on your view. Also, drag the action you craeted for countButtonPressed to your count button. Set it to "Touch Up Inside."
http://www.ipodtouchfans.com/forums/imgcache/23715.png
http://www.ipodtouchfans.com/forums/imgcache/23716.png
http://www.ipodtouchfans.com/forums/imgcache/23717.png
http://www.ipodtouchfans.com/forums/imgcache/23719.png



Now compile and see the results. What's that the app crashed? Something about "this class is not key value coding-compliant?" That is a very common problem when using Interface Builder. I left it in because I know that many of you will run into the problem eventually. Some sooner than later. The problem is common because it is super easy to overlook. Let's fix this now. The root of the problem is actually within your MainWindow.xib. So reopen that now. Select the FirstView controller. Remember when we set the UIViewController to the FirstView nib in the Inspector? Well, that isn't actually good enough. You will have to set its Class Identity to FirstViewController.
http://www.ipodtouchfans.com/forums/imgcache/23720.png



Save, recompile, and run! Beautiful!
http://www.ipodtouchfans.com/forums/imgcache/23718.png

Now that we have completed out code, let's reopen our FirstView xib. Double click on the view.
http://www.ipodtouchfans.com/forums/imgcache/23711.png



Well, that's no good. We want to be adding things to them, but we also want to know how the view will look with a tab bar and a status bar, so we place things accurately. To simulate the appearance of these items, tab on the view to expose its attributes in the Inspector and select "Gray Status Bar" and "Tab Bar" from within the simulated metrics section.
http://www.ipodtouchfans.com/forums/imgcache/23712.png



Much better. Now, go ahead and drag a UILabel out of the Library Window directly onto our view. Make it look about like how it appears in the following screenshot. Also, set the justification to centered. Next, drag a UIButton onto your view from the Library Window. Set it up approximately how you see in the following screenshot and set the text to "Press Me."
http://www.ipodtouchfans.com/forums/imgcache/23713.png
http://www.ipodtouchfans.com/forums/imgcache/23714.png



Excellent, but so far nothing you see will do anything. Let's fix that and tell the nib that the label and button you just placed are the same as the ones you just defined in the FirstViewController.h. In the main FirstView xib window, click on File's Owner and on its attributes in the Inspector window. You will now see that the IBOutlets and IBAction you created appear in the list now. Excellent! Drag the circle next to each object in the Inspector to the object you want to assign it on your view. Also, drag the action you craeted for countButtonPressed to your count button. Set it to "Touch Up Inside."
http://www.ipodtouchfans.com/forums/imgcache/23715.png
http://www.ipodtouchfans.com/forums/imgcache/23716.png
http://www.ipodtouchfans.com/forums/imgcache/23717.png
http://www.ipodtouchfans.com/forums/imgcache/23719.png



Now compile and see the results. What's that the app crashed? Something about "this class is not key value coding-compliant?" That is a very common problem when using Interface Builder. I left it in because I know that many of you will run into the problem eventually. Some sooner than later. The problem is common because it is super easy to overlook. Let's fix this now. The root of the problem is actually within your MainWindow.xib. So reopen that now. Select the FirstView controller. Remember when we set the UIViewController to the FirstView nib in the Inspector? Well, that isn't actually good enough. You will have to set its Class Identity to FirstViewController.
http://www.ipodtouchfans.com/forums/imgcache/23720.png



Save, recompile, and run! Beautiful!
http://www.ipodtouchfans.com/forums/imgcache/23718.png


simple tutorial. but what interests me is not the tutorial, it's what "spinboard.dylib" is on your desktop. =]

simple tutorial. but what interests me is not the tutorial, it's what "spinboard.dylib" is on your desktop. =]

And you HAD to quote all the images to say that... gosh...

And the tutorial is simple because the goal is not to teach us to program, but to use the Interface Builder, I just grabbed my dad's Mac and did it, will be useful, now I just need my own Mac, knowing how to make interfaces is just what I needed :D

Thanks Skylar :)

I was just trying out the tutorial and was stepping through trying to initialize count with a different value. I was thinking of added the ability to save the value of the button presses from prior instances of the program, however I noticed that initWithNibName was not being called and that count=0; was never being called.

Good call. If you want, just put the code in loadView.


What's happening is that initWithCoder is being called as the initialization method. initWithNib... is only called when you initialize the code programatically.

And yes, I take the blame for that mistake.

If I implement loadView, the view is just a blank white view now.

Good call. If you want, just put the code in loadView.


What's happening is that initWithCoder is being called as the initialization method. initWithNib... is only called when you initialize the code programatically.

And yes, I take the blame for that mistake.

Don't forget that you need to call [super loadView] from within loadView.

Oh, I see. I forgot.

Say I wanted to create an object that all the views in the tab bar controller could view, where would I do that?


Don't forget that you need to call [super loadView] from within loadView.

Nice tut skylar, it really helped.

Although, I thought you only needed to outlet something if you need to get/set its value? (the button in this case, is it necessary to IBOutlet it?)

IBOutlet tells Interface Builder that your object exists and that you're going to make the connections in Interface Builder.

Don't confuse properties with outlets.