IOS Deployment

From HTML5 Builder
Jump to: navigation, search

This page covers deployment of mobile applications for iOS devices.

Export your Project

Generation

Go to Home > Deploy to Mobile, and follow these steps:

  1. On the Welcome page, choose iOS as target device, select the version you will be deploying to, and click Next.
  2. On the Application Setup page:
    1. Set Index page to the page to be displayed first when users run your application.
    2. In the Application name field, type your application’s name.
    3. In the Company name field, type the name of your company.
    4. Optionally, type your developer ID in the Apple Developer ID field.

      Note: If you plan to upload your application to the App Store, you will need to sign it, for which you will need to have an Apple Developer ID. You can find more information about the topic at developer.apple.com/support/mac/.

    5. Click Next.
  3. On the iOS Graphics page, you can setup icons and splash screens for your application.
    1. To choose an image file for a field:
      1. Click .
      2. Go to the image’s location in the filesystem, and select it.
      3. Click OK.
    2. Click Next.
  4. On the Choose Destination Folder page:

    Note: The folder you choose will be the one where all the files and folders will be generated. You might want to create a new folder for your build.

    1. Optionally, change destination folder:
      1. Click .
      2. Go to folders location, and click OK.
    2. Click Next.
  5. On the next page, wait for the build process to end and then click Finish.

Configuration

On the Export page, your PhoneGap folder will be exported to the destination folder as www, and archived as a Your Application.zip file there too. Wait for the process to finish.

There are some things you might want to do on the www folder before you continue, some of the possibilities are listed below.

Once you are ready, if you changed anything on the www folder, generate a new Your Application.zip archive with its contents (there are several tools you can use for that task).

Warning: You must create the archive from the contents of the www folder, not from the folder itself.

External Resources

Copy any external resources you included in your application, like image files, into www folder.

External Links

The Objective-C function at the end of Classes\MainViewController.m (inside the exported project directory) determines which links are opened inside the PhoneGap view (the application itself), and which ones are opened in an external web browser instead. The function gets a request, and must return either YES (inside the application) or NO (external web browser).

By default, the function looks like:

- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];
    if ([[url scheme] isEqualToString:@"http"] || [[url scheme] isEqualToString:@"https"]) {
        return YES;
    }
    else {
        return [ super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType ];
    }
}

You can modify the function to return YES or NO depending on the URL. For example, to open all external URLs in the web browser:

- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];
    if ([[url scheme] isEqualToString:@"http"] || [[url scheme] isEqualToString:@"https"]) {
        return NO;
    }
    else {
        return [ super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType ];
    }
}

Warning: If you use an MIFrame component, you must ensure YES is returned for the URL the control points to.

Screen Orientation

You can define a specific device orientation to be used for your application, so it doesn’t rotate. To do so, edit your ProjectName-Info.plist file (on the root of your project directory) and locate the following XML code:

	<key>UISupportedInterfaceOrientations~ipad</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationPortraitUpsideDown</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UISupportedInterfaceOrientations</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationPortraitUpsideDown</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>

Then, remove the screen orientations you do not want to be available.

For example, if you want your applications to be always displayed on a portrait orientation:

	<key>UISupportedInterfaceOrientations~ipad</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationPortraitUpsideDown</string>
	</array>
	<key>UISupportedInterfaceOrientations</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationPortraitUpsideDown</string>
	</array>

Build your Application

Once the PhoneGap project folder is ready, you can build the final application either remotely, using the PhoneGap Build service, or locally, using Xcode on a Mac.

See PhoneGap Build for instructions on how to build your application remotely, or continue reading to build it locally.

Local Build

Note: You must have Xcode and the iOS SDK already installed on your Mac. If you don’t, you will need to install both. For more information, visit developer.apple.com/xcode.

Once you are in your Mac OS X system, open the folder you generated with HTML5 Builder, and inside it you will find YourApplication.xcodeproj. Open it with Xcode.

Run

Once you open your project in Xcode, follow these steps to run it in a real device or a simulator:

Device drop-down list.
  1. Set the device you want to use in the device drop-down list (top left). By default you can choose an iPad simulator, an iPhone simulator, or a real iOS device.
  2. Click Run button.

With simulators, you can stop it at any time by clicking the Stop button.

App Store Package

To create a package you can upload to the App Store, follow these steps:

  1. Choose iOS Device in the device drop-down list.
  2. Go to Product > Archive. Once the build is done, you will be taken to the Organizer, in the Archive tab.
  3. Click the Share button.
  4. On the dialog that will open:
    1. Set Contents to iOS App Store Package (.ipa).
    2. Choose your developer Identity you want to use for the package.
    3. Click Next.
  5. Choose a name for your package, a destination directory, and when you are done click Save.

You can now upload that package to the App Store for distribution. For that you need an an iOS developer account, so if you have not one already, get it from developer.apple.com/programs/start/ios/ and follow the indications you will be given by Apple.

Help Resources

Video Tutorials

Frequently Encountered Problems

ld: file is universal (3 slices) but does not contain a(n) armv7s slice

In Project > Target, change Build Active Architecure Only to Yes.

Cannot build for iOS 6

It is a known PhoneGap issue that will eventually be fixed. In the meantime, check out this workaround.

Black screen in the simulator

If your iOS simulator shows a black screen and nothing else, you might need to reset the simulator settings.