Migrating an HTML5 Mobile Project to PhoneGap in MyEclipse

In MyEclipse 2015, we enhanced our hybrid mobile application development capabilities by adding PhoneGap application support. The MyEclipse 2014 HTML5 Mobile App features have been replaced by the new PhoneGap mobile features. This tutorial describes the steps for converting your HTML5 Mobile App projects to PhoneGap projects.

In this tutorial you will:

  • Create a new PhoneGap Application project
  • Copy resources from the HTML5 project to the new PhoneGap project
  • Transfer build configuration information

Note: Mobile development was removed in MyEclipse 2016. This tutorial only applies to MyEclipse 2015.

1. Create a New PhoneGap Application Project

PhoneGap Application projects are similar in structure to HTML5 Mobile App project. To get started, download and install MyEclipse 2015.

  1. Select the Mobile page on the Dashboard’s General tab, and click Create a PhoneGap Application Project.

    Getting started from the Dashboard
  2. Give your project a name similar to the HTML5 project you are migrating, and click Next.
    Naming the project
  3. Accept the default Blank Application template, and click Next.
    Selecting the blank application template
  4. If you have previously submitted your app to the Apple App Store or to Android marketplaces, enter the same application ID used when your app was submitted.

  5. If your HTML5 app accesses native device functions such as contacts or geolocation, select the plugins, and click Finish.
    Selecting plugins
  6. If prompted to open the MyEclipse Mobile perspective, click Yes.

New PhoneGap project

2. Copy Files from the HTML5 Project to the PhoneGap Project

  1. Select the resources in the www/ folder of the HTML5 app project, right-click, and select Copy.
    Copying www resources from HTML5 project
  2. Paste the resources into the www/ folder of the new PhoneGap project, overwriting existing resources.
    Pasting resources into the new project
  3. Double-click the index.html file in the PhoneGap project to open it in the editor.
  4. Change the following script reference
    <script type="text/javascript" src="rte/cordova.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
  5. Remove the following script reference.
    <script type="text/javascript" src="rte/rte.js"></script>

    Updated script references
  6. Press CTRL+S to save the file. The reference changes now support the latest and future versions of Cordova.
  7. Delete the rte/ folder in the www/ folder. It is no longer needed.

3. Copy Images from the HTML5 Project to the PhoneGap Project

  1. In the www/res folder of your PhoneGap project, create a new folder for storing your app images. You can use any folder structure you like within the res/ folder.

    Note: You are not required to store your images in the res/ folder; however, using the res/ folder prevents iOS images from being included in your Android builds and vice versa. Therefore, storing images in the res/ folder is recommended. Default application images are stored in the res/icon and screen folders.

    New folders for storing app images
  2. In the HTML5 app project, open the apps/ folder and the folders for Android and iOS. Copy the image files from the corresponding image/ folders and paste into the folders you created in the PhoneGap project.
    Images from HTML5 project to copy to new project
  3. Double-click config.xml in the PhoneGap project to open in the editor.
  4. Expand Images, and update the image references to refer to the images you copied into the project.

    Updating image references
  5. Press CTRL+S to save the config file.

4. Update Configuration Settings

HTML5 application projects included a separate buildconfig.xml file for each platform. With PhoneGap projects, there is only a single config.xml. You need to transfer the settings from the old config files to the new.

    1. In the HTML5 app project, open the apps/ folder and the folders for Android and iOS.  Each folder contains buildconfig.xml.
      Platform build config files
    2. Open the buildconfig.xml file for each platform, and transfer the information to the corresponding fields in the PhoneGap project’s config.xml. Reference the table below to map the fields correctly.

      Application IdentityEssentials
      Author: Full NameAuthor: Name
      Author: EmailAuthor: Email
      Device & OrientationPreferences
      Android screen sizesNo mapping
      iOS target devicesiOS: Target device
      Device orientationCommon: Orientation
      Web SourceN/A
      Android Services & PermissionsAndroid Permissions
      Digital SignatureN/A

      Digital signatures are now
      entered in the Mobile
      Tools preferences. This is discussed in the
      following section.

      App IconsImages
      All Android iconsAndroid/Icons
      All iOS iconsiOS/Icons
      Startup ImagesImages
      All Android startup imagesAndroid/Splashes
      All iOS startup imagesiOS/Splashes
    1. On the Essentials page of config.xml select the platforms you are supporting.

      Specifying supported platforms
    2. Press CTRL+S to save the configuration file.

5. Configure Digital Signing Information

With HTML5 application projects, digital signing information was maintained in the buildconfig.xml file for each platform. With PhoneGap projects, signing profiles in the Mobile Tools preferences store signing information. Signing profiles include corresponding digital signature details. When you build an app, you are prompted to select a signing profile (unless you are building an Android app in debug mode).

  1. Select Window>Preferences, expand Mobile Tools, and select Signing Profiles.
  2. Create a new signing profile, and enter your signing data.
    Creating signing profiles with digital signature data

With HTML5 project signing configuration, you entered a Bundle ID. When you create a PhoneGap Application project, you enter an Application ID. This is equivalent to what was previously called the Bundle ID. You can change the Application ID from the default after a project is created by editing the field in the config.xml file.

Now, you should be able to test your new project using the Mobile Web Simulator, and then build your app using the PhoneGap build.

Note: Because you are working with a newer version of Cordova and newer versions of all plugins, there is the possibility that some porting errors could occur.