Using Interface Builder in Xcode 4 (iOS 4) Part 2

ADDING AN IMAGE

To use an image in an application, you need to add that image into your project first. That means you drag the image file into Xcode Navigator area, alongside all your other files. Generally, you should drag the images into the separate group from your source code. After dragging a file into Xcode, you’ll see a confirmation prompt, as shown in figure 3.20. Make sure you select the Copy Items into Destination Group’s Folder check box; this will ensure that all your resources are managed inside your project.

Once you’ve done that, you can go to your image view’s Attributes tab in Interface Builder and select or type in the filename of your image file. In this case, it’s apple.png. As soon as you enter this name, your picture should automatically pop up in Interface Builder’s main window.

You then may wish to use the Attributes tab to change how the picture displays in the window (including automatically resizing it if you didn’t build your image to be a specific size) or to adjust other elements. For example, we opted to change the image’s alpha transparency to .5, to make it easier to see the text over the image.

If you want, you can now go ahead compile and run this program, which was built entirely in Interface Builder. You can see the results in figure 3.21.

Prompt window for adding new files to the project


Figure 3.20 Prompt window for adding new files to the project

Combining graphics and text can be hard in some programming languages, but under the SDK it can be done entirely with Interface Builder. Here you see a background image with a text overlay.

Figure 3.21 Combining graphics and text can be hard in some programming languages, but under the SDK it can be done entirely with Interface Builder. Here you see a background image with a text overlay.

The problem is that an unsightly web view box is sitting in the middle of the display. If you inspect the Attributes tab for the web view, you’ll see why you didn’t do anything more with it: you can’t set the starting URL from inside Interface Builder.

You can do other things in Interface Builder. Specifically, you can easily resize the view. We chose to set it to 280 x 391 pixels, which various Interface Builder guidelines suggested was the right size; but you can size it by dragging the corners. We also opted to leave the Scales Page to Fit option off, which would make the web view act as if it had a viewport 980 pixels wide, like iPhone Safari. But to fill the web view window, you have to access it from the source code, which means adding a new IBOutlet to the app delegate.

CONNECTING THE DOTS IN INTERFACE BUILDER

Now it’s time to code. Let’s declare the web view as an IBOutlet in the app delegate, by connecting the outlets from app delegate to myWebView from Interface Builder. Connecting takes a few steps with drag and drop:

1 With the MainWindow.nib file open, click the Assistant button. You see a side-by-side view under the Editor pane.

2 In the jump bar above the assistant view, select the header file in which you want to declare a new outlet. In this case, it’s the AppleStockAppDelegate.h file.

3 Control-drag from a nib object to the location in the header file for the new outlet. In this case, Control-drag from the web view to the header file, and insert a new outlet (as shown in figure 3.22).


Control-drag from the web view to the app delegate header file to create a new outlet.

Figure 3.22 Control-drag from the web view to the app delegate header file to create a new outlet.

4 In the dialog (see figure 3.23), choose Outlet from the Connection menu, type the name of the new outlet, and click Connect. In this case, use webView as the new IBOutlet name. That’s all! Now you have the webView IBOutlet added to the header file automatically by Xcode, and it can be manipulated from within the Interface Builder editor.

Dialog box to create the Outlet connection from the nib object to the header file

Figure 3.23 Dialog box to create the Outlet connection from the nib object to the header file

You can examine the app delegate’s header file and source code. Notice that you have the new IBOutlet property properly declared and synthesized. Even the memory management is automatically taken care of.

ADDING CODE FOR IBOUTLET

Now it’s time to add in the function to load the AppleStock’s URL in the web view. Select the AppleStockAppDelegate.m file, and the implementation file will be in the Editor area (you can hide other views to focus on the source file editing). Add the code snippet from the following listing.

Listing 3.5 Create webView with automatic refresh content from Apple’s stock quote

Listing 3.5 Create webView with automatic refresh content from Apple's stock quote

Note how you call the refreshQuote method. It’s called using an NSTimer. This allows you to automatically call the refreshQuote method every so often—in this case, every 5 seconds.

Also note that you don’t have to allocate the web view, nor do you have to initialize it, nor do you have to add it as a subview of your window; all those details are taken care of by Interface Builder. But after you link to the object via an outlet, you can access it like any object you created yourself.

We’ll take a more complete look at how web views work in topic 14. But we wanted to include them here to demonstrate (again) how easy it is to incorporate an unfamiliar object into your code using Interface Builder.

In addition, a web view provides a nice example of client-server integration between web design and the application—a topic that we first touched on in topic 2 and that turns out to be pretty simple to attain using the iOS. By linking to a URL that sends dynamic content to your device, you can make a sophisticated, always-up-to-date program despite only designing the display engine on the iOS program side of things.

UPGRADING TO A UNIVERSAL APPLICATION

Follow topic D to upgrade the current iPhone application to a universal application. Under the new MainWindow for iPad, adjust the image view’s size to fit the full screen of iPad. That’s it! Now click Build and Run. You’ll have a nice stock chart show up in the web view and refresh every 5 seconds on the iOS Simulator.

Congrats! You just built your first application, AppleStock, in Xcode, with the major help of Interface Builder, as shown in figure 3.24.

This shows what the final product looks like. An image, a label, and a dynamic web view are put together in Interface Builder with only a single line of code required. This demonstrates how simple it is to build a sophisticated interface with little work by using Interface Builder.

Figure 3.24 This shows what the final product looks like. An image, a label, and a dynamic web view are put together in Interface Builder with only a single line of code required. This demonstrates how simple it is to build a sophisticated interface with little work by using Interface Builder.

That brings us to the end of the AppleStock example. It presented some fundamental uses of Interface Builder that you’ll encounter again and again. In particular, creating objects in Interface Builder and then adding an outlet to a header file will likely become a regular part of your iOS coding experience, so you should make sure you’re entirely familiar with that process.

Summary

Xcode is ultimately the tool to build an iOS application. It’s where you write the code that allows you to create, manipulate, and destroy objects. As you’ve seen in this topic, it’s easy to use Xcode to do some sophisticated things.

You can also create basic user interface objects visually using the Interface Builder tool under Xcode. It allows you to design objects using a graphical UI that makes their arrangement a lot easier.

In the next topic, you’ll use Xcode to create a new file and define a custom class. You’ll also learn how to debug under Xcode.

Next post:

Previous post: