Chapter 1. Building Your First iPhone App

You have an idea that will lead to fame and fortune on the iTunes App Store. You decide to write an iPhone app. The first and most important task is for you to become comfortable with the tools used to build your products. A Chinese proverb says, “the journey is the reward,” and this chapter is all about the journey. In the upcoming pages, you’ll experience the entire application development process, start to finish. You’ll learn how to set up the software you need, and try your hand at building an app.

But what app? If you do a quick search of the App Store, you’ll find no shortage of flashlights. For many aspiring developers, this simple application is a rite of passage, so now’s your chance to join this illustrious crowd. Once you see how easy it is to create your own app, you’ll wonder why people pay 99¢ for them on iTunes!

Getting the Tools

You can’t build anything, including an iPhone app, without tools. Luckily, you can find everything you need on your Mac, or download it for free. Specifically, you need to download and install Xcode development software and the iPhone Software Development Kit (SDK) on your Mac. (And if you don’t have a Mac, see the box on the next page.)

Both the Mac and iPhone benefit from a rich set of technologies that have stood the test of time. The iPhone SDK is built upon the infrastructure created by NeXT in the 1980s. This company, founded by Steve Jobs, created a revolutionary object-oriented operating system called NeXTSTEP. This influential system has evolved into the OS X operating system in use today. As you learn more about the iPhone, you’ll see that it has much in common with the Mac.

Note

You see the NeXT legacy whenever you encounter an object with the prefix “NS”. Those initials stand for NeXTSTEP.

Installing Xcode

Once you and your Mac are ready to go, it’s time to load your hard drive with lots of new software. Apple supplies the Xcode development tools free of charge, but doesn’t install them on every Mac, since most consumers will never use them.

Luckily, you can find the Xcode tools right on your Snow Leopard installation disk. To run Xcode, Apple recommends you have an Intel-based Mac running Leopard or Snow Leopard. The following steps explain how to get the software onto your hard drive where you can use it:

Note

You can install the iPhone SDK and other development tools on Leopard, but the Snow Leopard tools reflect significant improvements over the previous version. Working in the newest version of Mac OS X assures you the latest and greatest features.

  1. Pop the installation DVD into your Mac and double-click its icon. In the Optional Installs folder, double-click the Xcode.mpkg file.

    When you double-click that file, the Xcode installation process begins.

  2. On the introductory screen, click Continue. When the license agreement screen appears, click Continue and then click Agree.

    The license agreement is the same legalese you agree to whenever you install software. Read it if you’re into such things. When you’re done, the next screen lets you choose what you want to install, as shown in Figure 1-1.

    The Xcode installer starts out with all checkboxes except Mac OS X 10.4 selected for you. Leave them that way. You can click each package name to see what’s being installed: Besides the integrated development environment (IDE) that you’d expect, you’ll also find tools for monitoring performance and plenty of documentation.
    Figure 1-1. The Xcode installer starts out with all checkboxes except Mac OS X 10.4 selected for you. Leave them that way. You can click each package name to see what’s being installed: Besides the integrated development environment (IDE) that you’d expect, you’ll also find tools for monitoring performance and plenty of documentation.
  3. On the Custom Install screen, make sure all checkboxes except Mac OS X 10.4 are turned on, and then click Continue.

    The installer copies all of the Xcode from the DVD onto your hard drive. This process takes a few minutes.

  4. The final screen prompts you to select an install location. Make sure that it’s on the same disk where all your other applications are stored. Click Install to start the process.

    Depending on your Mac’s speed, this process can take a few hours. Get away from the computer and get some fresh air for once.

    After everything is safely on your hard drive, you see this message: “The installation was successful.”

  5. Click Close to quit.

  6. You can safely eject the DVD at this point.

After the installation is complete, go to the Hard Drive→Developer→Applications folder on your hard drive, and check out your new tools. This folder contains the applications and utilities you use to develop both Mac and iPhone applications: The ones you’ll use the most are Xcode and Interface Builder. The parent Developer folder also has all of the accompanying developer frameworks, libraries, and documentation.

The Xcode installation doesn’t include one thing—the iPhone SDK that’s required to develop apps for your phone. For that, go on to the next section.

Tip

Now that you have your tools, maintain them. Apple regularly updates Xcode, so the version on your Snow Leopard DVD will eventually become outdated. When major changes occur, Apple will send an email reminding you to upgrade by visiting the iPhone Dev Center, as described in the next section.

Getting the iPhone SDK

You have to join the iPhone Developer Program before Apple lets you get your hands on the iPhone SDK. Your free membership gives you access to the tools, documentation, and developer forums via the iPhone Dev Center (Figure 1-2).

The iPhone Dev Center is your first and best resource as an iPhone developer. You’ll use this site to download and update your iPhone SDK, find sample code and documentation, connect with other iPhone developers, and to prepare your product for sale on iTunes.
Figure 1-2. The iPhone Dev Center is your first and best resource as an iPhone developer. You’ll use this site to download and update your iPhone SDK, find sample code and documentation, connect with other iPhone developers, and to prepare your product for sale on iTunes.
  1. To sign up for an ADC membership, point your web browser to http://developer.apple.com/iphone/. Click the Register link in the upper-right corner.

    You access the iPhone Dev Center using an Apple ID. If you have an iTunes account or have made a purchase from the Apple Store, you already have one set up. Go ahead and use it when you create your developer account and skip to step 4.

    Note

    If you’ve been using your Apple ID for personal stuff like iTunes and a MobileMe family photo gallery, you may want to create a new Apple ID for your developer account. Having a separate Apple ID used solely for business purposes can help you avoid accounting and reporting issues. Please see Chapter 8 to see how your developer account and iTunes Connect affect your business.

  2. If you’re setting up a new Apple ID, type your name, contact information, and security questions for password retrieval.

  3. Turn on the checkbox to accept the licensing agreement and click Continue.

    In a few minutes, Apple will send you an email to verify the account.

  4. Click the Email Verification link, and enter the code contained in the message to complete the account setup.

Once you set up your account and log in, you see a lot of new content available from the iPhone Dev Center. You have access to great resources like the Getting Started Videos, Coding How-To’s, and Sample Code. Right now, turn your attention to the download for the iPhone SDK.

  1. Click the Downloads link, and you see a selection of links at the bottom of the page, as shown in Figure 1-3.

    As new versions of the iPhone SDK are released, these links will be updated. Pick the most recent release that matches your version of Mac OS X. At the time of this writing, it’s “iPhone SDK 3.1.3 with Xcode 3.2.1”.

    The iPhone SDK is a large download: Its size can range from several hundred megabytes to over 2 GB. Be patient as it downloads from your web browser, is verified, and mounted: It’s going to take a while.

    Once it’s finished, you have a .dmg disk image in your Downloads folder and a new iPhone SDK disk on your desktop, as shown in Figure 1-4.

You find the links to download the iPhone SDK toward the bottom of the iPhone Dev Center page. The links in this picture are for version 3.1.3, but these will change as Apple updates the SDK. You can click the Read Me links to see what’s new in the release.
Figure 1-3. You find the links to download the iPhone SDK toward the bottom of the iPhone Dev Center page. The links in this picture are for version 3.1.3, but these will change as Apple updates the SDK. You can click the Read Me links to see what’s new in the release.
After a successful download, this disk image appears on your desktop. Its name, which will vary with each new release, will begin with “iphone_sdk” followed by the version number and the “.dmg"extension. Launch the installer by double-clicking the box icon. The PDF file contains information about the release that you can read while the installation takes place.
Figure 1-4. After a successful download, this disk image appears on your desktop. Its name, which will vary with each new release, will begin with “iphone_sdk” followed by the version number and the “.dmg"extension. Launch the installer by double-clicking the box icon. The PDF file contains information about the release that you can read while the installation takes place.

Once you have the iPhone SDK disk image, you can begin the installation:

  1. Double-click the “iPhone SDK” file to start the installation process. It’s the brown and gold box icon.

  2. Click Continue on the welcome and license agreement screens.

  3. Click Agree to accept the license.

  4. On the Install screen, click Continue to install the standard packages, and then click Install to start the installation process.

  5. If required, enter your password so system files can be modified.

  6. It’s also a good idea to quit iTunes at this point to avoid a dialog box that pauses the install.

    Depending on your Mac’s speed and the size of the download, the installation process can take anywhere from half an hour to several hours. When the installation is finished, you’ll see a green checkmark and can click Close to finish. At this point you can eject the iPhone SDK disk, but keep the .dmg file around as a backup.

Note

As with Xcode, Apple updates the iPhone SDK regularly. You’ll need to return to this iPhone Dev Center periodically to install the latest version of the SDK. Apple typically releases a new version in conjunction with a new iPhone firmware release.

What Lies Ahead for the SDK?

The iPhone SDK is constantly evolving as Apple fixes bugs and adds new features. You’ll want to update your development environment to keep up with the latest changes. Apple updates the iPhone SDK in two different ways. The first, and simplest, is a maintenance release. These releases just fix bugs in the firmware and don’t introduce any new features. In most cases, you won’t need to make any changes to your application.

Apple provides maintenance releases of the SDK to developers on the same day that it makes the firmware available to customers. These releases have a three-part version number like 2.2.1 and 3.1.3. As soon as you install the new firmware on your device, you need to update the iPhone SDK so you can install and debug your applications from Xcode. If you don’t, you’ll see warnings that the tools don’t support the device’s firmware version.

When Apple makes more substantial firmware changes that will affect developer software, either by adding new features or changing existing ones, it posts a beta version of the iPhone SDK on the iPhone Dev Center. Only developers who have paid to join the iPhone Developer Program have access to these advance releases. (Objective-C: The Nuts and Bolts for Your iPhone App explains how to enroll in this developer program.) These betas are for major releases, such as 3.0 or 4.0, or revisions like 3.1. Apple typically starts the beta release cycle three or four months prior to a general public release. Once the cycle starts, it puts out a new SDK (called Beta 1, Beta 2, and so on) every couple of weeks. These beta releases usually also include a new version of Xcode with improvements and support for the new iPhone OS, along with new firmware.

With early access to the new SDK, you can build and run your application with the new iPhone firmware. If you’ve been careful to use only documented features and APIs, you shouldn’t have many issues to deal with: Apple’s engineers are very good at maintaining compatibility with published interfaces. You may see deprecation warnings as you compile, but those are usually simple to fix. It’s more likely that you’ll spend the beta test period learning about new features and testing them out in your application.

There are a couple caveats to keep in mind when installing a beta version of the iPhone SDK. First, you can’t use the beta tools to submit an application to the App Store. Luckily, you can install multiple versions of Xcode on your hard drive. To install the tools in a separate location, follow these steps:

  1. Quit the iPhone Simulator if it’s running.

    If you skip this step, the installation process will hang indefinitely, and you’ll need to quit the Installer and start over.

  2. Double-click the iPhone SDK icon in the disk image to start the installation process. Agree to the licenses and choose a destination hard drive.

    You see a list of packages to install. In the second column, Developer is set as the Location. You need to change the location for the beta release.

  3. Click Developer and then select Other from the pop-up menu (see Figure 1-5).

    A dialog box opens for you to select a folder.

    You can choose a custom installation location for the iPhone SDK. Since you can’t use beta releases of the iPhone SDK to build your application for the App Store, you’ll need to keep two versions of the tools on your hard drive. During the install process, click the Developer folder icon and select Other to choose the location for the beta version.
    Figure 1-5. You can choose a custom installation location for the iPhone SDK. Since you can’t use beta releases of the iPhone SDK to build your application for the App Store, you’ll need to keep two versions of the tools on your hard drive. During the install process, click the Developer folder icon and select Other to choose the location for the beta version.
  4. Navigate to the root of your hard drive by selecting its name from the list of DEVICES. Then click the New Folder button and type DeveloperBeta. Click Create to create the folder.

  5. Select Choose to use the DeveloperBeta folder for the installation.

    After you return to the main installation window, you’ll see DeveloperBeta as the Location.

  6. To use the beta, launch Xcode and other tools from the new Hard Drive→DeveloperBeta→Applications folder.

Now for the second caveat: the beta release is Apple Confidential Information and is covered by a Non-Disclosure Agreement (NDA). These big legal words mean that you can’t talk about it in public. You can discuss the new SDK only on the Apple Developer Forums (http://devforums.apple.com). You can connect with other developers who are doing the same thing you are: learning about a new release by asking questions and sharing discoveries. Apple engineers also contribute to the discussion.

The NDA also means that you won’t find any books or other media to help you understand the changes. The only information about the beta release comes from Apple itself and is posted on the iPhone Dev Center. Typically there’s a “What’s New” document, release notes, and a list of API differences. Read each of these documents fully: it’s a great way to pass the time when you’re waiting for several gigabytes of SDK to download!

Another source of information is Apple’s annual developer conference, WWDC. Beta releases often coincide with this weeklong conference so everyone can discuss new features in detail. The conference takes place during the summer in San Francisco: it’s a great opportunity to meet your fellow developers and learn lots of new things.

Exploring Your New Tools

Your Mac is now set up to create iPhone applications, so you’re ready to start making your first one. The best part is that you’re not going to write any code. How can you develop without writing code? It’s possible with the timesaving power of Xcode templates and Interface Builder.

If you’re an experienced developer, this way of working can present a challenge. If you’re used to working in Visual Studio, Eclipse, or some other environment, your first encounter with Xcode can be a bit daunting. Besides working on a new operating system, you’re also going to be dealing with new project layouts, keyboard shortcuts, and preferences. Don’t worry, all of the tools you’re used to having are still there, it’s just a matter of time before you become comfortable using Xcode’s version of them.

In this section, you’ll go through all of the phases of creating an iPhone app, from creating a project file with Xcode to running it in the iPhone Simulator. You’ll also take a peek at the Interface Builder application that lets you modify the user interface.

Every Flashlight Needs a Parts List

The first phase of creating an iPhone app is setting up a Project file. This file keeps track of the information Xcode uses to build your application. It’s where you manage your source code, user interfaces, frameworks, and libraries. Think of it as a parts list for your application.

  1. In your Hard Drive→Developer→Applications folder, double-click the Xcode icon to start the application. (It’s at the bottom of the list.)

    The tricky part is that Xcode isn’t in your normal Applications folder. The installer puts it in the Developer→Applications folder. To make it easier to return to Xcode later, store its icon in your Dock.

  2. In the Dock, Control-click the icon and choose Options→Keep in Dock.

    From then on, you can launch Xcode by simply clicking the Dock icon.

    Once Xcode is running, you’ll see its Welcome window, as shown in Figure 1-6.

    Tip

    If you close the Welcome window by accident, you can reopen it by choosing Help→Welcome to Xcode.

    The Xcode launch window. As you create new projects with Xcode, you see them listed on the right. Click the “Create a new Xcode project” button to start your first iPhone application. The “Getting started with Xcode” button opens the documentation viewer and displays a helpful overview of Xcode. The last button is a convenient link to the Dev Centers for the Mac and iPhone.
    Figure 1-6. The Xcode launch window. As you create new projects with Xcode, you see them listed on the right. Click the “Create a new Xcode project” button to start your first iPhone application. The “Getting started with Xcode” button opens the documentation viewer and displays a helpful overview of Xcode. The last button is a convenient link to the Dev Centers for the Mac and iPhone.
  3. Click the big “Create a new Xcode project” button.

    The New Project window opens (Figure 1-7), showing you a choice of template categories. In Xcode, a template is a predefined set of source code files, libraries, frameworks, and user interface elements that you use to create different styles of applications.

    The Xcode New Project window lists all of the templates you can use to get a quick start. When you’re starting out with a new application, select the template that best describes the style of user interface you want. When selected, each template displays a short description. Some templates even include options, like the one shown here to “Use Core Data for database storage”.
    Figure 1-7. The Xcode New Project window lists all of the templates you can use to get a quick start. When you’re starting out with a new application, select the template that best describes the style of user interface you want. When selected, each template displays a short description. Some templates even include options, like the one shown here to “Use Core Data for database storage”.
  4. Since you’re creating an iPhone application, under the iPhone OS group in the upper-left corner, choose Application and take a look at the available templates.

    Your choices come in the following categories:

    • Navigation-based Application. These applications have a “drill-down” style interface, like the iPhone Mail application.

    • OpenGL ES Application. Games that draw objects in a 3-D space use this template.

    • Tab Bar Application. This style of application uses a tab bar at the bottom of the screen to switch views. Apple’s iPod application is a great example of this user interface style.

    • Utility Application. These applications generally present a simple interface, with a front view containing information and a back view for configuring the information. The built-in Weather app uses this metaphor.

    • View- and Window-based Applications. Turn to these templates when your application combines elements of the previous four styles. Think of them as bare-bones templates that you can customize to your own needs.

    For your Flashlight app, you’re going to use the Window-based Application template. Since the application only uses a single window, this basic template is all you need. A nice side effect of using this customizable template is that it creates fewer files for the project. In effect, you have a shorter, simpler parts list.

  5. Click Window-based Application and then click Choose. Leave the Use Core Data checkbox unchecked since a flashlight doesn’t need a database.

    A save file dialog box appears so you can indicate a name and location for your project’s folder (Figure 1-8).

    For the Flashlight project, tell Xcode to create a folder named Flashlight inside your Documents folder.
    Figure 1-8. For the Flashlight project, tell Xcode to create a folder named Flashlight inside your Documents folder.
  6. Type Flashlight for the project name, and choose the Documents folder from the bottom pop-up menu.

    As shown in Figure 1-9 the folder you’ve just created in the Finder contains everything you need to build your application, including the main project file Flashlight.xcodeproj.

    When you create a project with Xcode, it creates a folder of files used to build your application. The most important one is the .xcodeproj file—you can double-click this file to open the project in Xcode. Also, since you’re creating a window-based app, Xcode starts you out with a file called MainWindow.xib. You’ll learn more about the other files and folders in upcoming chapters.
    Figure 1-9. When you create a project with Xcode, it creates a folder of files used to build your application. The most important one is the .xcodeproj file—you can double-click this file to open the project in Xcode. Also, since you’re creating a window-based app, Xcode starts you out with a file called MainWindow.xib. You’ll learn more about the other files and folders in upcoming chapters.

    Xcode creates this project folder behind the scenes. You may never in your Xcode career interact directly with files or folders. Instead, you can rely on Xcode to manage everything for you. But you still need to know where the folder is so you can back up your work.

Tip

As you get more advanced with Xcode, you may want to put your projects in folders of their own within your Home folder. Many developers create a Projects folder that contains nothing but their Xcode folders. Just as the Pictures, Movies, and Music folders make it easier to manage your media, a Projects folder makes it easier to manage your software.

After Xcode finishes creating the new project, it displays the files in a project window, as shown in Figure 1-10.

The Xcode project window. On the left are the project’s groups and files, and on the right is the source code editor. Although the yellow group icons look like folders, they’re not the same as the blue ones you see in the Finder. You can rename the Classes group and not affect the folders on disk. Likewise, you won’t find a Resources folder in the Finder, but the group is a great way to organize files that aren’t source code.
Figure 1-10. The Xcode project window. On the left are the project’s groups and files, and on the right is the source code editor. Although the yellow group icons look like folders, they’re not the same as the blue ones you see in the Finder. You can rename the Classes group and not affect the folders on disk. Likewise, you won’t find a Resources folder in the Finder, but the group is a great way to organize files that aren’t source code.

The Groups & Files panel on the left side of the project window lists the individual files that make up your application. To go back to the parts list metaphor, each group contains parts of a similar type. Here are a few of the most important groups:

  • Classes. The files in this group contain your project’s actual source code.

  • Resources. User interface files, graphics, and application configuration files all fall under the Resources group.

  • Frameworks. These files contain tools that the iPhone SDK uses.

The editor part of the window (the big white area in the lower right) shows the code that runs when the application finishes launching. In this simple example, the code makes a window object visible and able to respond to taps.

You’ll learn more about these important groups and the source code in the next chapter. Remember: Your goal in this chapter is to build an app without writing any code!

Some Assembly Required

You’ve gathered all the parts, and now it’s time to assemble them. Unlike toys on Christmas Eve, Xcode projects are easy to put together. Thanks to the template, all you have to do is initiate the Build command, and Xcode takes all of the source code, resources, and frameworks and combines them into an executable file that can run on the iPhone.

Make sure that the pop-up menu in the upper-left corner of your project window is set to Simulator and Debug (the exact wording on the menu will change depending on which version of the iPhone SDK you’re using). Then choose Build→Build, as shown in Figure 1-11.

After a short wait, you should see “Build succeeded” in the status bar, at lower left.

Note

Xcode’s status bar, which runs along the bottom of the window, is an important information source. As you perform various tasks, this area keeps you posted on their progress. It’s the first place you should look when you’re wondering what’s going on.

Building your iPhone application. Note that the Overview menu is set to the Simulator and Debug. The keyboard combination ⌘-B is a handy shortcut to build the project after you’ve made a change to the source code.
Figure 1-11. Building your iPhone application. Note that the Overview menu is set to the Simulator and Debug. The keyboard combination ⌘-B is a handy shortcut to build the project after you’ve made a change to the source code.

Once you’ve built your app, you can run it on your iPhone. Or better yet, run it on your Mac. That’s right. If you’re like most developers, you’ll run your iPhone apps on the Mac about 90 percent of the time. Apps launch faster on the Mac than on the iPhone, and they’re easier to debug on the Mac when problems occur.

Note

Don’t discount that last 10 percent. Running your app on an actual device is extremely important: You’ll learn why when design issues are discussed in Chapter 4.

Taking It for a Run on Your Mac

When you develop an iPhone app, you’ll probably run it on your Mac to test and debug it before it ever gets near an iPhone.

So how do you get an iPhone onto your Mac? It’s easy: Make sure Simulator is selected in the Overview menu, and choose Run→Run. Since you have Simulator selected, Xcode uses a simulation of the iPhone to run your app.

Keep an eye down on the status bar. You’ll see “Installing Flashlight in Simulator” displayed, and eventually, “Flashlight launched”. Soon after, a giant iPhone appears on your desktop, and it’s running your Flashlight application (Figure 1-12). Congratulations!

In the iPhone Simulator, the image on the left shows the application running, and the one on the right shows the application’s icon on the home screen. It won’t fit in your pocket, but the simulator acts just like a real, live iPhone.
Figure 1-12. In the iPhone Simulator, the image on the left shows the application running, and the one on the right shows the application’s icon on the home screen. It won’t fit in your pocket, but the simulator acts just like a real, live iPhone.

Tip

You can do everything you’ve done in this section and the previous one with a single keystroke. Pressing ⌘-Enter builds and runs your application (in the simulator) in one step. When you get into the thick of iPhone app development, you’ll be pressing these keys in your sleep.

So what does this giant iPhone do? It’s called the iPhone Simulator, and it behaves like the device in your pocket, except:

  • It’s hundreds of times faster.

  • It has as much memory as your Mac.

  • The network is much more reliable.

  • It has a larger display.

  • It doesn’t sync with iTunes over a USB cable.

  • Touching the simulator screen has no effect.

In reality, this big phone sitting on your desktop has very different hardware specifications than the one you’re used to. But once you get used to keeping your fingers off the screen, you’ll end up loving the simulator. It makes your life as a developer so much easier because it does one important thing: it lets you test your code without having an iPhone plugged into your Mac. The box on Simulating Reality shows you how to get the most out of this important tool.

When you click the Home button, you see a screen with the applications installed by Xcode. Since you only have one at this point, all you’ll see is the Flashlight app. Drag your mouse to swipe between the pages of applications. Many of the applications you’re used to seeing on your iPhone have gone missing, but you’ll still be able to use Photos, Contacts, Settings, and Safari while testing. Clicking an app’s icon launches it in the Simulator just as it would on a real device.

Tip

The Safari icon in the simulator’s tray is very helpful for testing how websites will look on the iPhone. When you start promoting your application, you’ll want to use the simulator to check your product pages on a mobile device.

Revision Decision

So now that you have a running application, you notice that the white light makes it look like every other flashlight app in iTunes. You need a better color for the light—a way to stand out in the crowd. How are you going to do that without breaking the “no code” rule? The answer is simple: Interface Builder.

Xcode works hand-in-hand with Interface Builder to create your app’s user interface (UI). You create objects like windows and buttons with this tool and then drop them into your code. When you created the project from a template, Xcode created a file containing these objects automatically.

To get an idea of how easy this method is, open your Flashlight app’s UI. From the main project window, open the Resources group by clicking the disclosure triangle, and double-click the MainWindow.xib file. Interface Builder opens (you’ll see it bouncing in the Dock). Once it’s open, you’re ready to start working on your UI (Figure 1-13).

Interface Builder and its many windows take up much of your display. In the middle are the .xib document (A) and the window displayed in the iPhone app (B). To the left is the library of user interface elements where buttons, windows, and other user interface components can be accessed (C). A property inspector for the objects in the interface is displayed on the right (D).
Figure 1-13. Interface Builder and its many windows take up much of your display. In the middle are the .xib document (A) and the window displayed in the iPhone app (B). To the left is the library of user interface elements where buttons, windows, and other user interface components can be accessed (C). A property inspector for the objects in the interface is displayed on the right (D).

The main document window is MainWindow.xib. To change the View Mode, use the three buttons in the upper-left corner. The buttons work much like they do in the Finder: the leftmost displays icons, the center a list, and the right one shows columns. The list view (which you can see in Figure 1-13), is more compact and easier to read (especially with longer names).

The Library window, at far left, contains a list of all the interface objects you can use in your design. You’ll learn about these objects in detail in Chapter 3.

To start modifying the Flashlight’s UI, double-click the Window item in the list in MainWindow.xib. The app’s window opens to the right of the main document window and gives you the opportunity to modify the color. Start thinking about your favorite color!

At the far right is the Property Inspector. You’ll use this window often as you refine your UI. Currently, it’s showing Window Attributes because you’re working with a window. The inspector is split into four main sections, which you choose from the tabs at the top. Each section lets you adjust various aspects of each object:

  • Attributes. The object’s particular settings. Behind the scenes, these items set properties and attributes for the object to save you from writing code (although you can still write the code manually if necessary).

  • Connections. The connections define how your source code accesses the UI objects. For the Flashlight app, you’ll see that “window” is connected to “Flashlight App Delegate”.

  • Size. This panel lets you define the selected object’s geometry. For example, the window’s width and height is 320 x 480 (the size of the iPhone’s screen).

  • Identity. This view shows what kind of object is defined. The app’s window has a class of UIWindow.

Tip

To manage Interface Builder’s many windows, you’ll find that keyboard shortcuts make short work of finding the information you need. You can access the main document window by pressing ⌘-0, and you can switch to each section of the inspector with ⌘-1 through ⌘-4. Use Shift-⌘-L to bring up the Library window.

If you don’t fully understand what’s going on here, don’t worry. You’ll learn everything there is to know about classes, objects, and instances in the next chapter.

Note

If you’ve used other development environments, leave your preconceptions about how Interface Builder works at the door. Instead of automatically generating code to display the UI from resources, the .xib file contains an XML representation of the actual object instances and hierarchy. When you load a file, Interface Builder creates an object graph in memory and connects it to the instance variables that you’ve chosen. We’ll go into greater detail about how this works in Chapter 3.

Now that you’ve had a little tour of Interface Builder, you can modify your flashlight’s UI. Make sure that Window is selected in the MainWindow.xib document and that the Property Inspector is on the first panel (for modifying attributes).

Have you picked your favorite color yet? Time to change the background color of the window by clicking the Background color picker. Then click a nice color for the light in the color wheel (Figure 1-14). A soothing shade of yellow, for example.

The window preview updates immediately as you select colors. As your UI develops, you’ll really appreciate this quick feedback: you don’t have to build your app to see how a change will look, and that saves a lot of time.

Choose File→Save to update your MainWindow.xib file. Get in the habit of saving after tweaking your UI, and remember to check for the “modified” dot in the document’s close box if your changes aren’t working right. The last thing you want is to waste time debugging a user interface bug because you forgot to save the file.

Now switch back to the Xcode project window for the Flashlight, and select Build→Build and Run.

Note

If you see a window pop up with a warning to Stop Executable, just click OK. Xcode is just reminding you that you already have an application running in the simulator.

Changing your application window’s background color involves clicking a color wheel. After selecting the Window in the MainWindow.xib document (A), you view the attributes (B), which include a background color. Clicking in the well (C) brings up a color wheel (D) where you can select a new color with your mouse. As you select new colors, you get immediate feedback.
Figure 1-14. Changing your application window’s background color involves clicking a color wheel. After selecting the Window in the MainWindow.xib document (A), you view the attributes (B), which include a background color. Clicking in the well (C) brings up a color wheel (D) where you can select a new color with your mouse. As you select new colors, you get immediate feedback.

You’ve just made your first iPhone application and customized it to fit your own tastes. Well done!

Now that the journey is complete, read on to look at some details for things you saw along the way.

Get iPhone App Development: The Missing Manual now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.