Skip to content

Greetings: Wiring Up the UI


Wire up the UI ∞

In our application we have 3 components:

  • The UI defined in an XIB file
  • The backend code that controls the UI and reacts on input

  • The framework which provides the bootstrapping of the app as well as the foundation classes

In order for the UI to execute code and for the code to fill data onto the UI we need to define the connection between the UI and the code. Earlier we defined an Outlet and an Action but we actually have two of each of them. The reason behind that was to show two ways on how the connections can be set up. First let’s see what is already there. In the Document windows you see three icons:

  • File’s Owner representing the owner of the UI in this case the UI Controller
  • First Responder representing element that responds first to events

  • View representing the UI element Now make a right click (or control-click) on the File’s Owner icon and you will see a black drop down box listing the outlets, received actions and referencing outlets:

image:iGreetings.files.owner.context.png

The greetLabel is the outlet we defined in the View Controller header, the greetMe is the action we defined there as well. For our application we need another outlet and action. While the File’s Owner icon is still selected open the Identity Inspector with Command-4. This is just another tab of the same dialog as the attribute inspector. There you see the Class, Class Actions and Outlets and more:

image:iGreetings.files.owner.identity.inspector.png

In order to add another Action or Outlet you might think that you just need to click on the appropriate plus sign and you can add the desired item. If you try (don’t hesitate you can delete it right afterward) you will see that it adds the item to the XIB and not the View Controller header. The right way is to click on the arrow right of the name of the View Controller in the Class Action or Outlet frame and you will be redirected to the header file. Here duplicate the outlet and action line and give the outlet the name greetInput and type UITextField and the action the name clearAll. The code looks now like this:

1
2
3
4
5
6
7
8
9
10
11

#import <UIKit/UIKit.h>
 
@interface iGreetingsViewController : UIViewController {
        IBOutlet UILabel *greetLabel;
        IBOutlet UITextField *greetInput;
}
 
- (IBAction) clearAll: (id) sender;
- (IBAction) greetMe: (id) sender;
 
@end

After saving the header and going back to the Interface Builder the Identity Inspector is updated with the new items and now looks like this and the context menu is updated as well:

image:iGreetings.files.owner.identity.inspector.final.png

image:iGreetings.files.owner.context.new.items.png

Even though we discovered were the Outlets and Actions can be found on the UI and added a new pair we did not make any progress on wiring them up with the actual UI target but that is exactly what we are going to do next.

Connect Code and UI ∞

Before we start make sure that the Document and View window are visible and preferable side by side. If the Document window is not visible then the XIB file is not opened by the Interface Builder. In case the View window is not visible open the View Icon on the Document window. The is not much to it other than clicking on the empty circle right of the greetInput outlet and drag it over to the Text Field on the View until the text field becomes highlighted by a turquoise color:

image:iGreetings.wire.input.outlet.with.ui.png

and then you can release the mouse button and the context menu of the File’s Owner will indicate the connection to the target by filling in the right column of the greetInput row:

image:iGreetings.write.input.done.png

Connecting the Greeting Label is more or less the same; just make sure that you select the right label and not the prompt. Connecting the two buttons is a little bit trickier because the button has multiple states that could fire and so we need to select the right one which is in our case the Touch Up Inside:

image:iGreetings.wire.button.png

Finally check that your File’s Owner context menu looks like this and we are done with this step:

image:iGreetings.wire.done.png

It might be notable for like Java developers that the application would compile and even start even though the method are not implemented yet. That said the application would fail the moment someone would press a button because there is not target method implemented. In cause you want to try it out yourself make sure that you open the Console (XCode Menu -> Run -> Console or Shift-Command-R) to see the ‘unrecognized selector’ exception because the application just stops responding.