{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
The user interface files of First iPhone application explained
Summary
This article explains the user interface files of an iPhone application. Explains the contents of the .xib files, which store the user interface. Goes through the various windows (Document Window, User Interface Window, Inspector Window, Library Window, Connections Panel) of the Interface Builder. The example used is a simple navigation-based iPhone application.
 
Table of Contents

Creation of the first iPhone application

The User Interface Files

Code Listing 1. Edited/shortened RootViewController.xib

Windows of the Interface Builder

Figure 1. The work in Interface Builder is done primarily through these four windows.

Document Window

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.

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.

User Interface 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

Figure 5. The Connections Panel for table view. Connections between objects are made by control-dragging from one object to other.

Inspector Window

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

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.

 
Article Series
Previous Article:
Test Your Knowledge: Understanding the Workspace of an Xcode project
This article is part of the Series:
Article Series: Getting started with iPhone development
Next Article:
Test Your Knowledge: The user interface files of First iPhone application explained

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.

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.

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.

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.

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.

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.

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.

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.

Take a Quick Quiz on this Article

1. What common objects do you see in the document window?



: User interface is represented by a top level class.
Question 1 of 10
Article Series
Previous Article:
Test Your Knowledge: Understanding the Workspace of an Xcode project
This article is part of the Series:
Article Series: Getting started with iPhone development
Next Article:
Test Your Knowledge: The user interface files of First iPhone application explained
Bookmark and Share This

More Articles With Similar Tags
This is a test on the article that gives a quick overview of the development tools installed with iPhone SDK. These tools include Xcode, Interface Builder, Instruments, and iPhone Simulator. In the article, Dash Code, which is used to build web applications for iPhone is also introduced. GDB, the open source debugger, is discussed there as well.
icon-xcode-groups-files.jpg
This article discusses various parts of the Project window inside an Xcode project. It also gives a quick overview of the Groups and Files navigation window. The Run menu, the default toolbar, and the built-in source editor are also discussed.
This is a test on the article that discusses various parts of the Project window inside an Xcode project. It also gives a quick overview of the Groups and Files navigation window. The Run menu, the default toolbar, and the built-in source editor are also discussed.
This is a test on the article that explains the user interface files of an iPhone application. It explains the contents of the .xib files, which store the user interface. Goes through the various windows (Document Window, User Interface Window, Inspector Window, Library Window, Connections Panel) of the Interface Builder. The example used is a simple navigation-based iPhone application.
This is a test on the article that looks at debugging Objective-C code of an iPhone application from Xcode. Debugging in Xcode can be performed from these four different places: Code Editor Window, Debugger Window, GDB Console, and Mini Debugger. This article goes through these four different ways.
About  Contact  Privacy Policy  Site Map