In the previous lesson we looked into modifying our detail view controller with code, but that’s only one side of component-driven development in Xcode. In this lesson, we’ll get to pretend we’re designers and play around with the Interface Builder (or IB for short).

Xib Files

Prior to Xcode 4.x, the IB was a standalone application that collaborated with your project source. It has since been conveniently integrated into the Xcode user interface, and activates in the main window when a xib file is selected. As you may recall, xib files aren’t class files, but rather resources, and make the holy trinity of view controllers. Their function is simple — they provide the composition of your class’s components, which in turn sits as a layer on top and gets injected into the underlying framework of the class.  If you’re familiar with code-behind, it’s a lot like that.

An old diagram I made about code-behind in Flex

Basically, the application main interfaces with the function layer directly, which indirectly controls the form layer. In Flex, the form layer would be your MXML file, which subclasses the function layer. The function layer itself would just be an AS file. This not only helps you keep your layout and code logic separate, but it also allows you to share a function layer over multiple form layers.

Now, coming back to the year 2011…

A new diagram I made about code-behind in iOS

Not much has changed.

The Interface Builder

To see the Interface Builder in action, click on DetailViewController.xib in the Project Navigator.

The Interface Builder

There’s a few things of interest to note here:

  • Canvas - Distinguished by the light blue grid lines and the current component layout, this is the main view area of the builder.
  • Document Outline - Sitting between the Project Navigator and the Canvas, this is the component navigation area of the builder.
  • If you set the Utilities Panel to enabled (remember, it’s the far-right button in the view controls at the top right corner), you’ll see several new utility view states used specifically for the IB.

Adding Comp0nents

If you haven’t yet already, enable your Utilities Panel. You should see a panel appear to the right of the Canvas.

The Utilities Panel with the Object Library on the bottom right

The Utilities Panel, like the Navigator, has multiple subviews that you can tab back and forth between, however, in utilities, you may note there’s two separately controlled views stacked vertically. In the lower view, make sure the Object Library is active. The Object Library is where all the iOS components bundled into the UIKit is listed. From here, you can drag and drop components from the Object Library onto your Canvas or your Document Outline. Try it now by dragging and dropping a Round Rect Button to an area below the text that reads “Detail view content goes here.” Then, double-click the button to set it’s label to “Click Me.”

If you run the simulator now, you should see your button added to the detail view. You can click on it, but nothing will happen. Let’s fix this by adding some code for your button to trigger.

Code-Behindin’ It Up

Select DetailViewController.h to return to the code view mode. IB uses your interface to determine how components can plug into your class, so we need to add a few lines here. Below the applyColor method we wrote in the previous lesson, add the following code:

- (IBAction)onClick:(id)sender;

IBAction is a keyword that takes the place of void in methods declared with the intent of being triggered by a component in IB. The sender parameter will be a pointer to the component that triggered the action. While we’re on the subject of IB keywords, another one to know about is IBOutlet. This one was already used in our detail class, as you can see on line 15 of its header file:

@property (strong, nonatomic) IBOutlet UILabel *detailDescriptionLabel;

Here, IBOutlet precedes the property type UILabel, and is exposed with the intent of being assigned a label from within IB. If we wanted to access our button directly, we would need to declare an @property for it here as well, but since we’re only concerned about click actions, the onClick method should suffice. Now, switch over to DetailViewController.m and paste this code…

- (IBAction)onClick:(id)sender {
     self.detailDescriptionLabel.text = @"I've been clicked!";

to implement our onClick logic. The detailDescriptionLabel is the label component already implemented in the detail view; we’re just changing its text value to a new string.

Quick overview on strings:

  1. Strings in Objective-C are objects of type NSString. As such, they require pointer access like other objects and can be strong or weak-referenced.
  2. Short-hand string instantiation is similar to AS3, except the string must be wrapped in double-quotes and prefixed by an @ sign.

That should cover all the code-behind logic. Time to switch back to DetailViewController.xib.

Putting Together the Pieces

In the Interface Builder, everything should look just as you had left it. So what changed? This is where the magic happens. Right-click on the File’s Owner placeholder listed at the top of the Document Outline. You should see a dark pop-up window appear. The File’s Owner exists in every Xib, and is the entry-point to your code-behind logic. IB looks at the header file for the class defined in the Identity Inspector (One of the tabs in the upper section of the utilities) for your File’s Owner and lists the IBOutlets and IBActions as outlets and actions, respectively.

File's Owner popup. Note "onClick" has been added at the bottom.

The label and view have already been added to their outlets, but the circle to the right of our onClick action is still empty. To fix this, click and drag from onClick’s circle to the button we placed on the Canvas. You should see another popup appear. Select “Touch Up Inside.” You should now see the button linked to onClick in the popup.

File's Owner popup with updated onClick action

How awesome is that? Instead of typing up components in a proprietary XML-based markup language and loosely binding them throughout the document, we simply drag and drop our outlets and actions to the File’s Owner, and we’re done. All the components have their own popups that can be configured the same way, which is handy when applying delegates and data sources to tables, for example. Now run your app in the simulator, and click that button!

Oh sweet Jesus

Tagged with:

One Response to Flex to Objective-C: 6-Interface Builder

  1. Eric says:

    Really appreciate these lessons! Keep em coming


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Set your Twitter account name in your settings to use the TwitterBar Section.