Getting to know Xcode/Interface Buider: PART III

August 11, 2009 by Skylar
Filed under: iPhone Development 

This tutorial is an extension of http://www.skylarcantu.com/blog/2009/08/10/getting-to-know-xcodeinterface-buider-parts-i-ii-uitabbar-projects/. 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:



#import <UIKit/UIKit.h>


@interface FirstViewController : UIViewController {
        IBOutlet UIButton       *countButton;
        IBOutlet UILabel        *countLabel;
        
        int     count;
}

@property (nonatomic, retain) IBOutlet UIButton *countButton;
@property (nonatomic, retain) IBOutlet UILabel  *countLabel;

- (IBAction)countButtonPressed:(id)sender;

@end

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.



#import "FirstViewController.h"


@implementation FirstViewController

@synthesize countButton, countLabel;

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.



// The designated initializer. Override to perform setup that is required before the view is loaded.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
                count = 0;
    }
    return self;
}






- (IBAction)countButtonPressed:(id)sender {
        count++;
        self.countLabel.text = [NSString stringWithFormat:@"%d button presses", count];
}

Now save, we are done with code once more!

Now that we have completed out code, let’s reopen our FirstView xib. Double click on the view.

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.
[CENTER][IMG]http://www.ipodtouchfans.com/forums/imgcache/23712.png[/IMG][/CENTER]

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.”


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.”



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.

Save, recompile, and run! Beautiful!

Additional comments: ipodtouchfans.com

Tags: , , ,

Comments

One Comment on Getting to know Xcode/Interface Buider: PART III

  1. Brooks on Sun, 23rd Aug 2009 12:51 am

    2. Hi,

    Seems like most SQLite examples I see have multiple xibs.

    I want just one xib with multiple rows and 4 short fields in each row.

    How do I do this?

    Brooks

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!





Powered by WP Hashcash