Importing a JQuery Mobile Project into MyEclipse

If you have a JQuery Mobile application designed using another tool, you can import into MyEclipse 2015 for further development and building. In this tutorial, you will learn how to:

Create a PhoneGap project for your JQuery Mobile app
Use the Import dialog
Preview the design
Test in the Mobile Web Simulator

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

1. Create a new PhoneGap Application Project

On the Dashboard, click Create a PhoneGap Application Project to create a new, default project structure.

Create a new PhoneGap Application Project
Give the project an appropriate name.

Name your PhoneGap project
Once the project has been created click into its directory structure and rename the index.html file to index1.html. This allows the possibility to go back to the original default layout at a later time if needed, as well as giving access to required files later in this tutorial.
Right-click the www folder in the project directory structure, and select Import.

2. Complete the Import Wizard

There are three main ways MyEclipse can import an existing design.

Archive File
The Archive File import uses a zipped or compressed file type that contains the projects base structure and is one of the best ways to import a design.
Existing Projects into Workspace
The Existing Projects into Workspace method allows you to import an existing MyEclipse project into the current workspace.
File System
The File System method imports a full file structure into the project. For advanced structures or when using a design tool that does not export to a compressed file, this process works well.

The sample video shows the Archive File method using a zip file, though all three processes are similar to use.

selectarchive
Select archive file to import

Once the archive file or other source has been chosen, a second page appears allowing you to select specific files from the source. Make sure all required files are chosen.

selectfilestoimport
Select files inside archive to import

When import is complete, you can double-click the imported index.html file (or project’s main file) and open it in the Visual Designer to see and edit its code.

newcode
New code in Editor window

3. Preview the Design and Add the PhoneGap.js Reference

Double-click the index.html file of your imported design to open it in the Visual Designer.
Click the Preview tab near the bottom of the editor window to view the imported design.
Previewing the imported design
Add the PhoneGap javascript reference to the imported index.html file. Either copy and paste the reference from the original index.html file or type the script tag below inside the <head> tags.
```
<script type="text/javascript" src="phonegap.js"></script>
```

If you copy and paste the phonegap.js script tag from the project’s original index.html file (renamed index1.html), you’ll also see a reference to the js/index.js file. You can include this reference in your imported file, as well. the index.js file is for adding custom code while staying with the default file structure of the PhoneGap project.

Note: The phonegap.js file is added when compiled and is not directly visible or editable in the file structure.

4. Test in the Mobile Web Simulator

Right-click the project’s main folder, and select PhoneGap>Preview Application in Mobile Web Simulator.

Preview in Web Simulator
Select a platform for viewing.

Selecting simulator platform
Test the application in the simulator.

Viewing in the simulator