Naming Controls using XCode Storyboarding

Question

I am learning the basics of controls and event handling as I transition from .NET to Objective-C.

I have created a Single View project in XCode 4.2, using ARC and Storyboarding. On the Storyboard, the ViewController has a single UIImageView and a UIButton. The UIImageView is assigned the name 'imgLock' in the Identity Inspector's 'label' entry. The same technique is used to name the button 'btnToggle'.

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {
  IBOutlet UIButton *btnToggle;
  IBOutlet UIImageView *imgLock;
}

- (IBAction) toggleImage;

@property (readonly, strong) UIButton *btnToggle;
@property (readwrite, strong) UIImageView *imgLock;
@end

ViewController.m

#import "ViewController.h"

@implementation ViewController
@synthesize btnToggle, imgLock;

BOOL imgState;

- (void) toggleImage {
    UIImage *img = [UIImage imageNamed: imgState ? @"Unlocked64" : @"Locked64"];
    imgState = !imgState;
    [imgLock setImage: img];
}

On the Storyboard, I Ctrl-dragged the blue line from the button to the image, and selected toggleImage from the resulting context menu.

When I put a breakpoint in toggleImage and Build/Run the project, I see that everything is as it should be, except that imgLock is 0x0. From my Windows days, I guess I was expecting the controls to be instantiated because they were "placed on the form" as it were.

The log is free of comments, except a warning when killing the process: warning: error on line 2184 of "/SourceCache/gdb/gdb-1708/src/gdb/macosx/macosx-nat-inferior.c" in function "void macosx_kill_inferior_safe()"

Answer 1

On the Storyboard, I Ctrl-dragged the blue line from the button to the image, and selected toggleImage from the resulting context menu.

I'm not entirely sure what you did here, but you need to drag that line between your ViewController object and each of the button and the image. Hold down 'control' and drag from the icon that represents your view controller to the button, and then select btnToggle. Hold down 'control' again and drag from the view controller to the image, and this time choose imgLock.

Next, you'll want to make sure that your button is connected to a target and action. The action is the message that will be sent when the button is tapped, and the target indicates the object to which that action message will be sent. To set these, control-drag from the button to your view controller (since you want the view controller to be the target). Select your toggleImage: method from the list that pops up to choose that as the action.

From my Windows days, I guess I was expecting the controls to be instantiated because they were "placed on the form" as it were.

You're basically instantiating them when you create them in the storyboard. Just like a .xib file, a storyboard file contains serialized objects. When you load a view controller and its associated view from a storyboard, those objects are "deserialized" back into objects that you can use. Your view controller's outlets are references to other objects in the storyboard; those references will be created along with the objects, but you have to connect them in the storyboard.