Configure Emulator Environment

As shown in The Device Emulator GUI, the Device Emulator provides a series of palettes, each of which controls some aspect of the virtual environment. The palettes are divided into two accordion-style columns, one on the left and one on the right of the virtual device.

Before you test you app in the EMULATE tab, set up each configuration that will be used to test your app. To test your app using multiple configurations, set up each configuration, test and debug it, edit your app, and repeat. Also, make sure that the appropriate <script ... lines are present.

Customizing the Device Emulator Appearance

  • To open (expand) or close a palette, click its name. Expand a palette to view and modify its options.

  • To hide or show a palette column, click the or icon. For example, you might hide one column of palettes to increase the width available to display the virtual device under test.

  • In the toolbar, use the slider or the button to make the virtual device larger or smaller.

  • You can move palettes by dragging them to a different location.

For this Tutorial: Choose Device, Connection Type, and Other Characteristics

Use This Palette

To Do This

Devices

Select a device (device under test), such as Apple iPhone 5* or whatever you prefer. The virtual device chosen appears in the middle of the EMULATE tab, so you can view how your app fits on the device's screen and resolution.

You can choose the orientation as portrait or landscape using the buttons.

To simulate the user clicking the Back button on the chosen virtual device, click the button.

To maximize the width available to view the virtual device, use the Zooming percentage or hide palettes as described below in Customizing Device Emulator Appearance.

To test your app using multiple devices, select each device, test and debug it, and repeat.

Information

A summary of the currently selected settings appears, such as the selected Device, screen size and density, and other device details.

Multi-page Testing

Allows you to specify an html page to help you test multi-page apps. The default start html page is index.html.

To display an external web page in the emulator's virtual device, enter an absolute URL (with a http:// or equivalent prefix). This is useful for testing web applications that rely on server-side support but want to be mobile-friendly. The UserAgent string used is determined by the chosen virtual device. So if you are currently emulating an iPhone 5, the external server can deliver content appropriate for that device.

If you enter a relative URL (without the http:// or equivalent prefix), then the emulator will choose a file in the current project.

Accelerometer

Open this palette and get familiar with its content.

Click the button to shake the image. In this tutorial, this feature is used by the commented out shake.js script. On certain platforms, the shake may mean something different.

Use this palette to simulate device rotation by dragging the small device using the mouse pointer. As you drag it, the accelerometer values change.

AppMobi Live Update Service

Emulate updating your app's version. See the topic Test in Emulator.

Device & Network Settings

Open this palette and view the settings for the virtual device. Locate the Connection Type drop-down. Specify the type of network connection you will use on your target mobile system in the TEST tab. For example, if both your development system and the target device are on the same local wireless network, choose WIFI.

Use this palette to choose:

  • Whether the Status Bar and a simulated Splash Screen should appear on the virtual device.

  • The Connection Type (see above) and whether a network lag should be simulated.

  • Some Globalization conventions for this app's appearance, such as the language used to show the locale time name, whether Day Light Savings time should be used, and the first day of the week.

Geo Location

Open this palette and get familiar with its content.

Use this palette to zoom the displayed map, simulate changes in the physical geographic location of the device by dragging the map or entering coordinates, choose a compass heading and type a speed, specify Global Positioning Satellite (GPS) delay time, simulate a GPS timeout, and use a recorded GPX file to simulate route movement.

In the demo app used in this tutorial, this feature is also provided by the commented out location.js script.

Events

Open this palette and get familiar with its content. Use this palette to simulate to fire system-level events:

  1. Select an event, such as deviceready or backbutton.

  2. Click the Fire Event button.

AppMobi PushMobi Service

Emulate sending push messages. See the topic Test in Emulator.

In addition to the palettes, check the EMULATE tab settings by clicking the button in the toolbar.

Checking API <script ...> References

The Device Emulator supports both the Intel XDK APIs as well as Apache Cordova* core APIs. You must include these <script ...> tags to bring in the files to implement these APIs:

<script type="text/javascript" src="intelxdk.js">
<script type="text/javascript" src="cordova.js">

This reference to intelxdk.js and cordova.js is needed to use the EMULATE, TEST, or BUILD tabs. The intelxdk.js and cordova.js files are not needed within the project, because the EMULATE, TEST, and BUILD tabs serve them automatically within the Intel XDK environment.

Note

Older versions of the Intel XDK or appMobi* reference appmobi.js in source files. Replace appmobi.js references to specify intelxdk.js as shown above.

When you build your app using the Adobe PhoneGap Build* utility, you similarly do not need to have a cordova.js file in your project, because the build utility will supply it for you. However, if you build your app with a platform-specific SDK, you must have the cordova.js file that matches that particular platform (as well as other native libraries).

Cross-platform Screen Resolution

Selecting a device in the Device Emulator determines the pixel dimensions of the frame where the app under test is rendered. You can view display details in the Information palette.

In addition to the screen size of the target device, consider the resolution or pixel density of the target device. Pixel density can be measured using pixels per inch (PPI).

Per informazioni complete sulle ottimizzazioni del compilatore, consultare l'Avviso sull'ottimizzazione