Creation of the first iPhone application
The first iPhone application discussed in this article has been created in the following article:
Creation of First iPhone application explained
This project is a simple navigation-based application. It uses a table view on the main window. From the code side, a table view controller (UITableViewController) is used to provide the functionality for a table based view.
In the article below, the user interface files from that application are closely examined.
The User Interface Files
The user interface files for iPhone applications have .xib as extension. When the code is compiled and .app file for the application generated (for example, FirstApp.app), .nib files would be created from these .xib files.
This application (the First App) comes with two .xib files:
- MainWindow.xib
- RootViewController.xib
The extension .xib stands for:
- x - XML
- ib - Interface Builder
These XIB files are XML files describing a particular user interface. Obviously, you don’t want to manually edit these files, but they can be saved in SCM and differences can be tracked later.
Code Listing 1. Edited/shortened RootViewController.xib
<?xml version="1.0" encoding="UTF-8"?>
<archive type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="7.02">
<data>
<int key="IBDocument.SystemTarget">528</int>
...
</object>
<object class="IBProxyObject" id="500153577">
<string key="IBProxiedObjectIdentifier">IBFirstResponder</string>
</object>
<object class="IBUITableView" id="747164330">
<reference key="NSNextResponder"/>
<int key="NSvFlags">274</int>
<string key="NSFrameSize">{320, 460}</string>
<reference key="NSSuperview"/>
<object class="NSColor" key="IBUIBackgroundColor">
<int key="NSColorSpace">1</int>
<bytes key="NSRGB">MSAxIDEAA</bytes>
</object>
...
<object class="IBObjectContainer" key="IBDocument.Objects">
<object class="NSMutableArray" key="connectionRecords">
<bool key="EncodedWithXMLCoder">YES</bool>
<object class="IBConnectionRecord">
<object class="IBCocoaTouchOutletConnection" key="connection">
<string key="label">tableView</string>
<reference key="source" ref="372490531"/>
<reference key="destination" ref="747164330"/>
</object>
<int key="connectionID">10</int>
</object>
<object class="IBConnectionRecord">
<object class="IBCocoaTouchOutletConnection" key="connection">
<string key="label">view</string>
<reference key="source" ref="372490531"/>
<reference key="destination" ref="747164330"/>
</object>
...
<object class="IBPartialClassDescription">
<string key="className">RootViewController</string>
<string key="superclassName">UITableViewController</string>
<object class="IBClassDescriptionSource" key="sourceIdentifier">
<string key="majorKey">IBProjectSource</string>
<string key="minorKey">Classes/RootViewController.h</string>
</object>
</object>
<object class="IBPartialClassDescription">
<string key="className">RootViewController</string>
<string key="superclassName">UITableViewController</string>
<object class="NSMutableDictionary" key="outlets">
<string key="NS.key.0">tableView</string>
<string key="NS.object.0">UITableView</string>
</object>
...
</data>
</archive>
As you can see, the XML of the .xib contains a series of version information and then a set of objects describing the file owner, connections, user interface objects (like RootViewController / UITableViewController).
As you add/modify the user interface, the XML in the .xib file changes. In the end, the Interface Builder generates/manipulates XML, rather than Objective-C code. This is different from some other development tools, for example, Visual Studio. In Visual Studio, as you create the user interface, C#/VB.Net (or whatever the .Net language you are using) code is generated. In case of Mac OS X and iPhone applications, the objects are created/loaded during runtime.
The files with .nib extension, on the other hand, are binary files. These files are in the .app file package.
The extension .nib stands for:
- n – NextSTEP
- ib - Interface Builder.
Windows of the Interface Builder
If you double-click on an xib file in Xcode, that file will be opened in the Interface Builder. Most of the work in Interface Builder is done via these four windows shown in the figure below. In addition, a Connection Panel is extensively used to create links between objects and code.
Figure 1. The work in Interface Builder is done primarily through these four windows.
These four windows are:
- Document Window
- User Interface Window
- Inspector Window
- Library Window
Document Window
The Document Window lists objects that are part of this user interface file. The figure below shows the objects from MainWindow.xib.
Figure 2. The Document Window of Interface Builder. This is shown in the outline mode. By default you would see it in the icon mode.
As you can see, the objects in the Document Window all have a type (a class either from Cocoa Touch or some class created by you). For example, for the Main Window, file’s owner is UIApplication.
Figure 3. The Document windows for the xib files. This is shown in the icon view mode. One has a window object and the other has a table view. One represents the application and the other represents a specific view.
For both the xib files (MainWindow.xib and RootViewController.xib), you see the File’s Owner and First Responder objects. In case of MainWindow, the File’s Owner class is UIApplication and its delegate is set to the FirstAppAppDelegate class.
In case of RootViewController, the class for File’s Owner is RootViewController. This is a custom class derived from the UITableViewController class. The RootViewController.xib also has a Table View (whose class is UITableView). The delegate and data source for this table view is set to File’s Owner.
In essence, what’s going on here is that one document represents the application and the other represents a view (with a table on it). They are linked back to the code (written in Xcode) by setting their class and connections.
User Interface Window
You would create the user interface of a particular screen by “drawing” that user interface -- i.e. by dragging and dropping the controls and views from the library window.
Figure 4. The user interfaces for main window and table view. The window UI has a navigation bar at the top. Table view comes from a class called UITableView from the UIKit framework.
Connections Panel
The connections between various objects are set via the connections panel. You can open this panel by right-clicking (or control-clicking) on an object.
Figure 5. The Connections Panel for table view. Connections between objects are made by control-dragging from one object to other.
As you can see from the Connections Panel for the Table View, the outlets dataSource and delegate are set to the File’s Owner. And in this case, the File’s Owner is a class derived from the UITableViewController.
Inspector Window
The Inspector window has four tabs: Attributes, Connections, Size and Identity. From these tabs, you can set and/or view various things like styles, colors, sizes, the underlying class and connections.
Figure 6. The Inspector Window. You can set and view a whole bunch of information about a particular object from here. These are the attributes of a table view.
Library Window
The library window is tool box that holds controllers, views, and controls. These objects can be dragged on to the NIB Document window or the user interface window to make up the user interface. This is like the Toolbox in Visual Studio.
Figure 7. The Library Window. You would drag a button or a slider or a number of others from the library on to the canvas of the user interface and then set its properties and make the necessary connections.
This article gave a quick overview of the four windows and a connections panel that you would use in order to create or modify the user interface for a particular screen.
