RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Inside the iPhone: Getting Started : Page 3

Apple has lifted its NDA and developers are now free to talk about developing for the iPhone. In this first article of this "Inside the iPhone" series, you'll get familiar with the SDK by building a simple application and get a preliminary taste of what it's like to work with the mysterious Object-C.

Building the UI of Your iPhone Application Using Interface Builder
At this point, the project you've created has no UI. To see this, simply press Command-R (or select Run→Run) and your application will be deployed to the included iPhone Simulator. Figure 4 shows the blank screen displayed on the simulator.

Obviously, this is not very useful. So, add some controls to the UI of your application. Examining the list of files in your project, you'll notice two files with the .xib extension: main.xib and HelloDevXViewController.xib. Files with .xib extensions are basically XML files containing the UI definitions of an application. You can edit .xib files by modifying their XML content manually or more easily (and more sanely) by using Interface Builder. Interface Builder comes as part of the iPhone SDK and it allows you to build the UI of an iPhone (and Mac) applications by using drag-and-drop.

Figure 4. Blank Screen: Testing the application on the iPhone Simulator.
Figure 5. Build Your UI: Using Interface Builder to build the UI of your iPhone application.

Double-click on the HelloDevXViewController.xib file to launch Interface Builder. Figure 5 shows Interface Builder displaying the content of HelloDevXViewController.xib (which is empty at this moment). As you can see, the Library window shows all the various controls that you can add to the UI of your iPhone application. The View window shows the graphical layout of your UI.

Now, drag and drop a Label control onto the UI. Once the Label is added, select it and click Tools→Inspector (see Figure 6). Click on the Attributes tab and enter the text "Hello, DevX!" Also, modify the label's layout to center alignment.

Figure 6. The Inspector Tool: Editing the attributes of the Label control.
Figure 7. Editing Your Form: Editing the attributes of the Round Rect Button control.

Next, add a Text Field control to the form, followed by a Round Rect Button control. Modify the attribute of the Round Rect Button control (Figure 7) by setting its Title to Click Me!

Save the HelloDevXViewController.xib file by pressing Command-S. Back in Xcode, run the application again by pressing Command-R. The iPhone Simulator will now display the modified UI (see Figure 8).

Tap on the Text Field control and watch the keyboard automatically appear (see Figure 9).

Figure 8. Your UI, So Far: The UI now has some controls.
Figure 9. Invoke the Keyboard: Tapping on the Text Field control invokes the keyboard automatically.

Press the Home button on the iPhone Simulator and you'll notice that your application has been installed on the simulator (see Figure 10). To go back to the application, simply tap on the HelloDevX icon again.

Author's Note: Only one application can run on the iPhone at any time (the only exception is some built-in applications by Apple). Hence, when you press the Home button on your iPhone, your application will exit. Tapping on an application icon will start the application all over again.

The iPhone Simulator also supports changes in view orientation. To change the view to landscape mode, press the Command-Right Arrow key combination. Press Command-Left arrow key to change back to portrait mode.

Figure 10. Finis! The application is installed in the simulator.

Notice that your application did not respond to changes in view orientation. You need to modify your code so that when the view orientation changes, it can react to it.

In Xcode, edit the HelloDevXViewController.m file and look for the following code segment:

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)
interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
Modify the code above to return YES, as shown below:

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)
interfaceOrientation {
    // Return YES for supported orientations
	return YES;
Run the application again. This time you will notice that your application rotates as the view orientation changes.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date