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>

   to
   

   <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.
   
   

   buildconfig.xml		config.xml
   Application Identity		Essentials
   	Version		Version
   	Author: Full Name		Author: Name
   	Author: Email		Author: Email
   Device & Orientation		Preferences
   	Android screen sizes		No mapping
   	iOS target devices		iOS: Target device
   	Device orientation		Common: Orientation
   Web Source		N/A
   Android Services & Permissions		Android Permissions
   Digital Signature		N/A
   	Digital signatures are now entered in the Mobile Tools preferences. This is discussed in the following section.
   App Icons		Images
   	All Android icons		Android/Icons
   	All iOS icons		iOS/Icons
   Startup Images		Images
   	All Android startup images		Android/Splashes
   	All iOS startup images		iOS/Splashes
   Notification		N/A

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.