Now that Apple has started selling the iPad and the NDA lifted on the iPhone 3.2 SDK, it is time for developers to start developing iPad applications. And for a large number of developers, developing iPad applications mean porting their existing applications to the iPad platform. Though the iPad is also running the iPhone OS, there are some subtle differences that developers need to look out for when porting their applications over to the new device. This article examines the various ways in which you can port your existing iPhone apps to the iPad.

Method 1: Supporting Both the iPhone and iPad Platforms

Out of the box, the iPad will run your existing iPhone apps using the same screen size that is available on the iPhone and iPod touch — 320 x 480 pixels. Your applications will utilize only a portion of the screen. However, applications running in this mode do not do justice to the much bigger screen estate afforded by the iPad. Clearly, this is an interim solution that Apple is adopting in order to buy time for developers to port their applications UI to the much bigger iPad screen.

The easiest way for you to ensure that your iPhone applications run as an iPad application (that is, full screen) is to modify the device target setting in your Xcode application. The following steps show you how.

Using Xcode, create a new View-based Application (iPhone) project (see Figure 1).

Figure 1. Creating a View-based Application for iPhone.

Name the project MyiPhoneApp. Double-click on the MyiPhoneAppViewController.xib file to edit it in Interface Builder. Populate the View window with the following views (see also Figure 2):

* Label
* TextField
* Button

Figure 2. Populating the View window with views.

Back in Xcode, press Command-R to test the application on the iPhone Simulator. You should see the screen as shown in Figure 3.

Figure 3. Running the application on the iPhone Simulator.

In Xcode, change the simulator to Simulator – 3.2 | Debug and press Command-R again. This time, the application will be shown running in the iPad Simulator, running as an iPhone application (see Figure 4). This is the default behavior of iPhone applications running on the iPad.

Figure 4. Running the application on the iPad Simulator.

Next, in Xcode, expand on the Targets item and select the MyiPhoneApp item. Click the Info (i) button (located at the top of the toolbar) to display its Info page (see Figure 5). Click on the Build tab and scroll down the list. Under the Deployment section, select “iPhone/iPad” for the Targeted Device Family setting.

Figure 5. Changing the Targeted Device Family setting of the project to iPhone/iPad.

Press Command-R to test the application on the simulator again. This time, your application will run natively as an iPad application (see Figure 6).

Figure 6. Running the application as an iPad application.

Notice that the UI of the application is exactly the same as that on the iPhone. It is your responsibility to repurpose your UI when the application is running on the iPad. You would need to programmatically realign your views when your application detects that it is running on an iPad.

Detecting the Platform Programmatically

In order to repurpose your UI depending on the device it is running on, it is important to be able to programmatically detect if your application is running as an iPhone/iPod touch or iPad application. The following code shows you how.

In the MyiPhoneAppViewController.m file, code the following:

- (void)viewDidLoad {    #if (__IPHONE_OS_VERSION_MAX_ALLOWED >= 30200)    NSString *str;    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {        str = [NSString stringWithString:@"Running as an iPad application"];    } else {        str = [NSString stringWithString:                  @"Running as an iPhone/iPod touch application"];    }    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Platform"                                                    message:str                                                   delegate:nil                                          cancelButtonTitle:@"OK"                                           otherButtonTitles:nil];    [alert show];    [alert release];         #endif            [super viewDidLoad];}

The above code includes a conditional compilation directive to indicate that if the application is compiled against the minimum iPhone OS version of 3.2, then it will include a block of code to programmatically detect the type of application it is currently running as.

Press Command-R to test the application on the Simulator. Observe the message displayed as shown in Figure 7.

Figure 7. Displaying the platform it is running as.

If you now go back to Xcode and choose the Simulator - 3.1.3 | Debug item and press Command-R again, the iPhone Simulator will appear and there will be no alert displayed. This is because the application will now be compiled with the iPhone OS 3.1.3 target and hence the compiler will omit the block of code enclosed using the #if-#endif block.

Next, back in Xcode select "iPhone" for the Targeted Device Family setting (as shown in the previous section) and choose the Simulator - 3.2 | Debug item. Press Command-R and you will notice that the application now runs on the iPad Simulator as an iPhone application. Figure 8 shows the alert that it will display.

Figure 8. Running as an iPhone application on the iPad Simulator

Method 2: Creating Universal Applications

The previous method shows how you can modify the Targeted Device Family setting to create a single application that runs on both the iPhone and iPad. The challenge is adapting the UI of the application for each platform - you have to programmatically detect the device the application is running on and then modify the layout of the UI dynamically.

Apple recommends that you create a Universal application, one that targets both the iPhone and the iPad, with separate XIB files representing the UI for each platform. The following steps show you how you can create a Universal application.

Using Xcode, create a View-based Application (iPhone) project and name it Universal. Double-click on the UniversalViewController.xib file to edit it in Interface Builder.

Add a Label view to the View window and label as it as shown in Figure 9.

Figure 9. Populating the View window.

Press Command-R to test the application on the iPhone Simulator. You will see the application running on the iPhone Simulator (see Figure 10).

Figure 10. Running as an iPhone application.

Back in Xcode, expand on the Targets item and select the Universal item. Select Project'Upgrade Current Target for iPad… (see Figure 11).

Figure 11. Upgrading the project to iPad in Xcode.

In the dialog that appears, check the One Universal application option and click OK (see Figure 12).

Figure 12. Selecting the Universal application option

You will now see a folder named Resources-iPad containing an XIB file named MainWindow-iPad.xib (see Figure 13).

Figure 13. Examining the resources created by Xcode

Xcode will automatically create a copy of the MainWindow.xib and name it as MainWindow-iPad. By default, both MainWindow.xib and MainWindow-iPad will automatically load up UniversalViewController.xib when the application is started.

In addition, Xcode also modified the Targeted Device Family setting (located under the Deployment section of your target in Xcode) to "iPhone/iPad".

It is your responsibility to create separate XIB files for the user interface in iPhone and iPad.

Examine the Universal-Info.plist file located within the Resources folder. You will see that there is a key named Main nib file base name (iPad) with its value set to MainWindow-iPad (see Figure 14).

Figure 14. The new key in the plist file.

When the application is loaded in an iPhone or iPod touch, the MainWindow.xib file will be loaded. When the application is loaded in an iPad, the MainWindow-iPad.xib file will be loaded.

Right-click on the Resources-iPad folder and select Add'New File… (see Figure 15).

Figure 15. Adding new files to the Resources-iPad folder.

Select the Cocoa Touch Class item and then select the UIViewController subclass template (see Figure 16). Make sure that the Targeted for iPad and With XIB for user interface options are checked. Click Next.

Figure 16. Selecting the UIViewController subclass template.

Name the class as iPadUniversalViewController.m. The Resources-iPad folder should now look like Figure 17.

Figure 17. Examining the files added by Xcode.

Notice that there is now an XIB file together with its accompanying view controller class (the .h and .m files). Strictly speaking, the additional view controller class is not needed. The new XIB file (iPadUniversalViewController.xib) can be connected to the existing view controllers (UniversalViewController), which is currently connected to UniverslViewController.xib. Essentially, the two XIB files can be connected to the same view controller class.

Double-click on the iPadUniversalViewController.xib file to edit it in Interface Builder.

Populate the View window with the Label view and set it to display the string as shown in Figure 18.

Figure 18. Populating the View window.

Double-click the MainWindow-iPad.xib file to edit it in Interface Builder.

Select the "I Pad Universal View Controller" item and view its Identity Inspector window. Set its Class to iPadUniversalViewController (see Figure 19).

Figure 19. Configuring the MainWindow-iPad.xib to load the iPadUniversalViewController class.

With the same view controller selected, view its Attributes Inspector window and set its NIB Name attribute to iPadUniversalViewController (see Figure 20).

Figure 20. Changing the NIB name for the view controller.

In Xcode, select Simulator - 3.2 | Debug and press Command-R to test the application on the iPad Simulator. You will see the application as shown in Figure 21.

Figure 21. Running the application in the iPad Simulator.

If you now select the Simulator - 3.1.3 | Debug and press Command-R to test the application on the iPhone Simulator, you should see the application as shown in Figure 22.

Figure 22. Running the application in the iPhone Simulator.

The important thing about a Universal application is that you will need to create separate XIB files for the different platform - one for iPhone and one for iPad. Once this is done, the application itself will automatically detect whether it is running on the iPhone or the iPad and load the appropriate XIB file.

The end result of using this approach is that you only have one executable for your application.

Summary

In this article, you have seen how to port an existing iPhone application to support both the iPhone and the iPad. In general, the Universal application approach is the recommended one as it allows you to maintain just one code base that can target multiple platforms.