Thursday, March 20, 2014

Part 9 Overview of the Windows Phone 8 Emulator [AbsoluteBeginnersSeriesForWindowsPhone8_files]



We've seen the Windows Phone Emulator at work in this series. It is a crucial
component to developing apps for the Windows Phone platform, so I wanted to spend a
little time becoming more familiar with it and point you in the right direction for more
information.

Our game plan in this lesson ...

1.  We'l  learn about what the Windows Phone Emulator real y is, and how it supplies
different versions for different deployment scenarios. 
2.  We'l  learn about the function of the Emulator, including keyboard shortcuts that emulate device buttons. 
3.  We'l  learn about the controls to resize, rotate and simulate the act of handling the virtual device as if it were a physical one, with accelerometer support, GPS support, and more. 

1. What is the Windows Phone Emulator?
In a nutshell, the Windows Phone Emulator is a desktop application that simulates a
Windows Phone device, and actually provides similar performance to a physical
Windows Phone device. It provides a virtualized environment in which you can debug
and test Windows Phone apps without a physical devicein fact like I said at the outset
when installing the Windows Phone 8 API, it's running Microsoft's Hyper-V. For a
friendly introduction to Hyper-V on Windows 8, check out this blog post from the
Windows 8 team: Bringing Hyper-V to "Windows 8"

Now, while the Emulator is great for development and quick debugging sessions, before you publish your app to the Windows Phone Store, Microsoft recommends that you actually test your app on a real Windows Phone. 

2. Choosing different versions of the Emulator for debugging
Up to now, when we clicked the Run / Debug button on Visual Studio's toolbar, we were
running the Emulator in its default configuration ... something called WVGA 512MB:


What does WVGA and 512MB really mean?

The 512MB indicates that we're running in a memory constrained environment ... The
default emulator image in Visual Studio is Emulator WVGA 512MB, which emulates a
memory-constrained Windows Phone 8 phone. So, for example, the Lumia 610 is an
inexpensive entry level Windows Phone 8 device which sports only 256MB of RAM. By
contrast, the Lumia 920 has 1 GB of RAM. On lower-RAM devices, having multiple apps running at the same time or creating a memory intensive app might cause performance problems. So, to be sure that your app will run well on lower-RAM devices you can test your app using a realistic Emulator image.

There are a number of great articles about RAM usage on MSDN ... let me point out the
best starting point to learn more:

App performance considerations for Windows Phone

Optimizing Apps for Lower Cost Devices

What does "WVGA" as well as those other acronyms stand for?

The Emulator allows you to test your app on a unique emulator image for each of the
screen resolutions supported by Windows Phone. This default selection encourages
you to target the largest possible market for your Windows Phone 8 app.

·      WVGA (800 × 480) 
·      WXGA (1280 × 768) 
·      720p (1280 × 720) 
If you run the default, then go to the Settings app in the About button, you can see this
confirmed:


How does this translate into the actual phones on the market?

Lumia 920
Display size: 4.5 inch
Display resolution: WXGA (1280 x 768)

Lumia 820
Display size: 4.3 inch
Display resolution: WVGA (800 x 480)

Lumia 610
Display size: 3.7 ''
Display resolution - WVGA (800 x 480)

I realize by the time you watch this there may be newer phone models. The point is that
you should be aware of the fact that you'll need to support different screen resolutions
and memory constraints. Like I talked about in the lesson on Layout using XAML, you
will want to eliminate specific pixel sizes for layout (except for margins). Choosing from
the different Emulator sizes, you can make sure you're on the right track.

3. Working with the Phone Emulator's special features
I'll not spend a lot of time on the phone's basic navigation. A lot of this you'll pick up by
using the Emulator throughout the series if you don't already have a physical phone in
your possession. Essentially, you'll have an almost identical experience, complete with
the Start and Apps page, search, web browsing, clock, battery, etc.:


You have the same hardware buttons on the bottom of the Emulator as you would have
on a Windows Phone:


Note that you'll be missing the buttons on the side of the phone. For example, my Lumia
920 has three buttons on the sidea volume up and down, a power button, and a
camera button. These can be access in the Emulator with keyboard function keys.

There's a list of keyboard mappings here:


·      F6 - Camera button half-way 
·      F7 - Camera button 
·      F9 - F10 raise and lower the volume 
·      F11 - plays / pauses audio ... it simulates an in-line headphone button that pauses music
and answers incoming phone calls. If you double-tap the button, it'l  skip to the next
audio track on your playlist or album 
·      F12 - Power button / lock screen 
·      F1 - Back button 
·      F2 - Windows key 
·      F3 - Search button 

Let's work with the Emulator's keyboard ... F3 to Search:


You'll see the phone's keyboard appear. I can use my mouse to simulate tapping the
keys. Most of the time during development, that's a pain. I would rather use my
computer's keyboard.

PAGE DOWN button - When a textbox is the target input, PAGE DOWN disables the
virtualized "hardware" keyboard down, and you can use your physical keyboard for
input.

PAGE UP button - When a textbox is the target input, PAGE UP enables the virtualized
"hardware" keyboard.

PAUSE/BREAK button - Toggles the keyboard, so you could just use that all the time.

As you can see, I typed in the search phrase "selfridge chicago", looking for articles or a Wikipedia article on one of Chicago's most famous sons, Harry Selfridge who founded the retail store Selfridges of London, and is the subject of a popular TV show on the BBC.

When I click the "Go" keyboard:


The Bing search works in the Emulator just as it would on a physical device, asking for
permission to use your location in case it influences the search results. For example, if I
were in London, Bing might show me a map of Selfridges near me. However, since I'm
in the USA Bing will deliver different results. I'll show you how the Emulator determines
its location in just a moment:


In addition to the "virtualized" phone on screen, there's a floating menu off to the right. A
little experimentation will reveal the functions of the first six buttons, in order:

1.  Shuts down the emulator 
2.  Minimizes the emulator 
3.  Rotates the emulator 90 degrees counter clockwise 
4.  Rotates the emulator 90 degrees clockwise 
5.  Expands the emulator to the largest size that can fit comfortably on your computer screen 
6.  Brings up the zoom dialog


7.  Opens up the additional tools dialog. There are four tabs on the Additional Tools dialog.The first is the Accelerometer which can be used to test apps that utilize the accelerometer sensor:


1.  You can change the center point of the phone to change its position in 3D space by clicking and dragging the orange dot in the circle. 
2.  You can change the Orientation to one of the presets. 
3.  You can play recorded data, like a "shake" motion. 

For more information about the Emulator and the Accelerometer sensor in the Windows
Phone SDK, a good starting spot would be this article:

How to test apps that use the accelerometer for Windows Phone

The next tab is the Location tab which allows you to set the current location of the
phone. So, even though I'm sitting in Dallas, Texas, I can act like I'm testing my phone
in Chicago or any other place in the world. To do this:


1.  Perform a search for a particular location, like "Chicago, IL". 
2.  Right-click the map to create a pin. 
3.  I'l  verify the exact location in the list of pins marked by their latitude and longitude. 

Now, I can go to the Windows Phone Emulator's Map app to see the map zoom to that
location. We'll rely on this technique later in this series when we create our AroundMe
app.

The third tab is for creating Screenshots, which can be helpful when you're creating
documentation or bug reports:


And the final tab is the Network tab. There's not a lot you can do other than see the IP
address of the phone on the network:



In addition to the Emulator itself, Visual Studio has some tooling that can affect how the
XAML designer displays the phone (orientation, theme and color, chrome, etc.):


There's also a Simulation Dashboard that allows you to validate your Windows Phone
apps in various real life conditions.


The Simulation Dashboard gives you the ability to simulate different network conditions,
trigger reminders, and check how your app will perform under a locked screen:


You have so many ways to test and monitor your app during development time so you
gain some confidence in how it will perform when you distribute it on the Store.

Recap
The last tip I would give about the emulator is that it's ok to just leave it up and running
during development. There's no need to shut it down. When you launch and re-launch
your app in debug mode from Visual Studio, part of that process is deploying the latest
version of the app to the phone. It's time consuming to relaunch the Emulator each time,
and Visual Studio will connect to an existing Emulator instance when it needs to.

So to recap, the Emulator is a great tool that allows you to quickly deploy your app
during development to a virtualized Windows Phone. We looked at how to test different
device screen sizes and memory constraints, how to manipulate the emulator to test for
rotation and motion, how to make the phone think it is located geographically in a
specific place, and much more. We'll use these skills extensively throughout this series.

No comments:

Post a Comment