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.
- Give the project an appropriate name.
- 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.
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.
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.
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.
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.
- Select a platform for viewing.
- Test the application in the simulator.