How to develop a WP7 app?


Published on

Learn the Windows Phone 7 basics for your next app! Get to know:

• The Hardware architecture, the application platform, its framework.

• The deployment process.

• The application marketplace .

Intended for:CIOs, CTOs, IT Managers, IT Developers, Lead Developers

Presented by Philip Wheat, Microsoft Architec.

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • This presentation explains how to write Windows Phone 7 applications in Silverlight. It builds on top of assumed existing Silverlight skills (you should be familiar with things that can be done in Silverlight)
  • Windows Phone is a whole new kind of phone, targeted specifically at consumers, who work hard every day to balance their work lives and their personal lives. These were the key focus areas for our design and development effortsNew philosophy on what the device needs to doFocus on the end user, not on enterprises Improved “glanceable” design paradigm with “Metro”Standardized experience across all devices, manufacturers and all carriersStrong developer platform for building rich, interactive applications on the phone – a key part of our “3-screens and a cloud” strategyWindows Mobile Phones were essentially PPCs that got phone capabilities added to them. This device has been redesigned from the ground-up to be easy to use, incorporate the things you do and care about, and give you the information you need quickly and easily.Depending on the size of the crowd, I also ask about the screen shot here and ask for their feedback.
  • After talking to developers and customers since the Mobile World Congress, early 2010, it is clear that Windows Phone 7 is a different platform. It really begins with something called Smart Design. This is an important concept for Windows Phone 7, evolving around the Metro design language. Metro really defines the User Interface of phone. As an application or game developer you need to understand the Metro concept to assure that your applications create consistent experiences for end users.A big part of Windows Phone 7 is the idea of Integrated Experiences, bundling together things like:Xbox Live and Xbox gamingFull Microsoft Office integrationFull Zune experience on the phone
  • 40 Years of Swiss and Swiss Influence DesignPrintPackageAligned with design direction for Metro UI
  • Integrated Experiences:The market for Windows Phone 7 consists of consumers with both a personal life and a business lifeThe phone works great in the customer’s personal life as well as in their business lifeIntegrated Office functionality creates great experiences for business usePictures and Multimedia experiences are great for personal useGetting applications on the phone for end users is easy through MarketplaceDelivering applications to Marketplace is easy for Developers
  • Same as the previous slide, but with more detailed components displayed. Just use this as another overview. On the next slides a number of individual items will be explained in more details.
  • Flash is frame based – Silverlight is time based. Also talk about Render thread and double animation storyboards running on GPU.
  • As you saw in the demo, the TextBox really integrates with the Operating System software keyboardThere is also a password obfuscation delay. When you enter data on a password textbox, you can see the entered character for a second before it turns into a dot. This is what you expect on a phone because entering passwords is kind of tricky when you are using the software keyboard.You also saw that built-in controls have gesture support. There are also new events available on controls that are called “Manipulation Events”. They are fired when manipulations are started and ended or when a particular delta is reached. Using these events on controls you are able to influence gestures.
  • We start discussing the integration that applications have with the software keyboard and something called the ‘input scope’.The input scope is a hint to the software keyboard about how you want the keyboard to be shown to the user (when for instance entering text in a textbox). Can be specific for:Phone numberWeb addressEmail addressGeneric textSee separate demo script for a full explanation (Demo 2).
  • The accelerometer is pretty much straight forward. You get force in units of gravity applied in every dimension over time. Every sample comes with an x, y and z force and a time stamp.If the device is just laying flat on a surface, it has -1 unit of gravity in the Z-direction.X and Y coordinates are similar to screen coordinates, Z gets into the device.When you shake the device, you will get readings containing values larger than 1 unit of gravity.
  • There are three different ways to retrieve location on the phone:GPSLocation information very accurateRadio drains significant powerInitial reading slow (especially if the device has been moved over a long distance without GPX fixes)Does not work indoorsCell Tower LookupNot that accurate (depends on the distance between cell towers)No additional power requirements (assuming the phone radio is switched on already)Fast location retrieval (if the phone radio is switched on, you are already connected to tower(s))No 100% coverageWiFi LookupIn between GPS and Cell Tower in both accuracy, speed and battery consumptionWorks pretty good in larger citiesIndependent of physical location retrieval, one consistent API is used inside your application.The cloud can help getting more accurate location readings, based on other people having been at the same location (without the need for enabling GPS on a particular, individual device)Location services do not only retrieve Lat/Long readings, but can also resolve address information through reverse geocoding services.
  • Location services are currently not supported on the emulator (there is not something like FakeGPS), but you can use a mock to ‘pretend receiving’ location dataLocation services combine smart software on the device with a backend service to balance accuracy of location with time / power it takes to get the locationFor some applications location down to city or zip code level is sufficientOther applications need read accurate location information up to a few yardsThe different location requirements can be specified, using a location API that is not only available on the phone, but also on the desktop (Windows 7, .NET Framework 4.0)Reactive Extensions,
  • See separate demo script for a full explanation (Demo 5).
  • This is just a list of all launchers and choosers that are available on Windows Phone 7.Again: A launcher starts an existing Operating System application and puts your application (temporarily) to the background.A chooser is a piece of Operating System functionality that can select some stored data and return it to your application.
  • Why there is no exit button’t forget to mention PopUp Control.
  • Unique to a Silverlight application on the phone is that a lot of things can happen while the user is working with your application.Phone calls will come in and text messages and the lock screen might be active if the user stops working with your application.All of this activity effects the way your application runs on the device.
  • The application life time on a phone is basically similar to any other application. An application that is not running can be started, therefore becomes running and after some time it might be terminated, reentering the not running state.A phone application differs slightly from a ‘normal’ application. [Animate]While you are running on the phone two things can happen, each with their own behavior that we will cover in detail: The application can be obscuredThe application can be paused
  • The behavior of an obscured application is not implemented in the MIX CTP, so we can’t show this on the device emulator. Each numbered item explains the situation after an animation:An application is runningSomething happens on the device (e.g. A phone call, a low battery warning, a calendar reminder)This means that the user cannot see your application anymoreIn this situation the OS tells you that it has been obscuredGives the app the opportunity to do somethingThe application keeps runningNo resources are being taken from the applicationAfter some time the event that happened on the device goes away (e.g. the user confirmed a dialog), resulting in an unobscured notification to your appThe application knows it is entirely visible againFor instance, if the application is a game, it can pause itself when it is obscured. However, anything that does not require user interaction can simply continue.Then when the application (game) becomes unobscured again, you could resume it.
  • The next thing to investigate is what happens if your application is running and the user jumps to another application.Begin again with the situation where the application is runningThe user does something, for instance click the start button to run another applicationIn this situation, the application will receive a pause event, indicating that the application should stop doing what it is doing. The OS actually suspends the application in this case.If the user comes back to your application it will receive a resume event and can continue runningImportant: While you are suspended you should assume that your process is killed!! (it might not really happen, depending on resources used by your application and the resources needed by the application that is now running)When you enter the pause state, your application should save its state for future useThe paging model of an application can help here, if all your pages are stateless you don’t have to do anything in particularWhen the resume event happens, just go back to that state (could be a page) where you were when you were pausedThis approach guarantees that the user does not even know that your application was suspended and possibly killed
  • Push notifications are a way to offload background processing from the device into the cloudNo need to use the battery, CPU cycles and memory on the deviceInitiated by the server to enable key background scenariosAKA ‘Smart Multitasking’Users can focus on the foreground application that has as much resources as possible availableYou (as a developer) can notify the user through the server if there is something they should know about or react upon
  • There are three types of push notifications that you can use on a Windows PhoneNotifications that show up when your application is not running:Tile UpdateToast NotificationNotification that show up when your application is running:Possibility to immediately update your UITile UpdateImagine an application that gets photo feeds, for instance from a service like flickr. Currently the tile shows there are 14 pictures available[Animate]Something happens on the backend: new pictures become available. Through push notifications the tile can be updated[Animate]Toast NotificationImagine a weather application. The user has indicated that they want to be informed about weather updates. Currently the user is not using the weather application though.[Animate]You can send a toast to the device. It appears on the screen, regardless of what the user is doing on the device. If the user clicks on the toast, your application will be launched.[Animate]Push Notification while your application is runningInstead of polling for changes, you setup a push notification (meaning your application will wait for something to happen on the backend with no polling necessary). When something happens on the backend, the server will ping your application.[Animate]The application can take immediate action, for instance to display a newly received message to the user.
  • Explain in a bit of detail how push notifications work (numbers correspond to next animation)Start with your application running on the deviceThe user indicates that they are interested in some notifications that your application can receiveYou are opening a push channel inside your application with the push clientThe push client returns a unique (per device and per application) URI to your applicationThe URI points to some live service hosted by Microsoft, somewhere in the cloudYour application sends that unique URI to your own back end serviceCan use any mechanismCan use any type of authenticationCan use custom protocolsYour service just sits somewhere in the cloud, waiting for something to happenIf something interesting happens ….Your service takes the event data and posts it to the unique URINo magic, just an ordinary http POSTThe Push Service takes the data you gave it and uses the URL to identify the device and the applicationThe data is send to the deviceDepending on the state of the device and the type of notification, the notification willAppear in the application (where you are responsible to display it to the user)Show up as a toast notification (the operating system takes care of this)Update a tile (the operating system takes care of this)
  • Right now, you are going to show some code, because the whole mechanism of push notifications is much simpler than it actually sounds.See separate demo script for a full explanation (Demo 4).
  • Develop your applicationDebug your applicationBeta program support to allow customers to help testing your applicationSubmit your applicationApplication will be certifiedFriction freeGuarantees good end user experienceProcess will be very transparentYou know what happens during certificationApplication will be available in the market place
  • Marketplace is an integrated experience on the phoneUsed to acquire contentMusicVideosGamesApplicationsAllows friends to recommend stuff to youFun to useMeans it will be used a lotTry vs Buy (distinguish with one single API: boolIsTrial())Additional API that can take end users that run your app in trial mode immediately to the location on Marketplace where they can buy your applicationBilling flexibility (focus on the end user)End users like billing through Mobile Operators over credit card billingManaged by MicrosoftApplications will be updated through Marketplace as well.
  • How to develop a WP7 app?

    1. 1. Philip Wheat<br />Architect Evangelist -Startups <br />Microsoft Corporation<br /><br />An Introduction to Windows Phone 7 Development<br />Juan De Abreu<br />VP -Delivery Director<br />Common Sense<br /><br />
    2. 2. #CSwebinar<br />
    3. 3. Agenda<br />Introduction<br />Overview of the Phone<br />Demo like crazy!<br />Marketplace<br />Q&A<br />#CSwebinar<br />
    4. 4. A different kind of phone, designed for a life in motion<br />Philosophy<br />Customer<br />Design<br />Experience<br />Platform<br />#CSwebinar<br />
    5. 5. Different, for good reasons<br />Smart Design<br />Integrated Experiences<br />Photo by: Andrew Butitta, Founder, Talisman Digital Photography<br />#CSwebinar<br />
    6. 6. #CSwebinar<br />
    7. 7. Integrated experiences<br /> OFFICE<br /> PICTURES<br /> MUSIC+VIDEO<br /> MARKETPLACE<br /> GAMES<br />PEOPLE<br />#CSwebinar<br />
    8. 8. WINDOWS PHONE 7<br />Let’s see the phone already!<br />demo<br />#CSwebinar<br />
    9. 9. Hardware Architecture<br />Capacitive touch<br />4 or more contact points<br />Sensors<br />A-GPS, Accelerometer, Compass, Light, Proximity<br />Camera<br />5 mega pixels or more, flash required, camera button required<br />800 WVGA / 480 HVGA<br />Multimedia<br />Common detailed specs, Codec acceleration<br />Memory<br />256MB RAM or more, 8GB Flash or more<br />GPU<br />DirectX 9 acceleration<br />CPU<br />ARMv7 Cortex/Scorpion or better<br />Hardware buttons | Start, Search, Back<br />480 WVGA / 320 HVGA<br />#CSwebinar<br />
    10. 10. Elements of the application platform<br />Tools<br />Runtime – On “Screen”<br />Phone Emulator<br />Sensors<br />Media<br />Data<br />Location<br />Samples<br />Documentation<br />Xbox LIVE<br />Notifications<br />Phone<br />Guides<br />Community<br />.NET Framework managed code sandbox<br />Packaging and Verification Tools<br />SCREEN<br />CLOUD<br />Portal Services<br />Cloud Services<br />Notifications<br />App Deployment<br />Registration<br />Marketplace<br />Validation<br />MO and CC Billing<br />Location<br />Identity<br />Feeds<br />Certification<br />Business Intelligence<br />Maps<br />Social<br />Publishing<br />Update Management<br />#CSwebinar<br />
    11. 11. Windows Phone 7 Framework<br />Windows Phone Frameworks<br />Camera<br />Device Integration<br />Launchers & Choosers<br />Windows Phone Controls<br />PhoneApplicationPage<br />PushNotification<br />WebBrowserControl<br />Sensors<br />PhoneApplicationFrame<br />Silverlight Presentation and Media<br />XNA Frameworks for Games<br />Controls<br />Drawing<br />IsolatedStorage<br />Drawing<br />GamerServices<br />Navigation<br />Shapes<br />Markup<br />Media<br />Audio<br />Media<br />Graphics<br />Content<br />Input<br />Application Object<br />Common Base Class Library<br />Diagnostics<br />Reflection<br />IO<br />Runtime<br />Resources<br />Globalization<br />Text<br />Location<br />Net<br />Collections<br />ComponentModel<br />Configuration<br />Security<br />Threading<br />ServiceModel<br />Linq<br />#CSwebinar<br />
    12. 12. XAML Fundamentals<br />#CSwebinar<br />
    13. 13. Resources and Styles<br />4<br />Elements have a dictionary of resources identified by Key<br />Can store arbitrary objects, not just UI objects<br />{StaticResource} XAML directive does hierarchical lookup<br />Code can access local element’s Resources dictionary<br />resources<br />styles<br />Styles contain setters for Properties and Values<br />Styles can derive from other styles<br />Styles are applied explicitly by key or implicitly<br />Can be changed dynamically to theme an application<br />#CSwebinar<br />
    14. 14. Built-in animation system<br />Animation is driven by Storyboards<br />Storyboard<br />DoubleAnimation<br />ColorAnimation<br />PointAnimation<br />etc<br />animations can apply easing functions<br />~10 built-in (e.g. sine) + custom<br />#CSwebinar<br />
    15. 15. Common databinding system<br />Elements have a DataContext<br />Resolution of declarative bindings is done by hierarchically examining an element’s DataContext<br />Grid<br />Button<br />#CSwebinar<br />
    16. 16. Common databinding system<br />#CSwebinar<br />
    17. 17. Application Structure<br />#CSwebinar<br />
    18. 18. Application structure<br />Applications are built like web sites<br />Functionality is split into pages<br />Forward navigation via links<br />Backward navigation via Back<br />Users can navigate across different applications<br />Previous applications (pages) are in the back stack<br />#CSwebinar<br />
    19. 19. UI Model: Familiar Web Concepts<br />Phone application<br />Provides UI represented as XAML pages connected into cross-app flows by URI’s<br />Web application<br />Provide media represented as HTTP resources linked by URL’s<br />Shell frame<br />Requests pages, renders UI, and handles navigation across apps<br />Web browser<br />Requests HTTP resources, renders them, and handles navigation across sites<br />Sessions and back stack<br />Groups together sequences of pages corresponding to a user’s activity across apps<br />History and tabs<br />Groups together sequences of HTTP resources corresponding to a user’s activity across sites<br />#CSwebinar<br />
    20. 20. Frame and Page<br />PhoneApplicationFrame<br />Exposes the screen orientation property<br />Exposes a client area where pages are rendered<br />Reserves space for the system tray and application bar<br />Receives Obscured / Unobscured<br />PhoneApplicationPage<br />Fills the entire content region of the frame<br />Optionally surfaces its own application bar<br />Handles Orientation <br />NavigatedTo and NavigatedFrom<br />#CSwebinar<br />
    21. 21. Page Navigation<br />Forward<br />Uri uri = new Uri(“/Page2.xaml”,UriKind.Relative);<br />NavigationService.Navigate(uri);<br />Back<br />NavigationService.GoBack();<br />Hardware Back Button<br />Handle BackKeyPress, OnBackKeyPressthen Navigate to where you would like***<br />#CSwebinar<br />
    22. 22. APPLICATION STRUCTURE<br />Page navigation framework<br />demo<br />#CSwebinar<br />
    23. 23. Controls<br />#CSwebinar<br />
    24. 24. Some old friends…<br />Border<br />Button<br />Canvas<br />CheckBox<br />Grid<br />HyperlinkButton<br />Image<br />ListBox<br />MediaElement<br />MessageBox<br />ProgressBar<br />RadioButton<br />ScrollViewer<br />TextBlock<br />TextBox<br />WebBrowser<br />GestureServiceListener<br />ContextMenu<br />DatePicker<br />TimePicker<br />ToggleSwitch<br />WrapPanel<br />#CSwebinar<br />
    25. 25. … and some new ones!<br />Panorama<br />Bing Map<br />Pivot<br />#CSwebinar<br />
    26. 26. Controls support touch<br />Mouse Events <br />Automatically converted for you<br />SIP and WebBrowser control have gestures<br />ScrollViewer<br />Just like Silverlight<br />So you now have FLICK and PAN for free!<br />Raw <br />Gestures<br />Manipulations<br />#CSwebinar<br />
    27. 27. Input<br />#CSwebinar<br />
    28. 28. Text input<br />TextBox integrates with the software keyboard<br />Software keyboard supports input scoping<br />Key InputScopes: <br />EmailNameOrAddress<br />Text<br />Url<br />Number<br />Time<br />TelephoneNumber<br />PasswordBox has a 1 second delay<br />#CSwebinar<br />
    29. 29. INPUT SCOPES<br />Utilizing the software input panel <br />a.k.a. the SIP<br />a.k.a. the on-screen keyboard<br />demo<br />#CSwebinar<br />
    30. 30. Sensors<br />#CSwebinar<br />
    31. 31. Accelerometer<br />+Y<br />Measures force applied on each axis over time<br />Simple API<br /> As easy as X, Y, Z!<br />-Z<br />+X<br />+Z<br />-Y<br />#CSwebinar<br />
    32. 32. Location: Sources of Location<br />GPS<br />+ Accuracy<br />- Power<br />- Speed<br />- Indoors<br />- Accuracy<br />+ Power<br />+ Speed<br />- Wilderness<br />WiFi<br />Location services<br />+/- Accuracy<br />+/- Power<br />+/- Speed<br />+/- Urban areas<br />Cell towers<br />#CSwebinar<br />
    33. 33. Location services<br />Smart device + cloud service<br />Balance accuracy with time & power<br />Consistent API across platforms<br />No Emulator Support<br />Reactive extensions for mocking<br />#CSwebinar<br />
    34. 34. SENSORS<br />Accelerometer<br />Location Services<br />demo<br />#CSwebinar<br />
    35. 35. Launchers & Choosers<br />#CSwebinar<br />
    36. 36. Launchers & Choosers<br />Launchers<br />BingMapsTask<br />MarketplaceLauncher<br />MediaPlayerLauncher<br />PhoneCallTask<br />SaveEmailAddressTask<br />SavePhoneNumberTask<br />SearchTask<br />EmailComposeTask<br />SMSComposeTask<br />WebBrowserTask<br />Choosers<br />CameraCaptureTask<br />PhoneNumberChooserTask<br />PhotoChooserTask<br />EmailAddressChooserTask<br />#CSwebinar<br />
    37. 37. Launchers & Choosers<br />demo<br />#CSwebinar<br />
    38. 38. Application Bar<br />Toolbar<br />Up to 4 icons<br />Can set transparency level<br />Slide up Menu can display more items<br />Can declare in code or XAML<br />Sample icons found under Program FilesMicrosoft SDKsWindows Phonev7.0Icons<br />#CSwebinar<br />
    39. 39. Application Bar<br />Icons<br />48 pixels by 48 pixels <br />Black or White foreground, transparent background <br />Using alpha channel<br />Circle will be added<br />Choose icons with clear meanings<br />Consider landscape mode (y-axis mirror images)<br />Don’t add a back or home button!<br />#CSwebinar<br />
    40. 40. APPLICATION BAR<br />demo<br />#CSwebinar<br />
    41. 41. Tombstoning…<br />…or, Application Lifetime Management<br />#CSwebinar<br />
    42. 42. A world of constant interruptions<br />phone calls<br />low battery<br />lock screen<br />reminders<br />App<br />switch<br />txt msgs :-)<br />#CSwebinar<br />
    43. 43. Basic application lifetime<br /><ul><li>Splash screen
    44. 44. App constructor
    45. 45. Startup event
    46. 46. Exit event</li></ul>Obscured by shell<br />Moved to background<br />#CSwebinar<br />
    47. 47. Hidden by shell: OBSCURED<br /><ul><li>Phone call
    48. 48. Reminder
    49. 49. Battery low</li></ul>Games enable user to resume<br />What if they answer the phone?<br />Game auto-pauses<br />#CSwebinar<br />
    50. 50. Moved to background: DEACTIVATED<br /><ul><li>Hit Start
    51. 51. Open toast
    52. 52. Lock screen</li></ul>Load state to continue where you left off<br />User is back where they left off<br />Assume your process is killed<br />Save state for later use<br />#CSwebinar<br />
    53. 53. APPLICATION LIFETIME<br />Activation, deactivation, and idle detection<br />demo<br />#CSwebinar<br />
    54. 54. Push notification services<br />#CSwebinar<br />
    55. 55. Push notifications<br />Server-initiated communication<br />Enables key background scenarios<br />Preserves battery life and user experience<br />#CSwebinar<br />
    56. 56. Notification types<br />15<br />14<br />New photos online!<br />Dallas, TX: Sunny and 80 degrees<br />#CSwebinar<br />
    57. 57. Push notifications: data flow<br />Tile<br />Push client<br />Toast<br />Open push channel<br />Return URI<br />Data to App<br />Data to toast<br />Data to tile<br />App<br />Send URI to server<br />Send push data to client<br />Your service<br />Push service<br />Send push data to URI<br />Event<br />#CSwebinar<br />
    58. 58. PUSH NOTIFICATIONS<br />Subscribing to and receiving push notifications<br />demo<br />#CSwebinar<br />
    59. 59. Marketplace<br />#CSwebinar<br />
    60. 60. Deployment process<br />Develop <br />& Debug<br />Submit& Validate<br />Certify<br /> & Sign<br />Windows Phone Application Deployment Service<br />Marketplace<br />#CSwebinar<br />
    61. 61. Application marketplace<br />Enhanced Discovery<br /><ul><li>Easy to find great applications, games
    62. 62. Fun to browse the marketplace</li></ul>Simple, Reliable Acquisition<br /><ul><li>Try before you buy
    63. 63. Buying and downloading content is a breeze
    64. 64. Payment flexibility (MO billing and credit card)
    65. 65. Easy application updates</li></ul>#CSwebinar<br />
    66. 66. Further information<br />http://create.msdn.commarketplace, downloads, tutorials, videos and more!<br />http://microsoftplatformready.comget your $99 back!<br />, databases, control tooklits, sample downloads and more<br /> to interesting WP7 content<br /> forums for Windows Phone 7<br />#CSwebinar<br />
    67. 67. Calls to action<br />1<br />Install the Tools!<br />2<br />Start Coding!<br />3<br />Give us Feedback!<br />#CSwebinar<br />
    68. 68. Thanks! <br />How can we help?<br /><br /><br />@pwheat<br /><br /><br />@jdeabreu<br />#CSwebinar<br />
    69. 69. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.<br />The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. <br />MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.<br />