Let's stop for a moment and talk about Interface Builder. This program comes with the iPhone SDK. It can be launched from XCode when you double click on a nib (xib) file in your project, or, it can be launched by clicking on a xib file, or by starting it stand-alone. I usually use it from XCode since this is where I'm doing most of my work.
What Exactly is Interface Builder?
This program has been around awhile and is used to design user interfaces. It allows developers/designers to layout their user interfaces in a drag-and-drop visual format instead of having to construct the whole interface using code. This can greatly speed up the development process, and, it can make it possible for non-developers who are designers to be able to do their work. Its been used to design window layouts for Mac applications for quite some time. Apple engineers have now made it possible to design iPhone GUIs on it as well!
Steps... Although you don't have to do things precisely the way I am, I recommend you follow these steps in the same order:
- Before creating your nib file in Interface Builder, create the View Controller sub-class you want to use with it. Highlight "Classes" in your project's tree view, and create a new class based on UIViewController. You might name it something like "InvoiceViewController".
- Now, click on "Resources" in you project's tree view and create a new nib (xib) file... use the View xib template! You might name it something like: "InvoiceView". Remember that your nib file basically is going to contain a view for your app with all its various controls.
- In your code, you are going to create an instance of an object from your view controller class. This object will "control" your view. Inside of this object will be a "view" object. For your code and nib file to work together properly, you need to link up the view object in your view controller to the View inside of your nib file. The next few steps tell you how.
- Double click on your new nib file in your XCode Project. It will open up in Interface Builder.
- Bring up the Document window if its not showing already. It basically looks something like the window on the right in the screen shot at the top of this post. It may look a little different depending on which view mode is being used.
- Don't put any controls/tables/sub-views on the view until later (we'll tell you when).
- Click on the "File Owner" Icon. If the window wasn't highlighted to begin with, you may have to click on it again to actually select it.
- Make sure that the "Attributes" window is showing and pick the (i) tab.
- There will be a class name to select for the File Owner to be. The default is NSObject. Not very useful! Change it to the name of your view controller class. In our example, we would put "InvoiceViewController". If we didn't do this, Interface Builder (IB) would not know how to hook up its View to your view controller's view! File Owner is the name of the class that is going to "own" or "control" this nib.
- Now, make sure "File Owner" is still selected and, on the Attributes window, you will see a tab that looks like a little white arrow pointing to the right on a bright blue circle. Click it.
- You will see all the events and objects that the File Owner (your view controller class) supports. One of them will be view.
- There will be a little circle outlined in black to the right of it. Click it, hold down your mouse and drag the line that appears to either the View icon in the Document window or the View window. It will highlight, when it does, release your mouse. You will see that a linkage has been created.
- Save your work.
- Note that at this point, it is okay to add your sub views/tables/controls.
Now if you use this new nib file in your project, it should not blow up on you. Note that I have not covered capturing events in this mini tutorial, or setting label values programatically, etc. This is just covering setting up a nib file so that it will load properly in your iPhone project.
Hope this helps!
