Learning iPhone Programming (2010)
Chapter 13. Other Native Platforms
If you want to build applications for the iPhone and the iPod touch that will be sold on the App Store, alternatives are available to the traditional Objective-C and Cocoa Touch route. Development platforms now exist allowing JavaScript and C# developers to get direct access to the iPhone’s hardware features, such as the accelerometer.
PhoneGap
PhoneGap, developed by Nitobi, is an open source development platform for building cross-platform mobile applications with JavaScript.
On the iPhone, it works by providing a prebuilt library containing Objective-C classes that wrap the iPhone’s native capabilities (e.g., vibration and accelerometer support) and exposes these capabilities to JavaScript along with an Xcode project template that makes use of the library. You can then compile your application as a hybrid of native Objective-C and JavaScript inside Xcode.
The platform is device-agnostic, allowing you to build an application for the iPhone, Android, and BlackBerry devices simultaneously. Developing applications using the PhoneGap framework is a reasonable alternative to building all-native applications in Objective-C.
In the past, submitting to the App Store applications built around the PhoneGap platform was problematic. However, since the 0.8.0 release, this has been resolved and Apple has approved PhoneGap for building applications intended for the store.
Note
Since the 0.8.0 release, the PhoneGap platform has embedded a version tag into the compiled iPhone application bundle to allow Apple to identify the version used in your application build during the application review process.
If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the hardware features on the iPhone, Android, and BlackBerry devices, you may want to take a look at the PhoneGap platform.
Note
If you’re interested in developing native iPhone applications using HTML and JavaScript, at least two alternatives to PhoneGap are now available: Appcelerator and Rhomobile. However, anecdotally at least, PhoneGap is the most well known of the three platforms.
Download and Installation
The easiest way to make use of the PhoneGap platform on the iPhone is to build the PhoneGapLib static library for iPhone. This will allow you to create PhoneGap-based iPhone application projects directly using an Xcode project template file.
You can download the latest version of the PhoneGap code, which includes PhoneGapLib, either from the project’s Git repository or from the main PhoneGap website. If you’re downloading the code from the project website, you should download version 0.8.2 or later, as earlier versions do not include the PhoneGapLib library.
Warning
The PhoneGap platform, and especially the PhoneGapLib library, is under active development and installation instructions are therefore subject to change.
After downloading the source, open a terminal window, navigate to the source directory, and type make to build the PhoneGap platform. You should see something very much like the following scroll by in your terminal window:
$ cd Downloads/phonegap-phonegap-27e998e/
$ ls
total 48
drwxr-xr-x 13 aa staff 442 16 Nov 18:03 ./
drwx------+ 10 aa staff 340 18 Nov 15:27 ../
-rwxr-xr-x@ 1 aa staff 132 16 Nov 18:03 .gitignore*
-rwxr-xr-x@ 1 aa staff 3743 16 Nov 18:03 README.md*
-rwxr-xr-x@ 1 aa staff 2742 16 Nov 18:03 Rakefile*
drwxr-xr-x@ 12 aa staff 408 16 Nov 18:03 android/
drwxr-xr-x@ 10 aa staff 340 16 Nov 18:03 blackberry/
-rwxr-xr-x@ 1 aa staff 2795 16 Nov 18:03 configure*
drwxr-xr-x@ 7 aa staff 238 16 Nov 18:03 iphone/
drwxr-xr-x@ 25 aa staff 850 16 Nov 18:03 javascripts/
drwxr-xr-x@ 4 aa staff 136 16 Nov 18:03 util/
drwxr-xr-x@ 11 aa staff 374 16 Nov 18:03 winmo/
$ cd iphone
$ make
.
.
.
$
If everything looks OK at this point, you can close the terminal window. Now open the Finder and navigate to the iphone/ directory inside your PhoneGap source code folder. Inside the folder you should see a PhoneGapLibInstaller.pkg file.
Note
If you don’t see the PhoneGapLibInstaller.pkg file, you can create it manually. In the Finder, open the iphone/PhoneGapLibInstaller directory under the PhoneGap source directory. Look for the PhoneGapLibInstaller.pmdoc PackageMaker document. Double-click on this file to open it inside the package maker and click the Build and Run button in the PackageMaker toolbar.
Doing this will build the PhoneGapLib installer bundle, and save it (at least by default) in your Documents folder. If you return to your Finder window and navigate to your Documents folder, you should see a PhoneGapLib installer package file.
If you double-click on the PhoneGapLibInstaller.pkg file, you’ll start the installer application, as shown in Figure 13-1. Accept all of the defaults.
Figure 13-1. The PhoneGapLib Installer
Building a PhoneGap Project
Start Xcode and create a new project. If PhoneGap has been successfully installed, you should now see a PhoneGap project template entry under the User Templates header, as shown in Figure 13-2.
Figure 13-2. Starting a new PhoneGap project in Xcode
Start a new PhoneGap project, and you’ll see something much like Figure 13-3.
Figure 13-3. The HelloWorld PhoneGap application in Xcode
If you click the Build and Run button on the Xcode toolbar, the sample PhoneGap application will build and deploy into iPhone Simulator.
You can modify the files inside the www folder in your project and add your HTML, CSS, and JavaScript to build your own AJAX-based application.
Note
Since PhoneGap uses the file:// protocol to load your HTML into a normal UIWebView, you can load and execute JavaScript from other websites, without problems.
If you’re interested in exploring further the possibility of building iPhone applications using HTML and JavaScript, you might want to look at Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark (O’Reilly).
MonoTouch
The MonoTouch platform from Novell allows you to build C#- and .NET-based applications on the iPhone and iPod touch. It comes in two editions: Professional and Enterprise.
A license for the Professional Edition, intended for individual use, costs $399 per year. The Enterprise Edition, intended for corporate use, costs $999 per year (although you can buy a five-developer pack for $3,999 per year). Alternatively, you can download an evaluation version that enables development and testing against iPhone Simulator only.
Download and Installation
Before downloading and installing MonoTouch, you must download the latest release of Mono, the open source development platform based on the .NET Framework that allows developers to build cross-platform applications in C#. You can obtain it from http://www.mono-project.com/.
The Mono framework downloads as a disk image file containing a package installer file. Double-click on this package file to start the Mono installer, as shown in Figure 13-4.
Figure 13-4. Installing Mono
After installing the Mono framework, you need to install the MonoDevelop environment before you can install MonoTouch itself. MonoDevelop is an IDE primarily designed for C# and other .NET languages and you can download it from http://monodevelop.com/; it comes as a disk image, and installation is simply a matter of dragging and dropping the MonoDevelop.app application from the disk image to your Applications folder.
Warning
You need to use the latest MonoTouch version of MonoDevelop for Mac OS X, as it contains several fixes that are not in the mainstream version of the application. This version is linked from the MonoTouch website.
After installing Mono and MonoDevelop, you can download the trial version of the MonoTouch SDK from http://monotouch.net/DownloadTrial. MonoTouch is distributed as a package file that will automatically start the Installer when it downloads, as shown in Figure 13-5.
Figure 13-5. Installing MonoTouch
Building a MonoTouch Project
Double-click on the MonoDevelop application that you installed in your Applications folder, and you will be presented with something similar to Figure 13-6. Select File→New Solution from the MonoDevelop menu to open the New Solution window (Figure 13-7). From there, choose a new C#→iPhone→iPhone MonoTouch Project.
After entering the solution name, click the Forward button and then the Okay button to complete the setup process. You do not need to choose any of the optional project features (e.g., Packaging or Unix Integration). In the Solution pane, click the disclosure triangle next to the solution name to expand it, and then expand each subfolder in the same way, and you’ll be presented with something that looks a lot like Figure 13-8.
The default template generated by the MonoTouch SDK produces a Main.cs file that is used to start your application event loop:
using System;
using System.Collections.Generic;
using System.Linq;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace HelloWorld
{
public class Application
{
static void Main (string[] args)
{
UIApplication.Main (args);
}
}
// The name AppDelegate is referenced in the MainWindow.xib file.
public partial class AppDelegate : UIApplicationDelegate
{
// This method is invoked when the application has loaded its UI
// and its ready to run public override bool FinishedLaunching
// (UIApplication app, NSDictionary options)
{
// If you have defined a view, add it here:
// window.AddSubview (navigationController.View);
window.MakeKeyAndVisible ();
return true;
}
// This method is required in iPhoneOS 3.0
public override void OnActivated (UIApplication application)
{
}
}
}
Figure 13-6. The main MonoDevelop window
Figure 13-7. The MonoDevelop New Solution window
Figure 13-8. The Hello World application in the MonoDevelop Solution Pad
The default template also creates a MainWindow.xib.designer.cs file that MonoTouch will update each time you edit the MainWindow.xib file inside Interface Builder. This file will mirror all of the views, controllers, outlets, and actions that you add to your UI and then map those elements to C# properties that you can access from your own code. Here’s the default MainWindow.xib.designer.cs:
namespace HelloWorld
{
// Base type probably should be MonoTouch.Foundation.NSObject or subclass
[MonoTouch.Foundation.Register("AppDelegate")]
public partial class AppDelegate
{
[MonoTouch.Foundation.Connect("window")]
private MonoTouch.UIKit.UIWindow window {
get {
return ((MonoTouch.UIKit.UIWindow)(this.GetNativeField ("window")));
}
set { this.SetNativeField ("window", value); }
}
}
}
If you select Run→Run from the MonoDevelop menu bar at this point, the application will be built, compiled to native code, and started inside iPhone Simulator. You should see something very similar to Figure 13-9.
Figure 13-9. The default MonoTouch template running in iPhone Simulator
Quit from iPhone Simulator and return to the MonoDevelop environment. Double-click on the MainWindow.xib file to open the NIB file in Interface Builder. Drag a button (UIButton) and a label (UILabel) into the main view window.
Next, click on the app delegate in the MainWindow.xib file and go to the Classes segment of the multisegmented control at the top of the Library window. Click on AppDelegate in the list of objects, and then click on the Outlets segment of the multisegmented control underneath the AppDelegate object. Click on the plus sign button below the outlets list to add a new outlet. Add two new outlets, calling them “button” and “label”, respectively; see Figure 13-10.
Figure 13-10. Adding the button and label outlets
In the Connections Inspector (⌘-2), connect the button and label outlets to the button and label elements as you’ve done in other projects. Figure 13-11 shows what the finished NIB should look like (you can use the Attributes Inspector to change the appearance of the button and label).
Figure 13-11. The MainWindow.xib file in Interface Builder
Save your changes and return to the MonoDevelop environment. If you look again at the MainWindow.xib.designer.cs file, you should see that it reflects the changes you made to the view inside Interface Builder. The changes that MonoDevelop made are shown in bold:
namespace HelloWorld {
// Base type probably should be MonoTouch.Foundation.NSObject or subclass
[MonoTouch.Foundation.Register("AppDelegate")]
public partial class AppDelegate {
#pragma warning disable 0169
[MonoTouch.Foundation.Connect("window")]
private MonoTouch.UIKit.UIWindow window {
get {
return ((MonoTouch.UIKit.UIWindow)(this.GetNativeField("window")));
}
set {
this.SetNativeField("window", value);
}
}
[MonoTouch.Foundation.Connect("button")]
private MonoTouch.UIKit.UIButton button {
get {
return ((MonoTouch.UIKit.UIButton)(this.GetNativeField("button")));
}
set {
this.SetNativeField("button", value);
}
}
[MonoTouch.Foundation.Connect("label")]
private MonoTouch.UIKit.UILabel label {
get {
return ((MonoTouch.UIKit.UILabel)(this.GetNativeField("label")));
}
set {
this.SetNativeField("label", value);
}
}
}
}
Warning
You should not make any changes to the MainWindow.xib.designer.cs file, as the MonoTouch framework updates it automatically each time you edit your NIB file in Interface Builder.
Double-click on the Main.cs file to open it in the MonoTouch editor and add the following code directly before the line where the window is made visible (window.MakeKeyAndVisible ();):
button.TouchDown += delegate {
label.Text = "Pushed Button";
};
Save your modifications and select Run→Run from the MonoDevelop menu bar. Once the application has been built and been deployed into iPhone Simulator, tap the Push! button. You should see something like Figure 13-12.
Figure 13-12. The MonoTouch Hello World application
You’ve just built your first iPhone application with MonoTouch.