Tutorial: Creating an iPhone xib-file from scratch in Interface Builder (IB)

In the last post we analysed the contents of MainWindow.xib in order to try to understand how Interface Builder (IB) works and what you can use it for. This time we will try to create an IB-file from scratch in IB, since syntehsizing (creating) something often is the best way to confirm that you really understood everything you learned while analysing a subject.

Start IB, choose File/New from the meu and select the "Empty" template. This creates a xib called "Untitled" which contains "File's owner" and "First responder".

Select "File's owner" and press CMD-4 and you'll see that it is of the class NSObject. The owner of the xib-file we are currently creating is an object of type UIApplication, so we should start by changing the class to that. To do that, press CMD-4 and choose UIApplication from the drop-down list.

As soon as you do this an outlet called 'delegate' is automatically added in the "Class outlets" section. This is because an UIApplication normally is connected to an object which implements the UIApplicationDelegate protocol and that's where the 'delegate' name comes from.

The next natural step therefore is to create an object which implements that protocol. We have aldready defined such a class in XCode called "Test1AppDelegate" (see last post), so we'll create an object of that class.

Choose "Tools/Library" from the menu or press CMD-L. Select "Cocoa Touch Plugin/Controllers/Object" and drag the object icon into the "Untitled" window. This creates an object simply called "Object" in our IB-file.

CMD-4 reveals that this newly added object is of class NSObject, but we want it to be of class "Test1AppDelegate". Since this is a non-standard class that exists only in our project, we need to import the class definition/specification so that IB understands how to use it. To do this, choose "File/Read Class File" from the menu and navigate to Classes/Test1AppDelegate.h and select it.

Select "Object" again from the file contents window ("Untitled")  and press CMD-4. Now you should be able to select "Test1AppDelegate" as the class for this object. You should also see that this class has one outlet of type UIWindow with the name'window', which should be familiar since that is our window.

Let's connect the 'window' outlet to an UIWindow! To do this, we first have to create an UIWindow object, so press CMD-L to bring up the Library window. Choose "Windows, Views and Bars" and drag the Window-icon into the file contents window ("Untitled"), that is, drop it right beside the "Test1 App Delegate" object we just created.

To connect the 'window' outlet of "Test1 App Delegate" to the UIWindow object we just created, position the mouse over the "Test1 App Delegate" icon and press and hold the CTRL-key. Keep on holding the CTRL-key and press and hold the mouse button while moving the mouse pointer towards the Window icon. A blue line should appear, going from the the icon to the current position of the mouse pointer. Release the mouse button when the pointer is positioned over the Window icon.

Now a small pop-up window called "Outlets" should appear. Select the 'window' outlet, which should connect the Window object to the 'window' outlet of "Test1 App Delegate". To verify this, select "Test1 App Delegate" and press CMD-2. The 'window' outlet should have the value "Window", which is the IB-name of the UIWindow object we created a minute ago.

Now we should make "Test1 App Delegate" the delegate of our UIApplication, which is called "File's owner" here. Repeat the CTRL-drag procedure from above, but this time drag from "File's owner" to "Test1 App Delegate" and select the 'delegate' outlet. Done!

This procedure of CTRL-dragging between icons to connect an object to an outlet is in my view a bit counter-intuitive since I think the direction you have to drag the mouse is "wrong". To connect one of object A's outlet to object B, you should CTRL-drag from A to B. For me, it would have been more intuitive to instead CTRL-drag from B to A, if I wanted to connect B to A, but I guess that's just a matter of perspective.

To help us verify that we have actually succeeded in re-creating a "copy" of the MainWindow.xib file that was automatically created for us by XCode, click the Window icon and press CMD-1. Locate the box where you can set the window's background colour and set it to green or some other colour than the default white. As a final step, save the xib as "MyMainWindow" in the "Test1AppDelegate" project. IB will ask if you want to add it to your project which is exactly what we want so answer yes.

Go back to XCode and drag the MyWainWindow.xib file to the resources folder and then click on Resources/Info.plist to change MainWindow to MyMainWindow. This instructs iPhone to use our re-created xib-file instead of the one that XCode created for us.

Build and run the project by pressing CMD-Return and you should be presented with a green screen instead of a white one. Wow, we managed to quite easily create our own xib-file from scratch and "integrate" it in the application we created in XCode!