Home > Articles > Mobile Application Development & Programming

  • Print
  • + Share This
This chapter is from the book

Getting Text on the Screen

This is a Hello World app, so it should display “Hello World” somewhere on the screen. This can be accomplished by writing some code, but the easiest approach is to use Interface Builder. Interface Builder, or IB as it is often called, is the visual user interface designer built into Xcode. You’ll learn more about IB in Chapter 3, “Getting Started with Interface Builder,” but for now steps are provided to guide you through turning this blank application into a not-so-useful Hello World app.

To add “Hello World” to the display, you’ll edit the file ViewController.xib. A .xib file, pronounced “zib,” is an XML representation of a NIB file. A NIB file, or .nib, is the binary predecessor to the .xib file. Being text based, a .xib file has the benefit of working better with version-control systems when compared to the earlier binary .nib version. That said, .xib files are still compiled down to .nib files when you build the application.

What is a NIB file? It is a file created by Interface Builder to archive interface objects and their relationships. Put another way, a NIB represents the objects that make up the visual display of a screen. You create and edit NIB files using IB, and your application uses the NIB files at run time to display the user interface of the app.

Begin by opening the file ViewController.xib, available in the Project navigator. This changes the contents of the Editor area. It displays the NIB file using the IB designer, as shown in Figure 1.8.

Figure 1.8

Figure 1.8. Adding “Hello World” to the main view of the app

IB has a set of available utilities for working with a NIB file. Press Control-Option-Command-3 to display the Object library. The Object library contains a list of visual and nonvisual components that are used to construct the user interface. In the filter bar at the bottom, type “Label” without the quotes. This will filter the object list, displaying only label-type objects.

Drag and drop the label object onto the view’s canvas area. This creates a new UILabel instance, which is the type of object representing a label. Next, open the Attributes inspector (Option-Command-4). At the top of the Attributes inspector is a property named Text. Change the default value “Label” to “Hello World.” Xcode should now look similar to Figure 1.8.

You may need to resize the label to view the entire “Hello World” content. To resize it, move the mouse cursor to the right edge of the label object. The cursor will change to the resize indicator. Click and drag the mouse to the right to increase the width of the label.

Build and run the app in the iPad Simulator. Congratulations! You have written your first Hello World app for the iPad.

  • + Share This
  • 🔖 Save To Your Account