facebook
  1. Genuitec Learning Center
    2.  > 
  2. Archives

MyEclipse Mobile Web Simulator Guide

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

1. Preview Apps in the iOS and Android Simulator

The Mobile Web Simulator can be used for both previewing an app during development, and for browsing the web to view apps or sites on the Internet. Using the simulator, you can view apps on different devices, change the orientation, test device movement, such as shaking or rotating, test geolocation changes, and test the effects of various stages of battery life. Note: Accelerometer, geolocation, battery life, and platform event tests require the use of PhoneGap APIs in your app. The Mobile Web Simulator is based on the Chrome browser using the same WebKit rendering engine as iOS and Android. The simulator emulates the Cordova 2.0 API and supports previews for iPhone, iPad, Nexus S, Kindle Fire 7″, and Samsung Tab 10.1 devices.

2. Launching the Web Simulator

To open a project application for testing, right-click the project in the Explorer, and select PhoneGap>Preview Application in Mobile Web Simulator.

Opening a project in the simulator
To open the Mobile Web Simulator for viewing apps or sites on the Internet, do the following:
  1. Click .
    Opening the simulator to view web content
  2. Enter a URL into the address bar to view web content.

3. Setting Simulator Configuration

Project applications can be run and tested in the simulator. In addition, you can use the simulator to browse the Internet and run mobile applications from the web. Using the Mobile Web Simulator preferences, you can set a home page that appears in the device when you open the Mobile Web Simulator from the toolbar icon .
Home page preference
Note: The Mobile Web Simulator preference page also allows you to enter the path to your Google Chrome installation. If you receive an error that Chrome cannot be found when you try to open the simulator, open the preference page and set the path to the Chrome browser.

3.1 Setting the Device & OS Version

The Mobile Web Simulator supports simulation for iPhone, iPad and multiple Android devices. You can change the device view to see how apps appear on any supported device, as well as in either landscape or portrait orientation. With the simulator open, click , select the device you want to view from the Device drop-down, and click Done. You can also set a custom size by entering custom height and width dimensions.
Selecting the device view
Change the operating system version by opening the System Summary panel and selecting a version from the OS drop-down list.
Changing the OS version

Scaling

You can set the scaling of the device in the simulator window. Open the Orientation and Zooming panel, and drag the slider to select a scaling percentage. Select the Fit to Screen checkbox to fit the device in the window.
Setting scaling

Rotating

When designing an application, you want to consider the screen orientations of the device. If you are designing an application to run in both portrait and landscape, you want to test both orientations. To rotate the device screen in the simulator, open the Orientation and Zooming panel, and click the orientation you want to view.
Landscape orientation

4. Emulating Cordova APIs

The PhoneGap Build Service creates a hybrid app from your mobile project using the PhoneGap runtime and API. This runtime includes the JavaScript cordova.js API and is available to your iOS and Android applications. Visit the Apache Cordova project for project information and API documentation.

4.1 Testing Using the Accelerometer

The accelerometer measures device movement speed, which allows detection of the device’s orientation, roll, pitch and yaw. A Shake button allows you to test how shaking the device affects your app. Simulating movement with the accelerometer provides information to apps that use the Accelerometer API.

  1. Open the Accelerometer panel.
  2. Drag the 3D device image to change the degree of rotation. Hold down the Shift key to adjust the alpha axis rotation. If your app uses the Accelerometer API to respond to various device movements, you can preview the effects of those movements. 
    accelerometer
     Changing degree of axis rotation
  3. Click Shake to simulate shaking the device.

4.2 Testing Battery Power Changes

By simulating various battery power states, you can test the effects on your app. Test the results when the device is plugged in, with a low battery, or test at various battery level percentages. Simulating battery power provides information to apps that use the battery-related events of Events API.

  1. Open the Power Manger panel. The following simulations apply if your app uses the Events API to respond to various stages of battery life.
  2. Select the Plugged In checkbox to simulate having the device plugged into a power source. This simulates charging time, which gradually increases battery power.


    Battery charging simulation
  3. Test various battery levels by changing the battery level percentage.

    Setting battery level percentage
  4. Click Simulate low battery to set a starting percentage and a speed at which the battery level goes to 0.
    Configuring low battery simulation

4.3 Testing Geolocation Changes

The Geolocation panel allows you to test changes to the physical location of the device, including moving along a route. Running a route simulation provides geolocation information to apps that use the Geolocation API.
  1. Open the Geolocation panel.
  2. Use the map to find a location you want to mark or enter coordinates for a location.
  3. Click Marker, and click the point on the map you want to mark. To create a route, mark various points on the route and double-click the map to complete the route.

    Mapping a geolocation route
  4. Click Play to draw the route. If your app uses the Geolocation API to respond to geolocation information, you can preview the effects of location changes.

    Route simulation

4.4 Testing Platform Events

By firing simulating platform events, you can test the effects on apps that use the Events API.

  1. Open the Platform Events panel.
  2. Select an event you want to test, and click Fire Event.

    Platform event simulation

5. Auto-Reloading Simulator with File Changes

During development, you can hot sync your app changes with the simulator so you can leave the simulator open and test as you code. To automatically sync with the simulator, click on the MyEclipse toolbar.
Auto-reload toggle for hot-sync’ing changes

6. Debugging & Inspecting Apps

The Mobile Web Simulator leverages the Chrome Developer Tools for debugging and inspecting your apps. Simply right-click the screen displayed in the device emulator, and select Inspect element to invoke the developer tools.

Learn more about the Chrome Developer Tools:

Guide – https://developers.google.com/chrome-developer-tools/

Videos – https://developers.google.com/chrome-developer-tools/docs/videos

Invoking developer tools